Was bedeutet Critical CSS und wie wird es implementiert?

Critical CSS bezeichnet den minimalen CSS-Code, der benötigt wird, um den sichtbaren Bereich einer Seite (Above the Fold) beim ersten Laden korrekt darzustellen. Dieser CSS-Code wird inline im HTML-Dokument eingebettet, sodass der Browser die Seite sofort rendern kann, ohne auf externe CSS-Dateien warten zu müssen. Das restliche CSS wird asynchron nachgeladen. Die Implementierung erfolgt durch automatisierte Extraktion des kritischen CSS mit spezialisierten Tools, die den sichtbaren Bereich für verschiedene Bildschirmgrößen analysieren. Das Ergebnis ist ein deutlich schnellerer First Contentful Paint.