Render-blocking resources are CSS or JavaScript files the browser must download, parse, and execute before it can paint any content to the screen. While those files are being processed, the visitor sees a blank page — directly inflating First Contentful Paint (FCP) and LCP times.
Below you'll learn how to identify render-blocking resources and three concrete techniques to eliminate or reduce them.
What Makes a Resource Render-Blocking?
The browser builds the DOM (from HTML) and the CSSOM (from CSS) before it can render anything. Any resource that interrupts that process is render-blocking:
- CSS in the
<head>: by default, every stylesheet blocks rendering. The browser can't build the render tree without knowing the final style of every element. - JavaScript without
deferorasync: a plain<script>tag stops HTML parsing, downloads the file, and executes it before continuing. - Web fonts with
font-display: block: text stays invisible until the font arrives — though this is usually treated separately from classical render-blocking.
How to Detect Render-Blocking Resources
With Google Lighthouse / PageSpeed Insights
Open PageSpeed Insights, paste your URL, and look for the "Eliminate render-blocking resources" opportunity. Lighthouse lists every blocking file alongside the estimated time savings from removing it. It's the fastest starting point.
With Chrome DevTools
Open DevTools → Performance tab → record a page load. In the Network section of the timeline, files shown in red or orange before the first paint are your candidates. The Coverage tab shows what percentage of each CSS or JS file goes unused on initial load.
Techniques to Eliminate or Reduce Blocking
1. Add defer or async to scripts
defer downloads the script in parallel and executes it after the HTML has been fully parsed. async downloads in parallel and executes as soon as the file arrives, without waiting for the HTML.
| Attribute | Download | Execution | Order guaranteed |
|---|---|---|---|
| none | Blocks parsing | Immediate | Yes |
defer |
Parallel | After DOMContentLoaded | Yes |
async |
Parallel | As soon as it arrives | No |
For most third-party scripts (analytics, chat widgets, maps), defer is the right choice. Use async only for scripts with no order dependencies.
2. Inline critical CSS and load the rest asynchronously
Critical CSS is the subset of rules needed to render the above-the-fold content. If you inline it in the <head>, the browser can paint without downloading an external file.
The remaining CSS loads non-blocking with this pattern:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>Tools like Critical (Node) or the WP Rocket WordPress plugin extract critical CSS automatically. The specialists at elenlace.com implement this technique as part of their performance audits for PHP and WordPress sites.
3. Move scripts to the bottom of <body>
If you can't add defer — for example, legacy scripts that must run in a specific order — move them just before the closing </body> tag. The HTML will be fully parsed before those scripts download and execute.
Verification After Fixing
Once you've applied the changes, re-run Lighthouse. The "Eliminate render-blocking resources" opportunity should disappear or show negligible remaining savings. Also confirm:
- FCP dropped by at least 20%.
- No site functionality broke (forms, sliders, navigation menus).
- Web fonts use
font-display: swapto prevent invisible text.
Find more optimization guides in our web performance resource hub.
Key Takeaways
- Render-blocking resources — CSS and JS without the right attributes — are one of the most common causes of slow FCP and LCP.
- PageSpeed Insights lists blocking files and the potential time savings; use it as your starting point.
- Add
deferto most third-party scripts; useasynconly for order-independent scripts. - Extract above-the-fold CSS and inline it; load the rest asynchronously.
- As a last resort, move scripts to the bottom of
<body>. - Always verify after changes: measure FCP/LCP and test all site features.
Need help removing render-blocking resources from your site? The team at elenlace.com audits your performance and applies the fixes professionally.
FAQ
What is the difference between defer and async?
Both download the script in parallel without blocking HTML parsing. The difference is in execution: defer waits until the entire HTML is parsed and respects script order; async executes each script as soon as it arrives, with no guaranteed order.
Does all CSS block rendering?
By default, yes — any <link rel="stylesheet"> in the <head> blocks rendering. The solution is to extract critical CSS and embed it inline, then load non-critical CSS asynchronously using rel="preload".
Do render-blocking resources affect SEO?
Yes. Google measures Core Web Vitals — especially LCP and FCP — as ranking signals. Render-blocking resources directly delay both metrics. Eliminating them improves measured performance and, with it, organic rankings.
What if moving a script breaks my site?
That means the script has an order dependency (for example, it depends on jQuery loading first). In that case, use defer on all dependent scripts instead of moving them — defer preserves execution order without blocking rendering.
Compare providers
Other providers and guides worth comparing:
