CSS-Dateien sind Ressourcen, die das Rendering blockieren: Sie müssen geladen und verarbeitet werden, bevor der Browser die Seite rendert. Das Rendern von Webseiten mit unnötig großen Stylesheets dauert länger.
In diesem Leitfaden erfahren Sie, wie Sie nicht kritisches CSS verzögern, um den kritischen Rendering-Pfad zu optimieren und die First Contentful Paint (FCP) zu verbessern.
Beispiel: suboptimales CSS-Laden
Das folgende Beispiel enthält ein Akkordeon mit drei ausgeblendeten Textabsätzen, die jeweils mit einer anderen Klasse formatiert sind:
Für diese Seite wird eine CSS-Datei mit acht Klassen angefordert, aber nicht alle sind zum Rendern der „sichtbaren“ Inhalte erforderlich.
Ziel dieses Leitfadens ist es, diese Seite so zu optimieren, dass nur die kritischen Stile synchron geladen werden, während der Rest (einschließlich der Absatzstile) nicht blockierend geladen wird.
Messen
Führen Sie Lighthouse auf der Seite aus und rufen Sie den Bereich Leistung auf.
Der Bericht enthält den Messwert First Contentful Paint mit dem Wert „1 Sekunde“ und die Optimierungsmöglichkeit Renderblockierende Ressourcen beseitigen, die auf die Datei style.css verweist:
So können Sie sich vorstellen, wie dieses CSS das Rendering blockiert:
- Öffnen Sie die Seite in Chrome.
- Drücken Sie
Control+Shift+J
(oderCommand+Option+J
auf einem Mac), um die Entwicklertools zu öffnen. - Klicken Sie auf den Tab Leistung.
- Klicken Sie im Bereich „Leistung“ auf Aktualisieren.
Im resultierenden Trace sehen Sie, dass die Markierung FCP unmittelbar nach dem Laden des CSS platziert wird:
Das bedeutet, dass der Browser warten muss, bis das gesamte CSS geladen und verarbeitet wurde, bevor ein einzelnes Pixel auf dem Bildschirm dargestellt wird.
Optimieren
Um diese Seite zu optimieren, müssen Sie wissen, welche Klassen als kritisch eingestuft werden. Verwenden Sie dazu das Abdeckungstool:
- Öffnen Sie in den Entwicklertools das Befehlsmenü, indem Sie
Control+Shift+P
oderCommand+Shift+P
(Mac) drücken. - Geben Sie „Abdeckung“ ein und wählen Sie Abdeckung der Sendung aus.
- Klicken Sie auf Aktualisieren, um die Seite neu zu laden und die Abdeckung zu erfassen.
Doppelklicken Sie auf den Bericht, um Details zu sehen:
- Grün markierte Klassen sind kritisch. Der Browser benötigt sie, um die sichtbaren Inhalte zu rendern, einschließlich Titel, Untertitel und Akkordeonschaltflächen.
- Rot markierte Klassen sind nicht kritisch und wirken sich nur auf Inhalte aus, die nicht sofort sichtbar sind, z. B. auf ausgeblendete Absätze.
Optimieren Sie Ihr CSS anhand dieser Informationen, damit der Browser sofort nach dem Laden der Seite mit der Verarbeitung wichtiger Stile beginnen und nicht kritisches CSS auf später verschieben kann:
Extrahieren Sie die im Abdeckungsbericht grün markierten Klassendefinitionen und fügen Sie diese Klassen oben auf der Seite in einen
<style>
-Block ein:<style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>Laden Sie die restlichen Klassen asynchron mit dem folgenden Muster:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
Das ist nicht die Standardmethode zum Laden von CSS. So funktionierts:
link rel="preload" as="style"
ruft das Stylesheet asynchron ab. Weitere Informationen zupreload
finden Sie im Leitfaden zum Vorabladen wichtiger Assets.- Mit dem Attribut
onload
imlink
kann der Browser das CSS verarbeiten, sobald das Stylesheet geladen wurde. - Wenn Sie den
onload
-Handler nach der Verwendung auf „null“ setzen, wird er in einigen Browsern nicht noch einmal aufgerufen, wenn dasrel
-Attribut geändert wird. - Der Verweis auf das Stylesheet innerhalb des
noscript
-Elements dient als Fallback für Browser, die JavaScript nicht ausführen.
Die resultierende Seite sieht genau wie die vorherige Version aus, auch wenn die meisten Stile asynchron geladen werden. So sehen die Inline-Stile und die asynchrone Anfrage an die CSS-Datei in der HTML-Datei aus:
Überwachen
Führen Sie mit den Entwicklertools einen weiteren Leistungs-Trace auf der optimierten Seite aus.
Die Markierung FCP wird angezeigt, bevor die Seite das CSS anfordert. Das bedeutet, dass der Browser nicht warten muss, bis das CSS geladen wurde, bevor die Seite gerendert wird:
Führen Sie als letzten Schritt Lighthouse auf der optimierten Seite aus.
Im Bericht sehen Sie, dass die FCP-Seite um 0,2 Sekunden verkürzt wurde (eine Verbesserung um 20 %).
Der Vorschlag Ressourcen entfernen, die das Rendering blockieren wird nicht mehr unter Empfehlungen angezeigt, sondern im Abschnitt Überprüfte Seiten:
Nächste Schritte und Referenzen
In diesem Leitfaden haben Sie gelernt, wie Sie nicht kritisches CSS verzögern, indem Sie den nicht verwendeten Code auf der Seite manuell extrahieren. Für komplexere Produktionsumgebungen werden im Leitfaden zum Extrahieren von kritischem CSS einige der beliebtesten Tools zum Extrahieren von kritischem CSS behandelt. Außerdem enthält er ein Codelab, in dem gezeigt wird, wie sie in der Praxis funktionieren.