Critical CSS
Abkürzungen / Synonyme: Kritisches CSS
Kurzdefinition
Der minimale Satz an CSS-Regeln, der benötigt wird, um den direkt sichtbaren Bereich einer Webseite (Above the Fold) sofort zu rendern.
Ausführliche Erklärung
Critical CSS umfasst genau die Stilregeln, die zum Darstellen des sofort sichtbaren Bereichs (Above the Fold) nötig sind. Dieses CSS wird inline in den HTML-Kopf eingebettet, damit der Browser die Seite ohne zusätzliche Anfrage sofort rendern kann; das restliche CSS lädt asynchron nach. Das verbessert vor allem den LCP und beseitigt render-blockierendes CSS – ein zentraler Hebel für schnelles erstes Rendern.
Beispiel
Die wenigen KB CSS für Header und Hero-Bereich werden inline ausgeliefert, während das große Stylesheet erst danach asynchron nachgeladen wird.
Im ausführlichen Fachartikel erklären wir Critical CSS mit Architektur, Praxisbeispielen und Best Practices im Detail: