Render blocking resources
Slap yourself if
You think render-blocking is about file size or believe async/defer magically removes all blocking.
Why this exists
Because teams keep optimizing bundles while the browser is stalled waiting for dependencies it refuses to guess around.
Mental model
Render-blocking is not a property of a file — it is a property of a dependency relationship the browser cannot violate without risking incorrect pixels.
- The browser discovers a resource that affects layout or script execution order.
- Rendering is paused until that dependency is resolved.
- The pause is conservative and correctness-driven, not performance-driven.
- Only after dependencies are satisfied can render tree construction continue.
- Shipping global CSS that blocks first paint unnecessarily.
- Late discovery of critical stylesheets.
- Assuming preload removes blocking without correct usage.
- Treating JavaScript as the primary blocker while CSS dominates.
Render-blocking resources are dependencies the browser must resolve before it can safely render, typically CSS and synchronous scripts that affect layout or execution order.
- Defines blocking in terms of download size.
- Says 'just use async'.
- Ignores CSSOM entirely.
- Confuses blocking parsing with blocking rendering.
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.