Nicht kritisches CSS verschieben

Demián Renzulli

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:

1. Öffnen Sie die Seite in Chrome.
2. Drücken Sie Control+Shift+J (oder Command+Option+J auf einem Mac), um die Entwicklertools zu öffnen.
3. Klicken Sie auf den Tab Leistung.
4. 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:

1. Öffnen Sie in den Entwicklertools das Befehlsmenü, indem Sie Control+Shift+P oder Command+Shift+P (Mac) drücken.
2. Geben Sie „Abdeckung“ ein und wählen Sie Abdeckung der Sendung aus.
3. 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:

1. 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>
   

2. 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 zu preload finden Sie im Leitfaden zum Vorabladen wichtiger Assets.
• Mit dem Attribut onload im link 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 das rel-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.