Render-blocking resources
CSS and JavaScript files that delay page rendering until they're downloaded.
What is Render-blocking resources?
Render-blocking resources are files (typically CSS and JavaScript) that prevent the browser from rendering any content until they're fully downloaded, parsed, and executed. This delays First Contentful Paint and perceived load time.
Browsers must process CSS before rendering to avoid a flash of unstyled content. JavaScript can also block rendering if placed in the head without async/defer attributes.
Why Render-blocking resources matters
Render-blocking resources directly delay when users see content. Reducing render-blocking improves LCP and perceived performance. Users staring at a blank screen assume slowness even if the site is fast overall.
How to implement
Inline critical CSS for above-the-fold content
Defer non-critical CSS loading
Use async or defer for JavaScript
Remove unused CSS and JS
Split code into smaller chunks
Preload critical resources
Code example
<!-- Critical CSS inline -->
<style>
/* Above-fold styles */
.header { ... }
.hero { ... }
</style>
<!-- Non-critical CSS loaded async -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- JavaScript with defer -->
<script defer src="app.js"></script>Common mistakes to avoid
- Loading all CSS in head without critical inline
- Not using async/defer on scripts
- Loading unused CSS frameworks
- JavaScript files blocking before content
Examples
Inline: Critical CSS in style tag
Defer: link rel='preload' with onload
Async: script async src='...'
Frequently asked questions
No, only inline critical above-the-fold CSS (usually 10-15KB). Full CSS should be loaded async. Too much inline CSS makes HTML larger and uncacheable.
Async scripts run as soon as downloaded (order not guaranteed). Defer scripts run after HTML parsing in order. Use defer for scripts that depend on DOM or each other.