Performance-Boost mit “Critical CSS”: So fühlt sich Ihre Seite sofort schneller an

Kennen Sie das? Sie rufen eine Seite auf und müssen erst zusehen, wie eine weiße Seite ohne jegliches Styling kurz aufblitzt, bevor das CSS geladen ist (Flash of Unstyled Content). “Critical CSS” ist eine fortschrittliche Technik, um genau das zu verhindern und die gefühlte Ladezeit drastisch zu verbessern.

Die Idee ist, nur das absolut notwendigste CSS, das zum Rendern des sichtbaren Bereichs (“above the fold”) benötigt wird, direkt in den Ihrer HTML-Datei einzufügen. Der Rest des CSS wird verzögert (asynchron) geladen. Der Besucher sieht also sofort eine gestylte Seite.

Der Prozess in 3 Schritten:

1. Identifizieren des Critical CSS: Manuell ist dies sehr mühsam. Es gibt Online-Tools und Build-Prozesse, die eine URL analysieren und das kritische CSS für Sie extrahieren.
2. Einbetten des Critical CSS: Das extrahierte CSS wird in einen

Manuelle Kopieranleitung gibt es hier