PageSpeed Matters
    PageSpeed Matters
    Interactivity & Rendering · Glossary

    Critical CSS · Definition & Explanation 2026

    Critical CSS (also called above-the-fold CSS) is the minimum subset of styles needed to render the initial viewport content. By inlining it directly in a `<style>` tag in the `<head>`, the browser can render visible content without waiting for external stylesheets to download.

    This technique can improve FCP by 500ms–2 seconds by eliminating CSS as a render-blocking resource. The remaining non-critical CSS loads asynchronously in the background, ready for when the user scrolls or interacts.

    Tools like Critical (Node.js), Critters (Vite/Webpack plugin), and PurgeCSS automate the extraction and inlining process, making this optimization practical for production workflows.

    Updated 2026-02-28
    M
    By Matt Suffoletto

    TL;DR — Quick Summary

    Critical CSS is the minimal styles for above-the-fold content. Inline it in <head> to eliminate render-blocking CSS, improving FCP by 500ms–2s. Automate with Critters or Critical.

    What is Critical CSS?

    Critical CSS is the minimum CSS subset required to render the initial viewport. The process:

    1. 1Extract — Identify CSS rules that apply to elements visible in the initial viewport (above the fold).
    2. 2Inline — Place extracted CSS in a `<style>` tag in `<head>`.
    3. 3Defer the rest — Load remaining CSS asynchronously: `<link rel='stylesheet' href='full.css' media='print' onload="this.media='all'">`.

    This eliminates CSS as a render-blocking resource. The browser renders content using inlined styles immediately, then applies full styles when they load.

    Keep inlined CSS under 14KB (compressed) to fit within the first TCP congestion window for optimal FCP.

    History & Evolution

    • •2014 — Critical CSS concept popularized by Filament Group and Addy Osmani.
    • •2015 — Tools emerge: penthouse, critical, criticalCSS.
    • •2019 — Critters (Google) automates critical CSS in Webpack/Vite builds.
    • •2025–2026 — Critical CSS remains a best practice. CSS Layers and Scope features reduce the total CSS needed per page.

    How Critical CSS is Measured

    Lighthouse 'Eliminate render-blocking resources' audit flags render-blocking CSS. Chrome DevTools Coverage tab shows what percentage of CSS is actually used on the current page.

    Key rule: Field data (CrUX) determines Google rankings. Lab data (Lighthouse, WebPageTest) is for debugging and iteration.

    Common Causes of Poor Critical CSS Scores

    Critical CSS issues stem from not implementing the technique:

    1. 1Full CSS loaded in <head> — The entire stylesheet blocks rendering.
    2. 2Multiple CSS files — Each adds a blocking download.
    3. 3CSS from third-party CDNs — Extra DNS + connection overhead.
    4. 4CSS @import — Creates sequential download chains.
    5. 5Framework CSS bloat — Bootstrap/Tailwind shipping unused rules.

    Frequently Asked Questions

    For step-by-step optimization, platform-specific fixes, code examples, and case studies, read our full guide:

    The Ultimate Guide to Core Web Vitals: How to Pass All Metrics & Boost Rankings in 2026

    Struggling with Critical CSS?

    Request a free speed audit and we'll identify exactly what's holding your scores back.