# Critical CSS

Category: [Performance & Core Web Vitals](https://seo-geo-glossary.com/en/glossary/category/performance-core-web-vitals/) › [Optimization](https://seo-geo-glossary.com/en/glossary/category/performance-core-web-vitals/optimization/)

**Critical CSS** is the CSS needed to render the content that is visible without scrolling (above the fold). It is inlined in the `<head>` of the HTML document so the browser does not have to wait for an external stylesheet before showing anything.

## How does critical CSS work?
CSS files block rendering: the browser waits until they are downloaded and parsed. With critical CSS, the essential rules arrive together with the HTML, and the rest of the stylesheet loads asynchronously. web.dev recommends keeping the inlined part for above-the-fold content under 14 KB compressed, which relates to the amount of data that fits into the first round trip of a connection.

Tools such as Critical and Penthouse can extract the rules automatically. The Coverage tab in Chrome DevTools shows which rules a page actually uses.

## Example
```html
<head>
  <style>
    .header { background: #fff; }
    .hero h1 { font-size: 2rem; }
  </style>
  <link rel="preload" href="styles.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
```
This pattern comes from web.dev. The `<noscript>` line covers visitors without JavaScript.

## When is it worth it?
web.dev calls this an advanced technique that can cause bugs if implemented incorrectly, and says most sites reach their performance goals without it. Inlined CSS cannot be cached separately, and each page template needs its own critical rules. It is worth considering when Lighthouse reports render-blocking resources and First Contentful Paint is poor.

## Related terms

- [Blocked resources](https://seo-geo-glossary.com/en/glossary/blocked-resources/index.md)
- [Render-blocking resources](https://seo-geo-glossary.com/en/glossary/render-blocking-resources/index.md)
- [First Contentful Paint (FCP)](https://seo-geo-glossary.com/en/glossary/first-contentful-paint/index.md)
- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/en/glossary/largest-contentful-paint/index.md)
- [Preload / preconnect](https://seo-geo-glossary.com/en/glossary/preload-preconnect/index.md)

## Sources

- [Extract critical CSS – web.dev (last updated 2019-05-29)](https://web.dev/articles/extract-critical-css)
- [Defer non-critical CSS – web.dev (last updated 2019-02-17)](https://web.dev/articles/defer-non-critical-css)

---

Last updated: October 7, 2026
URL: https://seo-geo-glossary.com/en/glossary/critical-css/