Render-Blocking Resources
Also known as: Render-blocking CSS and JavaScript
Render-blocking resources are scripts and stylesheets that the browser must download and process before it can display the page. They delay first paint and hurt loading performance.
Key Takeaways
- Render-blocking resources are scripts and stylesheets the browser must load and process before it can paint the page.
- They are a common cause of slow first paint and a slow Largest Contentful Paint, especially on mobile.
- Deferring or async-loading JavaScript lets the browser paint without waiting for non-critical scripts.
- Inlining critical CSS and loading the rest asynchronously removes stylesheets from the blocking path.
- Large bundles placed in the document head with no deferral are the typical offenders.
How It Works
Browsers build a page by parsing HTML, then applying CSS and running JavaScript. By default, a stylesheet or synchronous script in the document head stops that process: the browser will not paint until it has downloaded and processed the file. These are render-blocking resources, and each one adds delay before anything appears on screen.
The fix is to shrink the blocking path. Critical CSS can be inlined so the page can paint immediately, while the rest loads asynchronously. JavaScript can be marked defer or async so it runs after the initial paint instead of holding it up. This directly improves Largest Contentful Paint and the wider Core Web Vitals scores.
Render-blocking is separate from server delay measured by Time to First Byte, though the two stack. It also pairs with Lazy Loading, which defers off-screen assets so the browser spends its early budget only on what the user needs to see first.
Why It Matters
They are one of the most common causes of a slow Largest Contentful Paint. Deferring, async-loading, or inlining critical resources lets the page paint sooner, improving both experience and Core Web Vitals.
Example
A SaaS site loads three large CSS files and a heavy analytics script in the head. The browser downloads all of them before showing a single pixel, so the page looks blank for over a second on mobile. After inlining the critical styles and adding defer to the scripts, the page paints almost immediately while the rest loads quietly in the background.
Common Mistake
Loading large CSS and JavaScript bundles in the document head with no deferral. Every render-blocking file adds to the delay before users see anything, especially on mobile connections.
Frequently Asked Questions
What counts as a render-blocking resource?
Typically synchronous JavaScript and external stylesheets in the document head. The browser must download and process them before painting, so they delay the first visible content and hurt loading metrics.
How do I eliminate render-blocking resources?
Inline critical CSS and load the rest asynchronously, add defer or async to non-critical scripts, remove unused code, and move scripts out of the head when they are not needed for the initial paint.
Does defer or async fix render blocking?
Both keep JavaScript from blocking the initial render. Async downloads and runs the script as soon as it is ready, while defer waits until HTML parsing finishes. Defer is usually safer for scripts that depend on the page.