Home → Fix guides → <=2 blocking stylesheets in <head>

tech

How to fix: <=2 blocking stylesheets in <head>

Why this matters

Each blocking stylesheet in <head> delays the browser's first paint — the page stays blank until CSS is parsed. Inlining critical above-fold CSS and deferring the rest with `media="print" onload` or `rel="preload"` removes that block.

Background

Each blocking stylesheet in <head> delays first paint — the page stays blank until CSS parses. Inlining critical CSS + deferring the rest removes that block.

References

web.dev · Defer non-critical CSS

How to fix

Code snippet for each stack we cover. Pick the one matching your server / framework.

nginx 
No server config — template change.
apache 
Same.
cloudflare 
Auto Minify + Polish features. Worker can inline critical CSS.
wordpress 
Use 'WP Rocket' or 'Autoptimize' — both auto-inline critical CSS + defer the rest.
flask 
Inline above-fold CSS in <head>. Defer remaining CSS with: `<link rel="preload" href="..." as="style" onload="this.onload=null;this.rel='stylesheet'">`.
express 
Same.
rails 
Same — Sprockets can manage CSS bundles, Hotwire CSS strategy splits critical vs deferred.

Verify it's working

View source <head>. <=2 `<link rel="stylesheet">` tags. Remainder use `media="print" onload=...` or `rel="preload"` pattern.

Want to know if your site has this issue?

Run a free 53-check audit — security, GDPR, NIS2, and technical SEO.

Audit my site →