Critical CSS

Critical CSS is the small portion of a stylesheet that styles above-the-fold content. It is placed inline in a <style> tag in the head, and the full stylesheet loads afterward without blocking rendering.

Why it matters

External stylesheets block rendering, so the browser shows nothing until they download. Inlining the essential rules removes that wait and improves first paint and largest contentful paint, especially on slow connections. The cost is duplicated bytes in every HTML response and extra build complexity. Measure the effect on largest contentful paint, since the benefit depends on how large your full stylesheet is.

Example

<head>
  <style>header{background:#112;color:#fff}.hero{min-height:60vh}</style>
  <link rel="preload" href="/site.css" as="style" onload="this.rel='stylesheet'">
</head>

The header and hero are styled instantly; the rest of the styles arrive afterward.

Common mistakes

• Inlining too much, which bloats HTML and cancels the gain.
• Letting the inline copy drift out of date with the main stylesheet.
• Producing it by hand instead of using a tool to extract it per template.

Related

• Minification
• Lazy Loading
• Bundler
• CSS Selector
• Tool: Website speed test

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.