How to Fix Render Blocking CSS

Render blocking CSS is the quiet performance killer on most sites. The browser downloads your HTML quickly, then stops until every stylesheet in the head finishes loading. On a slow connection, that pause is the difference between a page that feels instant and one that feels sluggish.

The fix is not to remove your stylesheets. It is to load them in an order that lets the browser paint the visible part of the page first, then fill in the rest. Here is the five step process we use. Once your CSS is clean, move on to slow images and heavy JavaScript, or read our full guide to page loading speed for the bigger picture.

Step 1: Find the stylesheets blocking render

Open DevTools, go to the Coverage tab, and reload your page. The Coverage panel lists every CSS file along with the share of rules actually used. Most sites find that a large portion of their shipped CSS is never applied on the page they are looking at.

You can also paste your URL into our Website Optimizer. We flag every stylesheet in the head, show its size, and mark the ones heavy enough to measurably delay paint.

Write down the three numbers that matter for each file, total bytes, how many rules are actually used above the fold, and whether it loads from your own domain or a third party.

Step 2: Inline critical CSS in the head

Critical CSS is the minimum set of rules needed to render the part of the page a visitor sees before scrolling. Inlining it means placing those rules directly inside a style tag in the document head, so the browser has everything it needs without a single extra request.

The Critical package extracts this set automatically. Point it at a URL, give it a viewport size, and it outputs a tiny stylesheet with only the rules needed for the initial paint.

npx critical https://yoursite.com --width 1200 --height 900 --inline

Drop the result into your HTML template between the head tags. Keep the inline block small, a few kilobytes at most. Anything beyond that loses the benefit because the HTML itself gets heavy.

Step 3: Defer the rest of your CSS

Once the critical styles are inline, the full stylesheet no longer needs to block render. The trick is to load it asynchronously while still making sure it applies before the user notices any unstyled flash.

The most reliable pattern uses a print media attribute that swaps to all after load:

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

The browser happily downloads print stylesheets without blocking render, then the onload handler flips the media attribute so the styles apply. The noscript fallback keeps the page usable without JavaScript.

Step 4: Remove unused CSS

Most bundles carry rules for components that no longer exist, utility classes that are never used, and framework defaults that never appear in a template. PurgeCSS scans your HTML, templates, and JavaScript, then strips every selector it does not find a reference to.

For Tailwind sites, the content array in tailwind.config.js drives the same purge behavior. Make sure every template path is listed there. For classic CSS frameworks like Bootstrap, run PurgeCSS as a post build step.

npx purgecss --css dist/main.css --content "src/**/*.html" "src/**/*.js" --output dist/

Expect a meaningful drop in file size. On most marketing sites we audit, the purged output is a small fraction of the original.

Step 5: Minify and combine what remains

Minification strips whitespace, comments, and verbose syntax. It is the easiest win in the whole pipeline, but sites still ship unminified CSS more often than you would think.

If you use a bundler, turn on the production minifier. For static sites, pipe your output through csso or cssnano as a final build step. Combine small partials into a single file so the browser makes one request instead of a handful.

With these five steps in place, your page should paint well before the main stylesheet finishes loading, and the stylesheet itself should be a fraction of what it was. Re-run the analyzer to confirm no stylesheets are still flagged as blocking.