Source from repo

Vercel React Best Practices

Apply 62 React and Next.js performance optimization rules from Vercel Engineering

vercel-labsGitHub vercel-labsOfficialSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

225.0 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/rendering-script-defer-async.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown69 linesFree

rules/rendering-script-defer-async.md

1---
2title: Use defer or async on Script Tags
3impact: HIGH
4impactDescription: eliminates render-blocking
5tags: rendering, script, defer, async, performance
6---
7 
8## Use defer or async on Script Tags
9 
10**Impact: HIGH (eliminates render-blocking)**
11 
12Script tags without `defer` or `async` block HTML parsing while the script downloads and executes. This delays First Contentful Paint and Time to Interactive.
13 
14- **`defer`**: Downloads in parallel, executes after HTML parsing completes, maintains execution order
15- **`async`**: Downloads in parallel, executes immediately when ready, no guaranteed order
16 
17Use `defer` for scripts that depend on DOM or other scripts. Use `async` for independent scripts like analytics.
18 
19**Incorrect (blocks rendering):**
20 
21```tsx
22export default function Document() {
23  return (
24    <html>
25      <head>
26        <script src="https://example.com/analytics.js" />
27        <script src="/scripts/utils.js" />
28      </head>
29      <body>{/* content */}</body>
30    </html>
31  )
32}
33```
34 
35**Correct (non-blocking):**
36 
37```tsx
38export default function Document() {
39  return (
40    <html>
41      <head>
42        {/* Independent script - use async */}
43        <script src="https://example.com/analytics.js" async />
44        {/* DOM-dependent script - use defer */}
45        <script src="/scripts/utils.js" defer />
46      </head>
47      <body>{/* content */}</body>
48    </html>
49  )
50}
51```
52 
53**Note:** In Next.js, prefer the `next/script` component with `strategy` prop instead of raw script tags:
54 
55```tsx
56import Script from 'next/script'
57 
58export default function Page() {
59  return (
60    <>
61      <Script src="https://example.com/analytics.js" strategy="afterInteractive" />
62      <Script src="/scripts/utils.js" strategy="beforeInteractive" />
63    </>
64  )
65}
66```
67 
68Reference: [MDN - Script element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
69

Preparing the source view

Vercel React Best Practices

rules/rendering-script-defer-async.md