Hier erfahren Sie, wie Sie die Renderingzeiten mit einer wichtigen CSS-Technik verbessern.
Der Browser muss CSS-Dateien herunterladen und parsen, bevor die Seite angezeigt werden kann. Dadurch wird CSS zu einer Ressource, die das Rendering blockiert. Bei großen CSS-Dateien oder bei schlechten Netzwerkbedingungen können Anfragen nach CSS-Dateien die Ladezeit einer Webseite erheblich verlängern.
Wenn Sie extrahierte Stile direkt in den <head> des HTML-Dokuments einfügen, ist keine zusätzliche Anfrage zum Abrufen dieser Stile erforderlich. Der Rest des CSS-Codes kann asynchron geladen werden.
<ph type="x-smartling-placeholder">Eine Verkürzung der Renderingzeiten kann insbesondere unter schlechten Netzwerkbedingungen einen großen Unterschied in der Wahrnehmung der Leistung ausmachen. In Mobilfunknetzen stellt die hohe Latenz unabhängig von der Bandbreite ein Problem dar.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Bei einem schlechten First Contentful Paint (FCP) und der Fehlermeldung „Ressource entfernen, die das Rendering blockieren“ in Lighthouse-Prüfungen besteht, sollten Sie kritische CSS-Ressourcen ausprobieren.
Um die Anzahl der Roundtrips für das erste Rendering zu minimieren, sollten Inhalte „above the fold“ (ohne Scrollen sichtbar) unter 14 KB (komprimiert) gehalten werden.
Die Leistung, die Sie mit dieser Technik erzielen können, hängt vom Typ Ihrer Website ab. Generell gilt: Je mehr CSS-Code eine Website hat, desto größer ist die mögliche Wirkung von Inline-CSS.
Übersicht über die Tools
Es gibt eine Reihe nützlicher Tools, mit denen automatisch der kritische CSS-Code für eine Seite ermittelt werden kann. Das ist gut, denn die manuelle Vorgehensweise wäre sehr mühsam. Dazu muss das gesamte DOM analysiert werden, um die Stile zu ermitteln, die auf die einzelnen Elemente im Darstellungsbereich angewendet werden.
Kritisch
Critical extrahiert, komprimiert und inline „above the fold“-CSS und ist als npm-Modul verfügbar. Es kann mit Gulp (direkt) oder mit Grunt (als Plug-in) verwendet werden und es gibt auch ein Webpack-Plug-in.
Es handelt sich dabei um ein einfaches Tool, bei dem eine Menge Umdenken erforderlich ist. Sie müssen die Stylesheets nicht einmal angeben, denn Critical erkennt sie automatisch. Außerdem können Sie wichtige CSS für mehrere Bildschirmauflösungen extrahieren.
criticalCSS
CriticalCSS ist ein weiteres npm-Modul, das CSS-Code „above the fold“ extrahiert. Es ist auch als Befehlszeile verfügbar.
Sie bietet keine Optionen zum Inline- und Reduzieren wichtiger CSS-Elemente, aber Sie können Einschlussregeln erzwingen, die nicht zu kritischen CSS gehören, und Sie haben mehr Kontrolle über das Einbeziehen von @font-face-Deklarationen.
Penthouse
Penthouse ist eine gute Wahl, wenn Ihre Website oder App eine große Anzahl von Stilen oder Stilen hat, die dynamisch in das DOM eingeschleust werden (üblich in Angular-Apps). Es nutzt im Hintergrund Puppeteer und bietet sogar eine online gehostete Version.
Penthouse erkennt Stylesheets nicht automatisch. Sie müssen die HTML- und CSS-Dateien angeben, für die wichtige CSS generiert werden sollen. Der Vorteil ist, dass sich damit viele Jobs gut parallel ausführen lassen.