Render-blocking resources

What blocks rendering

The browser pauses page rendering for synchronous <script> tags and external CSS in <head>. Each blocking resource adds at least one round-trip before paint.

Fixes that work today

  • Add defer to non-critical scripts so they run after HTML parse.
  • Use async for analytics-style fire-and-forget.
  • Inline critical CSS (~14KB) and lazy-load the rest with media="print" onload.
  • Preload only resources used in the first paint: <link rel="preload" as="font">.

Common mistake

Preloading everything is the same as preloading nothing — the browser has no priority signal.