Nicht kritisches CSS verschieben

Demián Renzulli

Wichtig:In diesem Leitfaden wird eine erweiterte Leistungstechnik beschrieben, die die Leistung verbessern kann, aber bei unsachgemäßer Implementierung auch zu Fehlern führen kann. Die meisten Websites sollten alle empfohlenen Leistungsziele erreichen können, ohne diese Technik zu implementieren.

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:

Im Lighthouse-Bericht wird empfohlen, das Stylesheet zu vereinfachen, damit die Seite schneller geladen wird.

Hinweis: Auf dieser Demo-Website wird ein sehr kleines Stylesheet verwendet. In Produktionsszenarien sind häufig viel größere CSS-Dateien erforderlich. Wenn Lighthouse auf einer Seite mindestens 2.048 Byte CSS-Regeln erkennt, die beim Rendern der ohne Scrollen sichtbaren Inhalte nicht verwendet wurden, wird auch der Vorschlag Nicht verwendetes CSS entfernen angezeigt.

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:

Auf der nicht optimierten Demoseite kann der FCP erst nach dem Laden des CSS-Codes erfolgen.

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.

Im Abdeckungsbericht sehen Sie, wie viel Prozent Ihres CSS beim ersten Laden der Seite tatsächlich verwendet werden.

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.

Hinweis:

In einem echten Produktionsszenario empfehlen wir die Verwendung von CSS-Verzögerungsfunktionen wie loadCSS, die dieses Verhalten einkapseln und plattformübergreifend funktionieren und eine Content Security Policy unterstützen, die möglicherweise kein Inline-onload JavaScript zulässt.

Sie können den CSS-Link auch unten auf der Seite platzieren, damit die Inhalte in Firefox und Chrome angezeigt werden, bevor das Stylesheet geladen wird. Der Browser priorisiert in diesem Fall jedoch weiterhin das Stylesheet, sodass kritische Inhalte in allen Browsern blockiert werden können.

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:

Auf der optimierten Seite kann FCP gestartet werden, bevor das Stylesheet geladen 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 %).

Die neue, reduzierte FCP.

Der Vorschlag Ressourcen entfernen, die das Rendering blockieren wird nicht mehr unter Empfehlungen angezeigt, sondern im Abschnitt Überprüfte Seiten:

Die Seite besteht jetzt die Prüfung auf blockierende Ressourcen.

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.