Critical CSS bezeichnet den Teil der CSS-Datei, der für das sichtbare Layout des oberen Seitenbereichs („Above the Fold“) benötigt wird. Ziel ist es, diesen Code beim Laden einer Seite priorisiert auszuliefern, um den sichtbaren Bereich so schnell wie möglich darzustellen.
Warum ist das wichtig?
Beim Seitenaufbau blockieren CSS-Dateien oft das Rendering des Inhalts. Wenn alle Styles erst geladen werden müssen, bevor etwas angezeigt wird, steigt die Ladezeit – besonders auf mobilen Geräten. Durch das Auslagern des wichtigsten CSS („Critical CSS“) in den HTML-Header kann der Browser den sichtbaren Bereich sofort rendern, während der restliche Code nachgeladen wird.
Vorteile von Critical CSS
Schnellere Wahrnehmung der Ladezeit (First Paint / LCP verbessert sich)
Bessere Nutzererfahrung, weil Inhalte sofort sichtbar sind
Positive Wirkung auf SEO, da Google schnelle, nutzerfreundliche Seiten bevorzugt
Umsetzung in der Praxis
Analyse: Identifizieren, welche Styles für den sichtbaren Bereich notwendig sind.
Extraktion: Nur diese Regeln in eine separate „Critical CSS“-Datei auslagern oder direkt in den Head inline einfügen.
Lazy Load des restlichen CSS mit
media="print"oderrel="preload".Tools wie Critical by Addy Osmani oder PurgeCSS können automatisiert helfen.
Fazit
Critical CSS ist ein zentraler Hebel, um wahrgenommene Ladezeiten zu verkürzen. Es verbessert die Core Web Vitals und sorgt dafür, dass Nutzer schneller Inhalte sehen – ganz ohne Kompromisse im Design.