←  Alle Begriffe
C
Performance

Critical CSS

Critical CSS umfasst die Styles, die für den zuerst sichtbaren Seitenbereich nötig sind und möglichst früh geladen werden.

Critical CSS umfasst die Styles, die für den zuerst sichtbaren Seitenbereich nötig sind und möglichst früh geladen werden. Für eine aussagekräftige Bewertung sollten reale Nutzerdaten, reproduzierbare Labortests und ein festes Performance Budget zusammen betrachtet werden. Eng verbunden ist der Begriff mit CSS und Largest Contentful Paint.

Weiterlesen

CSS

Largest Contentful Paint

Website Performance

FAQ

Critical CSS

Welche Risiken hat Critical CSS?
Falsch bestimmte Styles führen zu Flackern oder Layoutverschiebungen, wenn nachgeladenes CSS das Aussehen ändert. Zudem wächst das HTML, und Inline-Styles werden nicht separat gecacht. Bei Designänderungen muss der Extraktionsprozess mitlaufen, sonst veralten die Regeln. Eine Messung von CLS sollte auf die Einführung folgen.
Wann lohnt sich Critical CSS?
Es lohnt sich, wenn ein großes Stylesheet den ersten Render blockiert und Messungen zeigen, dass LCP darunter leidet. Bei kleinem, gut gecachtem CSS bringt es wenig und erhöht die Komplexität. Vor der Umsetzung sollte geprüft werden, ob weniger ungenutztes CSS das Problem bereits löst.
Wie wird Critical CSS erstellt?
Meist automatisiert: Ein Build-Schritt ermittelt die Styles für den sofort sichtbaren Bereich je Seitentyp und fügt sie inline in das HTML ein. Das übrige CSS lädt danach asynchron. Handpflege ist bei häufigen Änderungen fehleranfällig. Die Ausgabe sollte auf mehreren Viewport-Größen geprüft werden, damit kein Layoutsprung entsteht.