Skip to main content
SlapMyWeb
Slap a site

Performance fix

How to Fix Render-Blocking CSS

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

Difficulty
Medium
Impact
High
Time
1-2 hours

Before

<link rel="stylesheet" href="/styles.css">

After

<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>
Before and after code for: How to Fix Render-Blocking CSS

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 it

  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.

The code

Beforehtml
<link rel="stylesheet" href="/styles.css">
Afterhtml
<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>

On your platform

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.

Sources

More fixes

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

Performance

How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

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 signupLive scan progress