How to Fix Render-Blocking Resources
What Are Render-Blocking Resources?
Render-blocking resources are CSS and JavaScript files that prevent the browser from displaying your page until they're fully downloaded and processed. They're one of the biggest causes of slow page loads.
Identify Render-Blocking Resources
Run your URL through [SEO Snapshot](/) — we list all render-blocking scripts and stylesheets with their URLs.
Fix Render-Blocking JavaScript
Option 1: Add defer attribute
<script src="script.js" defer></script>
Scripts with `defer` download in parallel and execute after HTML parsing.
Option 2: Add async attribute
<script src="analytics.js" async></script>
Use `async` for scripts that don't depend on other scripts (analytics, ads).
Option 3: Move to bottom of body
<body>
<!-- Page content -->
<script src="script.js"></script>
</body>
Fix Render-Blocking CSS
Inline critical CSS
Extract the CSS needed for above-the-fold content and inline it:
<style>/* Critical CSS here */</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">
Use media queries
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
Impact
Fixing render-blocking resources typically improves:
- **LCP** by 0.5-2 seconds
- **FCP** by 0.3-1 second
- **Google PageSpeed score** by 10-30 points
Check your site's SEO score for free
Analyze your site