What are render-blocking resources?

Render-blocking resources are CSS and JavaScript files that prevent the browser from displaying page content until they finish downloading and processing.

How do I fix render-blocking CSS?

Inline critical CSS needed for above-the-fold content, and load the rest asynchronously with media=print and an onload handler to switch to media=all.

Should I defer all JavaScript?

Add the defer attribute to script tags that don't need to run immediately. This lets the browser parse HTML while downloading scripts in parallel.

← Blog

How to Fix Render-Blocking CSS and JavaScript

speed Feb 6, 2026 3 min read

What these checks test

SiteCurl counts the number of render-blocking CSS files and JavaScript files loaded in the <head> of your page. It flags pages with more than 3 blocking stylesheets or more than 5 blocking scripts.

A “render-blocking” resource is any file the browser must download and process before it can show the page. Until every blocking file finishes loading, the visitor sees a blank screen.

Why it matters

Each blocking resource adds latency. If you have 6 CSS files and 8 JavaScript files in the <head>, the browser has to download all 14 before painting anything. On a fast connection this might add a second. On a mobile connection, it can add 3-5 seconds of blank screen.

This directly impacts Core Web Vitals, specifically First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Google uses these metrics in its ranking algorithm.

How to fix render-blocking CSS

Inline critical CSS

Extract the CSS needed for above-the-fold content and place it directly in a <style> tag in the <head>. Load the full stylesheet asynchronously:

<style>/* Critical CSS for header, hero, layout */</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">

Combine CSS files

If you are loading 5 separate stylesheets, combine them into 1-2 files using your build tool. Fewer files means fewer blocking requests.

Remove unused CSS

Tools like PurgeCSS or your framework’s tree-shaking can strip unused rules. A smaller CSS file downloads faster.

How to fix render-blocking JavaScript

Add defer or async

Most scripts do not need to block rendering. Add defer to scripts that depend on DOM order:

<script src="app.js" defer></script>

Use async for independent scripts like analytics:

<script src="analytics.js" async></script>

Move scripts to the bottom

If you cannot add defer/async, move <script> tags to just before </body>. This lets the browser render the page first.

Bundle scripts

Combine multiple small scripts into fewer files. Each HTTP request adds overhead; fewer files means faster loading.

How to verify the fix

Open Chrome DevTools, go to the Network tab, and reload the page. Filter by CSS and JS. Check that non-critical resources have defer, async, or load after the page renders. A SiteCurl scan counts blocking resources automatically.

Render-blocking issues often appear alongside compression problems and image optimization issues. All three affect page load speed.

Start a free trial to find render-blocking resources across your site.