# Critical CSS

Kategorie: [Performance & Core Web Vitals](https://seo-geo-glossary.com/de/glossar/kategorie/performance-core-web-vitals/) › [Optimierung](https://seo-geo-glossary.com/de/glossar/kategorie/performance-core-web-vitals/optimierung/)

**Critical CSS** bezeichnet die CSS-Regeln, die für den sofort sichtbaren Bereich einer Seite (Above the Fold) nötig sind. Sie werden direkt im `<head>` des HTML-Dokuments eingebettet, damit der Browser nicht erst ein externes Stylesheet laden muss.

## Wie funktioniert Critical CSS?

Stylesheets blockieren das Rendern. Der Browser zeigt erst etwas an, wenn sie geladen und verarbeitet sind. Critical CSS verkürzt diese Wartezeit, weil die benötigten Regeln bereits im Dokument stehen. Die übrigen Regeln werden asynchron nachgeladen. web.dev empfiehlt, den Teil für den sichtbaren Bereich unter etwa 14 KB (komprimiert) zu halten, damit er in die erste Datenübertragung passt.

Zum Ermitteln der kritischen Regeln gibt es Werkzeuge wie Critical und Penthouse. Alternativ zeigt das Coverage-Tool in den Chrome DevTools, welche Regeln auf einer Seite genutzt werden.

## Beispiel

```html
<head>
  <style>
    /* Regeln für Header und Hero */
    .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>
```

Dieses Muster stammt aus der web.dev-Dokumentation. Die `<noscript>`-Zeile dient als Fallback ohne JavaScript.

## Grenzen

web.dev bezeichnet die Technik als fortgeschritten und weist darauf hin, dass sie bei falscher Umsetzung zu Fehlern führen kann. Die meisten Websites erreichen ihre Ziele auch ohne sie. Bei mehreren Seitentypen muss das kritische CSS für jede Vorlage gepflegt werden.

## Verwandte Begriffe

- [Blockierte Ressourcen (CSS/JS)](https://seo-geo-glossary.com/de/glossar/blockierte-ressourcen/index.md)
- [Render-blocking Ressourcen](https://seo-geo-glossary.com/de/glossar/render-blocking-ressourcen/index.md)
- [First Contentful Paint (FCP)](https://seo-geo-glossary.com/de/glossar/first-contentful-paint/index.md)
- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/de/glossar/largest-contentful-paint/index.md)
- [Preload / Preconnect / Prefetch](https://seo-geo-glossary.com/de/glossar/preload-preconnect-prefetch/index.md)

## Quellen

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

---

Stand: 7. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/critical-css/