Speed High impact Hard 1–3 h

Reducing blocking CSS

Large CSS in the head delays rendering.

What it is

CSS is blocking by default: the browser renders nothing until it has downloaded and processed the styles. Large or numerous CSS files thus delay the first paint of the page.

Why it matters

Loading one large CSS file for the entire site delays even a simple page. Optimization directly improves LCP and perceived speed.

How to do it

1Extract "critical CSS" for the visible part and inline it into <head>.
2Load the rest of the CSS asynchronously (the media="print" trick or rel="preload" + onload).
3Remove unused styles (PurgeCSS / the Coverage tool in devtools).
4Split CSS by page/component instead of one monolith.

Asynchronous loading of non-critical CSS

Correct

<link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>

Conclusion

Critical CSS inline + the rest asynchronously is the most effective pattern against blocking CSS. It's a more demanding change, but on slow sites it brings a significant speed-up of the first render. Modern build tools and frameworks make it easier.