Critical CSS inline einbinden: Wie es funktioniert und warum es den LCP verbessert

Deine Website hat wahrscheinlich eine CSS-Datei die Hunderte oder Tausende Zeilen enthält. Stile für den Footer, für Modale, für Widgets auf anderen Seiten. Aber bevor der Browser auch nur einen Pixel rendert, muss er diese gesamte CSS-Datei herunterladen und parsen. Critical CSS löst dieses Problem elegant.

Was ist Critical CSS?

Critical CSS (auch "Above the Fold CSS" genannt) ist nur das CSS, das für das initiale Rendern des sichtbaren Bereichs (Above the Fold) wirklich notwendig ist. Alles andere, Stile für den Footer, für ausgeblendete Elemente, für Hover-Effekte, wird nachgeladen nachdem die Seite bereits sichtbar ist.

Statt die große CSS-Datei zu blockieren rendert der Browser sofort mit dem Critical CSS und lädt den Rest asynchron nach. Das Resultat: Der LCP sinkt, weil das Render Blocking entfällt.

Wie wird Critical CSS eingebunden?

Das Critical CSS wird direkt im HTML-Head inline eingebettet, in einem style-Tag:

<style>
/* Nur die CSS-Regeln für den sichtbaren Bereich */
body { font-family: sans-serif; margin: 0; }
header { background: #1a0050; color: white; }
h1 { font-size: 2rem; }
.hero { width: 100%; aspect-ratio: 16/9; }
</style>

<!-- Das vollständige CSS wird asynchron geladen -->
<link rel="preload" href="/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/style.css"></noscript>

Das preload-Muster mit onload stellt sicher, dass das vollständige CSS nachgeladen wird ohne den initialen Render zu blockieren.

Critical CSS extrahieren: Die wichtigsten Tools

Critical CSS manuell zu schreiben ist unpraktisch. Tools automatisieren die Extraktion:

• Critical (Node.js): Das bekannteste CLI-Tool. Öffnet deine Seite im Headless-Browser, extrahiert automatisch das CSS für den sichtbaren Bereich bei konfigurierbarer Viewport-Größe. Ideal für Entwickler die einen Build-Prozess haben.
• Penthouse: Ähnlich wie Critical, etwas mehr Konfigurationsmöglichkeiten. Ebenfalls für den Build-Prozess geeignet.
• Sievert.css: Online-Tool, du gibst eine URL ein und bekommst das Critical CSS zurück. Kein Setup, ideal zum Testen.

Critical CSS bei WordPress: Plugin-Optionen

Für WordPress gibt es fertige Lösungen die das ohne Build-Prozess erledigen:

• WP Rocket: Enthält eine "Remove Unused CSS" und "Optimize CSS Delivery" Funktion. WP Rocket generiert Critical CSS automatisch für jede Seitenart. Premium-Plugin ab 59 Dollar pro Jahr. Mehr im WordPress Cache Plugin Vergleich.
• Perfmatters: Leichtgewichtiges Plugin mit "Delay JavaScript" und CSS-Optimierungen, kombinierbar mit manuell eingebettetem Critical CSS.
• NitroPack: All-in-one Performance-Plugin das Critical CSS automatisch generiert und inline einbettet.

Wichtig: Nicht alle Plugin-Lösungen liefern perfekte Ergebnisse. Prüfe nach der Aktivierung visuell alle wichtigen Seiten auf FOUC (Flash of Unstyled Content), also kurzes Aufblitzen unstyled Inhalte.

Für welche Seiten lohnt sich Critical CSS?

Critical CSS lohnt sich besonders für:

• Die Startseite, da sie in der Regel die meisten Besucher erhält
• Landing Pages und wichtige Conversion-Seiten
• Blog-Artikel, deren LCP ein großes Header-Bild ist
• Seiten die in der Search Console einen schlechten LCP-Wert zeigen

Für einen Online-Shop wäre die Produktkategorie-Seite und die Produktdetailseite weitere Prioritäten. Kombiniert mit den anderen LCP-Maßnahmen aus unserem Artikel LCP unter 2,5 Sekunden bringen ist Critical CSS oft der letzte Baustein für ein "gut" in der Search Console.

rocks.optimize implementiert Critical CSS im Rahmen der Website-Geschwindigkeit Optimierung automatisch für alle wichtigen Seiten deiner Website.