Hier erfahren Sie, wie Sie die Renderingzeiten mit einem wichtigen CSS-Verfahren verbessern können.
Der Browser muss CSS-Dateien herunterladen und parsen, bevor er die Seite anzeigen kann. Dadurch wird CSS zu einer Ressource, die das Rendering blockiert. Wenn CSS-Dateien groß oder die Netzwerkbedingungen schlecht sind, können Anfragen für CSS-Dateien die Renderingzeit einer Webseite erheblich verlängern.
Wenn die extrahierten Stile inline im <head> des HTML-Dokuments eingefügt werden, ist keine zusätzliche Anfrage zum Abrufen dieser Stile erforderlich. Der Rest des CSS-Codes kann asynchron geladen werden.
Eine Verbesserung der Renderingzeiten kann insbesondere unter schlechten Netzwerkbedingungen einen großen Unterschied bei der wahrgenommenen Leistung ausmachen. In Mobilfunknetzen ist eine hohe Latenz unabhängig von der Bandbreite ein Problem.
Wenn First Contentful Paint (FCP) schlecht ist und in den Lighthouse-Prüfungen die Option „Ressourcen, die das Rendering blockieren“ angezeigt wird, sollten Sie wichtiges CSS testen.
Um die Anzahl der Roundtrips zum ersten Rendering zu minimieren, sollten die Inhalte „above the fold“ (ohne Scrollen sichtbar) unter 14 KB (komprimiert) bleiben.
Die Leistungssteigerung, die Sie mit diesem Verfahren erzielen können, hängt vom Typ Ihrer Website ab. Generell gilt: Je mehr CSS eine Website hat, desto größer ist die mögliche Auswirkung von Inline-CSS.
Übersicht über die Tools
Es gibt eine Reihe nützlicher Tools, mit denen sich das für eine Seite entscheidende CSS automatisch ermitteln lässt. Das ist eine gute Nachricht, denn es ist mühsam, dies manuell zu erledigen. Es muss eine Analyse des gesamten DOMs durchgeführt werden, um die Stile zu ermitteln, die auf die einzelnen Elemente im Darstellungsbereich angewendet werden.
Kritisch
Kritisch extrahiert, reduziert und inline „above the fold“-CSS und ist als npm-Modul verfügbar. Es kann direkt mit Gulp oder Grunt als plugin verwendet werden. Außerdem gibt es ein Webpack-Plug-in.
Es ist ein einfaches Tool, bei dem der Prozess viel zu denken ist. Sie müssen nicht einmal die Stylesheets angeben, Critical erkennt sie automatisch. Außerdem unterstützt sie das Extrahieren von wichtigem CSS-Code für mehrere Bildschirmauflösungen.
criticalCSS
CriticalCSS ist ein weiteres npm-Modul, mit dem „above the fold“-CSS extrahiert wird. Er ist auch als Befehlszeile verfügbar.
Es gibt keine Optionen zum Einfügen und Reduzieren wichtiger CSS-Elemente. Sie können damit aber Regeln erzwingen, die eigentlich nicht zu kritischen CSS gehören. Außerdem haben Sie so eine bessere Kontrolle über das Einschließen von @font-face-Deklarationen.
Penthouse
Penthouse ist eine gute Wahl, wenn Ihre Website oder App viele Stile oder Stile aufweist, die dynamisch in das DOM eingefügt werden, was häufig in Angular-Apps der Fall ist. Es nutzt im Hintergrund Puppeteer und verfügt sogar über eine online gehostete Version.
Penthouse erkennt Stylesheets nicht automatisch. Sie müssen die HTML- und CSS-Dateien angeben, für die der wichtige CSS-Code generiert werden soll. Der Vorteil ist, dass sich damit viele Jobs gleichzeitig gut ausführen lassen.