Skip to main content
SlapMyWeb
Slap a site
Fix Guide

How to Fix Render-Blocking CSS

Stop stylesheets delaying first paint by inlining what is critical and deferring the rest.

Medium High Impact 1-2 hours

Render-blocking CSS is a stylesheet the browser must download and parse before it can paint anything, so every millisecond it takes is added to first paint. The fix is to inline the styles needed for above-the-fold content and load the rest without blocking, using a media trick or a preload with onload.

Why It Matters

The browser will not paint until it has the CSS, because painting first would mean repainting unstyled content. A single stylesheet on a slow connection can hold a blank screen for seconds.

How to Fix

1

Identify what is actually needed first

Determine the rules used by content in the initial viewport. Chrome's Coverage panel shows how much of each stylesheet is used on load — usually a small fraction.
2

Inline the critical rules

Put those rules in a style block in the head. Keep it small: this is paid on every page load and cannot be cached separately.
3

Load the rest without blocking

Load the full stylesheet with media="print" and switch it to all on load, or use rel="preload" with an onload handler. Include a noscript fallback.
4

Check for a flash of unstyled content

If unstyled content appears briefly, the critical set is missing something. Add it rather than reverting to blocking.

Code Fix

html
Before (broken)
<link rel="stylesheet" href="/styles.css">
After (fixed)
<style>/* critical above-the-fold rules */</style>
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>

Platform-Specific Instructions

WordPress

Most caching plugins can generate critical CSS and defer the rest. Verify the result on a real page rather than trusting the setting.

Next.js

Next inlines critical CSS for its own styles automatically; the usual offender is a third-party stylesheet added by hand in the document head.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit
Free foreverNo signupResults in 30s