Render-blocking Resources
Render-blocking resources delay first paint (FCP/LCP). Common culprits are synchronous CSS/JS and heavy third-party scripts.
Definition
Render-blocking resources prevent the browser from rendering content quickly, typically due to unoptimized CSS and synchronous JavaScript. They delay FCP/LCP and can worsen Core Web Vitals.
Why it matters
- Directly delays FCP and LCP — users see white screen longer
- Adds main-thread pressure, indirectly hurting INP
- One of the most common Lighthouse performance warnings
- Each blocking resource adds to first-paint wait time
- Third-party scripts (ads, analytics) are often the biggest culprits
- CSS must fully load before browser starts rendering
- Fixing render-blocking resources has high ROI for optimization
How to implement
- Defer non-critical JS: use defer, async, or dynamic import()
- Split CSS: inline critical CSS + defer loading other styles
- Reduce third-party scripts or load them with async/defer
- Place <script> before </body> instead of in <head>
- Use <link rel="preload"> to preload critical resources
- Avoid CSS @import (causes cascading blocking)
- Monitor: use Lighthouse's 'Eliminate render-blocking resources' audit
Examples
html
<!-- Render-blocking (avoid) -->
<script src="/app.js"></script>
<!-- defer: executes after DOM parsing, maintains order -->
<script src="/app.js" defer></script>
<!-- async: executes when downloaded, no order guarantee -->
<script src="/analytics.js" async></script>
<!-- Dynamic loading: completely non-blocking -->
<script>
const script = document.createElement('script');
script.src = '/chat-widget.js';
document.body.appendChild(script);
</script>html
<!-- Critical CSS inlined -->
<style>
/* Above-the-fold essential styles */
.hero { ... }
</style>
<!-- Non-critical CSS deferred -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>FAQ
Common questions about this term.