defer or async every script

async for independent code, defer when it needs the DOM or order.

MDN Web Docsdeveloper.mozilla.org
Reference: MDN - Script element
<script> · deferOpen on MDN ↗

From vercel-react-best-practices, rule rendering-script-defer-async.

Where the parser stops

Press Replay, then drag a download time.

<script src>Bad
<script src async>Independent only
<script src defer>Good
<head>
  <script src="https://example.com/analytics.js" async></script>
  <script src="/scripts/utils.js" defer></script>
</head>

async has no order

utils.js calls analytics.track(). Reload a few times.

Both asyncBad
No loads yet
Both deferGood
No loads yet
<script src="/analytics.js" defer></script>
<script src="/utils.js" defer></script>
<script src="https://example.com/beacon.js" async></script>

next/script: pick when it runs

Switch strategy and watch FCP, hydration and analytics.

Plain tag in layoutBad
afterInteractiveGood

Why it matters, pros and cons

Why it matters

A plain script stops the parser. defer and async download while it parses.

Pros

  • First paint stops waiting on scripts.
  • defer keeps document order after parsing.
  • One attribute, no build step.

Cons

  • async never guarantees order between scripts.
  • A heavy deferred bundle still delays interactivity.
  • beforeInteractive holds hydration; keep it for consent.