Critical CSS ist eine der wirkungsvollsten Techniken zur Verbesserung von Largest Contentful Paint (LCP) und First Contentful Paint (FCP) – zwei Google-Ranking-Faktoren. Die Idee: Statt das vollständige Stylesheet zu laden bevor die Seite gerendert wird, werden nur die Styles für den sofort sichtbaren Bereich direkt in den HTML-Code eingebettet. Das senkt die Render-Zeit messbar.
Was ist Critical CSS?
Beim normalen Laden einer Website passiert folgendes: Der Browser lädt HTML, trifft auf einen <link rel="stylesheet">, stoppt das Rendering und wartet bis das gesamte CSS geladen ist. Erst dann rendert er die Seite.
Critical CSS unterbricht diesen Prozess:
- Styles für den Above-the-Fold-Bereich (was der Nutzer ohne Scrollen sieht) werden direkt als
<style>in den<head>eingebettet - Das vollständige CSS wird nicht-blockierend geladen
- Browser kann sofort rendern – ohne auf externe Stylesheets zu warten
Das Ergebnis: Die Seite wird sichtbar bevor das vollständige CSS geladen ist.
Websites die Critical CSS korrekt implementieren, verbessern ihren LCP-Wert im Schnitt um 0,5–1,5 Sekunden – was den Unterschied zwischen „Gut” und „Verbesserungsbedarf” in Core Web Vitals ausmachen kann.
Wie viel CSS ist „Critical”?
Critical CSS umfasst alle Styles die für den initialen Viewport nötig sind:
- Layout (Grundstruktur: Header, Hero, erste Inhaltsbox)
- Typografie (Schriftarten, Größen, Zeilenabstände)
- Farben und Hintergründe des sichtbaren Bereichs
- Bilder und deren Dimensionierung im Viewport
Alles darunter (Footers, Accordeons, Sliders, Modals) ist non-critical und lässt sich verzögert nachladen, um die initiale Render-Zeit zu senken.
Critical CSS extrahieren
Automatisch mit Tools
Critical (npm-Package):
npm install -g critical
critical index.html --inline --base ./ > index-critical.htmlDas Tool rendert die Seite, identifiziert alle verwendeten CSS-Regeln für den initialen Viewport und extrahiert sie.
Chrome DevTools Coverage Tab:
- DevTools öffnen (F12)
- Coverage-Tab (Shift+Esc → Coverage)
- Seite laden
- Rote Bereiche = unused CSS, grüne = used CSS
So können Sie manuell identifizieren welche CSS-Regeln für den ersten Paint genutzt werden.
In WordPress automatisieren
WP Rocket (Premium): Critical CSS-Generierung ist eingebaut. WP Rocket berechnet das Critical CSS für jede Seite automatisch.
NitroPack (SaaS): Cloud-basiert, generiert Critical CSS automatisch ohne Server-Konfiguration.
Wenn Sie Critical CSS manuell implementieren: Beginnen Sie mit der Startseite und Ihren wichtigsten Landing Pages. Diese Seiten haben den höchsten Traffic und profitieren am meisten von der Optimierung. Unterseiten können iterativ folgen.
Critical CSS einbinden
Das Grundprinzip in HTML:
<head>
<!-- Critical CSS inline -->
<style>
/* Nur die Styles für den Above-the-fold-Bereich */
body { font-family: 'Helvetica', sans-serif; margin: 0; }
header { background: #fff; padding: 20px; }
.hero { background: #003366; color: #fff; padding: 60px 20px; }
h1 { font-size: 2.5rem; margin: 0 0 1rem; }
/* ... */
</style>
<!-- Rest des CSS nicht-blockierend laden -->
<link rel="stylesheet" href="styles.css" media="print"
onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="styles.css">
</noscript>
</head>Der Trick mit media="print": Das CSS wird geladen aber nicht für den Bildschirm angewendet (kein Render-Blocking). Das onload-Event setzt media='all' sobald das CSS geladen ist.
LCP-spezifische Optimierungen
Neben Critical CSS gibt es weitere LCP-Treiber:
Hero-Bild preloaden:
<link rel="preload" href="/images/hero.webp" as="image"
fetchpriority="high">Das Hero-Bild ist oft das LCP-Element. Preloading startet den Download sofort – bevor der Browser es im CSS oder HTML findet.
Schriften preloaden:
<link rel="preload" href="/fonts/heading.woff2" as="font"
crossorigin type="font/woff2">Wenn die Hauptüberschrift in einer externen Font-Datei liegt, ist Preloading wichtig für LCP.
In einer Analyse von 500 WordPress-Websites verbesserte die Kombination aus Critical CSS + Hero-Bild Preloading den LCP-Wert in 78 % der Fälle von „Verbesserungsbedarf” auf „Gut”.
Häufige Fehler
Critical CSS zu groß: Wenn Critical CSS mehr als 14 KB unkomprimiert enthält, entstehen eigene Rendering-Kosten. Ziel: unter 10 KB.
Falsche Viewports: Critical CSS muss für den Desktop-Viewport und mobilen Viewport korrekt sein – ein Tool sollte beide Varianten generieren.
Nicht auf Aktualisierungen reagieren: Wenn das Theme oder Design geändert wird, muss Critical CSS neu generiert werden.
Mehr zur Performance-Optimierung finden Sie in unserem Artikel über Render-Blocking Ressourcen.