WSS
Studio StandardsRecommended

Critical CSS Inlining

Automating the extraction and inlining of above-the-fold CSS.

What is it?

The process of extracting the exact CSS rules required to style the elements visible in the user’s initial viewport (above-the-fold) and injecting them directly into a <style> block in the HTML <head>. The remainder of the CSS is loaded asynchronously.

Why does it matter?

External stylesheets (<link rel="stylesheet">) are render-blocking. The browser will stare at a blank white screen until the entire CSS file is downloaded and parsed. By inlining the critical CSS, the browser can paint the hero section of your website in the very first network round-trip (~14kb of data), resulting in a massive improvement to First Contentful Paint (FCP).

How to implement it

1. Build-Time Extraction

Do not do this manually. Rely on your framework or a build tool (like Critters or PurgeCSS) to parse your HTML and extract the critical styles during the build process.

<head>
  <!-- 1. Inline the critical styles for instant paint -->
  <style>
    body { font-family: sans-serif; margin: 0; }
    .hero { background: black; color: white; height: 100vh; }
  </style>
  
  <!-- 2. Load the rest of the styles asynchronously -->
  <link rel="preload" href="/styles/full.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/styles/full.css"></noscript>
</head>

Verification

  • Run Lighthouse. If “Eliminate render-blocking resources” flags your main CSS file, critical inlining is not working correctly.