3ac66feba2
gitignore 의 *.md / .claude/ 차단을 풀어 다음 파일을 git 으로 추적. - /CLAUDE.md, /AGENTS.md (루트 에이전트 가이드) - .agents/**/*.md (skills 문서 95개) - .claude/settings.json (Claude Code 프로젝트 설정) .claude/worktrees/ 는 git worktree 메타이므로 신규 ignore 라인으로 제외. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1.8 KiB
1.8 KiB
| title | impact | impactDescription | tags |
|---|---|---|---|
| Use defer or async on Script Tags | HIGH | eliminates render-blocking | rendering, script, defer, async, performance |
Use defer or async on Script Tags
Impact: HIGH (eliminates render-blocking)
Script tags without defer or async block HTML parsing while the script downloads and executes. This delays First Contentful Paint and Time to Interactive.
defer: Downloads in parallel, executes after HTML parsing completes, maintains execution orderasync: Downloads in parallel, executes immediately when ready, no guaranteed order
Use defer for scripts that depend on DOM or other scripts. Use async for independent scripts like analytics.
Incorrect (blocks rendering):
export default function Document() {
return (
<html>
<head>
<script src="https://example.com/analytics.js" />
<script src="/scripts/utils.js" />
</head>
<body>{/* content */}</body>
</html>
)
}
Correct (non-blocking):
export default function Document() {
return (
<html>
<head>
{/* Independent script - use async */}
<script src="https://example.com/analytics.js" async />
{/* DOM-dependent script - use defer */}
<script src="/scripts/utils.js" defer />
</head>
<body>{/* content */}</body>
</html>
)
}
Note: In Next.js, prefer the next/script component with strategy prop instead of raw script tags:
import Script from 'next/script'
export default function Page() {
return (
<>
<Script src="https://example.com/analytics.js" strategy="afterInteractive" />
<Script src="/scripts/utils.js" strategy="beforeInteractive" />
</>
)
}
Reference: MDN - Script element