Limited render-blocking resources in head

Synchronous scripts in <head> block the HTML parser — the browser stops building the DOM and waits for each script to download, parse, and execute before continuing. On slow connections, 8+ blocking scripts can add multiple seconds to Time to First Paint. ISO 25010 performance-efficiency identifies render-blocking as a direct impairment to perceived responsiveness. The fix is attribute-level: adding defer or async costs nothing and eliminates the blocking behavior. Scripts that lack these attributes are typically there by accident — legacy integrations, copy-pasted snippets, or tools that don't set them by default.

Add defer to external scripts in <head> that are not critical to initial render. Use async for independent scripts like analytics that do not depend on other scripts:

<!-- Blocks rendering (bad) -->
<script src="/js/app.js"></script>

<!-- Deferred — runs after parsing, preserves order (good) -->
<script src="/js/app.js" defer></script>

<!-- Async — runs when ready, no order guarantee (good for analytics) -->
<script src="https://analytics.example.com/a.js" async></script>

type="module" scripts are deferred by default. For Next.js, the <Script> component's strategy prop controls loading: use strategy="lazyOnload" or strategy="afterInteractive" for non-critical scripts. Move scripts to just before </body> as a fallback if attribute changes are not feasible.