What are render-blocking resources?

Render-blocking resources are CSS stylesheets and JavaScript files in the of your page that prevent the browser from displaying any content until they are fully downloaded and processed.

How much can fixing render-blocking resources improve performance?

Eliminating render-blocking resources can reduce First Contentful Paint by 1–3 seconds depending on how many resources are blocking and how large they are.

Does async and defer work for CSS?

No. The async and defer attributes only work on script tags. For CSS, you need to use media queries, preload with onload swap, or inline critical CSS.

Fix Render-Blocking Resources: A Complete Guide

Lighthouse flags "Eliminate render-blocking resources" when CSS or JavaScript in your <head> delays the browser from rendering any visible content. This is one of the highest-impact optimizations you can make.

Why It Matters

Every render-blocking resource adds network latency before your users see anything. On a 3G connection, a single 50KB CSS file can add 800ms–1.2s to your First Contentful Paint.

If you're running paid ads, that delay directly costs you money. A 1-second delay in page load reduces conversions by approximately 7%.

How to Identify Render-Blocking Resources

Run a Lighthouse audit (or use BadPageSpeed's dashboard)
Look for the "Eliminate render-blocking resources" opportunity
It lists every CSS and JS file blocking the initial render

How to Fix It

Step 1: Inline Critical CSS

Extract the CSS needed for above-the-fold content and inline it directly in the HTML:

<head>
  <style>
    /* Only the CSS needed for the initial viewport */
    body { margin: 0; font-family: system-ui; }
    .hero { padding: 2rem; background: #1a1a2e; }
    .hero h1 { color: white; font-size: 2.5rem; }
  </style>
</head>

Tools like Critical can automate this extraction.

Step 2: Defer Non-Critical CSS

Load the full stylesheet asynchronously using the media trick:

<link rel="stylesheet"
      href="/styles.css"
      media="print"
      onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="/styles.css">
</noscript>

Step 3: Async/Defer JavaScript

Add async or defer to script tags that aren't needed for the initial render:

<!-- Defer: executes after HTML parsing, in order -->
<script src="/analytics.js" defer></script>

<!-- Async: executes as soon as downloaded, out of order -->
<script src="/widget.js" async></script>

Use defer for scripts that depend on DOM or each other. Use async for independent scripts like analytics.

Step 4: Remove Unused Code

If a CSS or JS file isn't needed on a particular page, don't load it there. Use route-based code splitting in frameworks like Next.js or dynamic imports:

// Only load when needed
const Chart = dynamic(() => import('./Chart'), { ssr: false });

Measuring Your Fix

After implementing these changes, run another Lighthouse audit. You should see:

FCP improvement: 0.5–3s faster
LCP improvement: Often improves alongside FCP
Render-blocking audit: Should show as passed (green)

Key Takeaway

The fastest resource is one the browser doesn't have to wait for. Inline what's critical, defer what's not, and remove what's unused.

Why It Matters

Every render-blocking resource adds network latency before your users see anything. On a 3G connection, a single 50KB CSS file can add 800ms–1.2s to your First Contentful Paint.

If you're running paid ads, that delay directly costs you money. A 1-second delay in page load reduces conversions by approximately 7%.

How to Identify Render-Blocking Resources

Run a Lighthouse audit (or use BadPageSpeed's dashboard)
Look for the "Eliminate render-blocking resources" opportunity
It lists every CSS and JS file blocking the initial render

How to Fix It

Step 1: Inline Critical CSS

Extract the CSS needed for above-the-fold content and inline it directly in the HTML:

<head>
  <style>
    /* Only the CSS needed for the initial viewport */
    body { margin: 0; font-family: system-ui; }
    .hero { padding: 2rem; background: #1a1a2e; }
    .hero h1 { color: white; font-size: 2.5rem; }
  </style>
</head>

Tools like Critical can automate this extraction.

Step 2: Defer Non-Critical CSS

Load the full stylesheet asynchronously using the media trick:

<link rel="stylesheet"
      href="/styles.css"
      media="print"
      onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="/styles.css">
</noscript>

Step 3: Async/Defer JavaScript

Add async or defer to script tags that aren't needed for the initial render:

<!-- Defer: executes after HTML parsing, in order -->
<script src="/analytics.js" defer></script>

<!-- Async: executes as soon as downloaded, out of order -->
<script src="/widget.js" async></script>

Use defer for scripts that depend on DOM or each other. Use async for independent scripts like analytics.

Step 4: Remove Unused Code

If a CSS or JS file isn't needed on a particular page, don't load it there. Use route-based code splitting in frameworks like Next.js or dynamic imports:

// Only load when needed
const Chart = dynamic(() => import('./Chart'), { ssr: false });

Measuring Your Fix

After implementing these changes, run another Lighthouse audit. You should see:

FCP improvement: 0.5–3s faster
LCP improvement: Often improves alongside FCP
Render-blocking audit: Should show as passed (green)

Key Takeaway

The fastest resource is one the browser doesn't have to wait for. Inline what's critical, defer what's not, and remove what's unused.

Why It Matters

How to Identify Render-Blocking Resources

How to Fix It

Step 1: Inline Critical CSS

Step 2: Defer Non-Critical CSS

Step 3: Async/Defer JavaScript

Step 4: Remove Unused Code

Measuring Your Fix

Key Takeaway

Ready to stop wasting ad spend?

Share this article

Related Articles

Static Site Generators: 11ty vs. Hugo for Speed

React Performance: Avoiding Unnecessary Re-Renders

Tailwind CSS: Is It Actually Faster for Production?

Next.js Performance: Leveraging Image and Link Components

Share this article

Related Articles

Static Site Generators: 11ty vs. Hugo for Speed

React Performance: Avoiding Unnecessary Re-Renders

Tailwind CSS: Is It Actually Faster for Production?

Next.js Performance: Leveraging Image and Link Components

Why It Matters

How to Identify Render-Blocking Resources

How to Fix It

Step 1: Inline Critical CSS

Step 2: Defer Non-Critical CSS

Step 3: Async/Defer JavaScript

Step 4: Remove Unused Code

Measuring Your Fix

Key Takeaway

Ready to stop wasting ad spend?

Share this article

Related Articles

Static Site Generators: 11ty vs. Hugo for Speed

React Performance: Avoiding Unnecessary Re-Renders

Tailwind CSS: Is It Actually Faster for Production?

Next.js Performance: Leveraging Image and Link Components

Share this article

Related Articles

Static Site Generators: 11ty vs. Hugo for Speed

React Performance: Avoiding Unnecessary Re-Renders

Tailwind CSS: Is It Actually Faster for Production?

Next.js Performance: Leveraging Image and Link Components