Was bedeutet Critical CSS und wie wird es implementiert?
Kurz und einfach erklärt
Es geht um die Regeln für das Aussehen des oberen Teils einer Seite. Das ist der Teil, den man sofort sieht.
Sonst lädt der Browser erst alle Regeln für das Aussehen. Erst dann zeigt er etwas an. Das bremst.
Wir legen die wichtigen Regeln direkt in die Seite. Der Rest lädt danach. So erscheint der sichtbare Teil schneller.
Mehr dazu steht auf unserer Seite zur Frontend-Optimierung.
Critical CSS ist der minimale Satz an CSS-Regeln, der nötig ist, um den sofort sichtbaren Bereich einer Seite (Above the Fold) korrekt darzustellen. Normalerweise muss der Browser zuerst die komplette externe CSS-Datei laden und verarbeiten, bevor er überhaupt etwas zeichnen darf, das blockiert das Rendern. Wird das kritische CSS stattdessen direkt inline ins HTML eingebettet, kann der Browser den sichtbaren Bereich sofort darstellen.
Das restliche, nicht sofort benötigte CSS wird asynchron nachgeladen. Umgesetzt wird das über eine automatisierte Extraktion: Spezialisierte Werkzeuge analysieren, welche Regeln der sichtbare Bereich für verschiedene Bildschirmgrößen tatsächlich braucht. Das Ergebnis ist ein deutlich schnellerer First Contentful Paint und meist auch ein besserer LCP. Diese Technik ist Teil unserer Frontend-Optimierung und besonders bei umfangreichen CSS-Frameworks lohnend.
Verwandte Fragen
- Was ist der Unterschied zwischen Browser-Cache und Server-Cache?
- Was ist Brotli-Komprimierung und warum ist sie besser als Gzip?
- Wie funktioniert ein Reverse Proxy wie Varnish?
- Wie gehe ich mit Third-Party-Scripts um, die die Performance bremsen?
- Wie stelle ich sicher, dass die Performance nach der Optimierung stabil bleibt?