PageSpeed Matters
    Speed Audit
    Let's Talk
    PageSpeed Matters
    Book a Call
    Interactivity & Rendering · Glossary

    Critical CSS

    Matt SuffolettoWritten by Matt Suffoletto
    Published June 26, 2026
    Critical CSS
    Share

    TL;DR

    Critical CSS is the minimal set of style rules required to render the above-the-fold content of a page, inlined in a <style> block in the document head so the browser can paint without waiting for external stylesheets.

    What is Critical CSS?

    Critical CSS is the minimal set of style rules required to render the above-the-fold content of a page, inlined in a <style> block in the document head so the browser can paint without waiting for external stylesheets.

    Learn more in our how to improve critical CSS guide, or work with us through our done-for-you speed optimization service.

    How Critical CSS is Measured

    Lighthouse flags pages where critical CSS could improve rendering time, and tools such as Critters or PurgeCSS can extract it.

    Related Terms

    Sources