What “Blocking” vs “Non-Blocking” Means
Purpose
This page explains what “blocking” and “non-blocking” mean during page load.
Blocking resources
A blocking resource is one that prevents the browser from making progress on an important step.
Common examples:
- CSS that blocks rendering until styles are available
- JavaScript that blocks HTML parsing when executed during parsing
Authoritative references:
- Render-blocking CSS (web.dev): https://web.dev/articles/critical-rendering-path/render-blocking-css
- Eliminate render-blocking resources (Chrome for Developers): https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources
Non-blocking resources
A non-blocking resource is loaded or executed in a way that allows the browser to keep progressing toward a usable page state.
Examples include:
- scripts loaded asynchronously when they are not required for initial rendering
- work scheduled after initial content is visible
Why this matters
Blocking behavior can delay:
- first render
- the appearance of meaningful content
- user interactions
This connects directly to user-centric performance metrics.
- Core Web Vitals overview (web.dev): https://web.dev/vitals/
How Speed Layer uses this concept
Speed Layer aims to reduce early blocking by:
- prioritizing the resources needed for initial usability
- delaying scripts that are not required for early interaction
Related pages:
- What “Loading Order” Means for Your Website
- Why Some Scripts Are Delayed on Purpose