Critical CSS inlinedWhat it checks and how to fix it

What it checks

Looks at how the page delivers its CSS: inline styles in the head (good up to about 14 KB, better when they style above-the-fold elements such as body, header, nav or h1), stylesheets preloaded or loaded asynchronously, and how many stylesheets block rendering (more than 2 is an issue). Passes when at least one of those optimizations is in place and warns when none is.

Why it matters

The browser paints nothing until it has downloaded and parsed every render-blocking stylesheet, so a page with several large stylesheets shows a blank screen for the whole time they take to arrive. Inlining the few rules needed for the first screen and loading the rest without blocking lets content appear on the first round trip, which improves First Contentful Paint and LCP.

How to fix it

Inline the CSS needed for the first screen (keep it under about 14 KB) and load the full stylesheet without blocking rendering.

<head>
  <style>
    /* critical rules: layout, header, hero, typography above the fold */
  </style>
  <link rel="preload" href="/assets/app.css" as="style">
  <link rel="stylesheet" href="/assets/app.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="/assets/app.css"></noscript>
</head>

Tools such as critical or critters can extract the critical rules at build time. If your CSS is small, simply merging it into one or two stylesheets already removes most of the blocking requests.