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. Bei Webseiten, die unnötig große Stylesheets enthalten, dauert das Rendern länger.

In diesem Leitfaden erfahren Sie, wie Sie nicht kritisches CSS verschieben, um den kritischen Rendering-Pfad und First Contentful Paint (FCP) zu optimieren.

Beispiel: Suboptimales Laden von CSS

Das folgende Beispiel enthält ein Akkordeon mit drei verborgenen Textabschnitten, von denen jeder mit einer anderen Klasse gestaltet ist:

Auf dieser Seite wird eine CSS-Datei mit acht Klassen angefordert. Allerdings sind nicht alle zum Rendern des „sichtbaren“ Inhalts erforderlich.

Das Ziel dieses Leitfadens ist es, diese Seite so zu optimieren, dass nur die kritischen Stile synchron und der Rest (einschließlich der Absatzstile) ohne Blockierung geladen werden.

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 „1s“ und die Empfehlung Ressourcen entfernen, die das Rendering blockieren und auf die Datei style.css verweisen:

Im Lighthouse-Bericht wird vorgeschlagen, das Stylesheet zu vereinfachen, damit deine Seite schneller geladen wird.

Hinweis: Diese Demowebsite verwendet ein sehr kleines Stylesheet. In Produktionsszenarien sind viel größere CSS-Dateien erforderlich. Erkennt Lighthouse mindestens 2.048 Byte an CSS-Regeln, die beim Rendern von „Above the fold“-Inhalten nicht verwendet wurden, wird auch der Vorschlag Nicht verwendete CSS entfernen angezeigt.

So stellen Sie fest, wie dieses CSS das Rendering blockiert:

1. Öffnen Sie die Seite in Chrome.
2. Drücke 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 Steuerfeld „Leistung“ auf Aktualisieren.

Im resultierenden Trace sehen Sie, dass die FCP-Markierung sofort nach dem Laden des CSS-Codes platziert wird:

Auf der nicht optimierten Demoseite kann FCP erst ausgeführt werden, wenn das CSS-Ladevorgang abgeschlossen ist.

Das bedeutet, dass der Browser warten muss, bis der gesamte CSS-Code geladen und verarbeitet wurde, bevor er ein Pixel auf dem Bildschirm malt.

Optimieren

Um diese Seite zu optimieren, müssen Sie wissen, welche Kurse als kritisch sind. Verwenden Sie dazu das Abdeckungstool:

1. Öffnen Sie in den Entwicklertools das Befehlstaste-Menü. Drücken Sie dazu Control+Shift+P oder Command+Shift+P (Mac).
2. Geben Sie „Abdeckung“ ein und wählen Sie Abdeckung anzeigen aus.
3. Klicken Sie auf Aktualisieren, um die Seite neu zu laden und mit der Erfassung der Abdeckung zu beginnen.

Im Bericht zur Abdeckung sehen Sie, wie viel von Ihrem CSS-Code beim ersten Seitenaufbau tatsächlich verwendet wurde.

Doppelklicken Sie auf den Bericht, um die Details aufzurufen:

• Grün markierte Klassen sind kritisch. Der Browser benötigt sie, um die sichtbaren Inhalte wie Titel, Untertitel und Akkordeon-Schaltflächen zu rendern.
• Rot markierte Klassen sind nicht kritisch und betreffen nur Inhalte, die nicht sofort sichtbar sind, z. B. ausgeblendete Absätze.

Optimieren Sie Ihr CSS mit diesen Informationen, damit der Browser wichtige Stile sofort nach dem Laden der Seite verarbeiten und nicht kritische CSS für später aufschieben kann:

1. Extrahieren Sie die im Abdeckungsbericht als grün markierten Klassendefinitionen und fügen Sie diese Klassen in einen <style>-Block im Header der Seite 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 übrigen Klassen asynchron, indem Sie das folgende Muster anwenden:

   <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 für das Laden von CSS. So funktionierts:

• link rel="preload" as="style" fordert das Stylesheet asynchron an. Weitere Informationen zu preload finden Sie im Leitfaden zum Vorabladen wichtiger Assets.
• Mit dem Attribut onload in der Datei link kann der Browser den CSS-Code verarbeiten, wenn das Stylesheet geladen ist.
• Wenn der onload-Handler nach seiner Verwendung mit Nullen versehen wird, kann bei einigen Browsern verhindert werden, dass der Handler beim Ändern des rel-Attributs noch einmal aufgerufen wird.
• Der Verweis auf das Stylesheet im noscript-Element bietet ein Fallback für Browser, die kein JavaScript ausführen.

Hinweis:

In einem realen Produktionsszenario empfehlen wir die Verwendung von CSS-Funktionen zum Aufschieben von CSS wie loadCSS, mit denen dieses Verhalten gekapselt werden kann und browserübergreifend funktioniert. Außerdem empfehlen wir, eine Content Security Policy zu unterstützen, die Inline-onload-JavaScript nicht zulässt.

Du kannst den CSS-Link auch unten auf der Seite platzieren, damit Inhalte vor dem Rendern gerendert werden, ohne auf das Stylesheet in Firefox und Chrome warten zu müssen. Der Browser priorisiert jedoch das Stylesheet in diesem Fall, sodass kritische Inhalte weiterhin in allen Browsern blockiert werden können.

Die Ergebnisseite sieht genauso aus wie die vorherige Version, auch wenn die meisten Stile asynchron geladen werden. So sehen die Inline-Styles und die asynchrone Anfrage an die CSS-Datei in der HTML-Datei aus:

Überwachen

Verwenden Sie die Entwicklertools, um ein weiteres Leistungs-Trace auf der optimierten Seite auszuführen.

Die FCP-Markierung wird angezeigt, bevor die Seite die CSS anfordert. Das bedeutet, dass der Browser mit dem Rendern der Seite nicht auf das Laden des CSS warten muss:

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 s reduziert wurde (eine Verbesserung um 20 %):

Das neue, reduzierte FCP.

Der Vorschlag Ressourcen, die das Rendering blockieren, wird nicht mehr unter Empfehlungen angezeigt, sondern im Abschnitt Bestandene Audits:

Die Seite besteht jetzt die Prüfung zu blockierenden Ressourcen.

Nächste Schritte und Referenzen

In dieser Anleitung haben Sie gelernt, wie Sie nicht kritisches CSS verschieben, indem Sie den nicht verwendeten Code auf der Seite manuell extrahieren. Bei komplexeren Produktionsumgebungen enthält der Leitfaden zum Extrahieren von kritischem CSS-Code einige der beliebtesten Tools zum Extrahieren von wichtigen CSS-Ressourcen. Außerdem enthält er ein Codelab, um zu sehen, wie sie in der Praxis funktionieren.