Was bedeutet Critical CSS und wie wird es implementiert?

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.