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 kritischen CSS-Code zurückstellen, um den kritischen Rendering-Pfad zu optimieren und First Contentful Paint (FCP) zu verbessern.

Beispiel: suboptimales CSS-Laden

Das folgende Beispiel enthält ein Akkordeon mit drei verborgenen Textabsätzen, die jeweils mit einer anderen Klasse gestaltet 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. Die übrigen Stile (einschließlich Absatzstile) werden ohne Blockierung geladen.

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:

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 alle CSS-Elemente geladen und verarbeitet wurden, 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 das Abdeckungstool, um dies zu ermitteln:

1. Öffne in den Entwicklertools das Befehlsmenü, indem du Control+Shift+P oder Command+Shift+P (Mac) drückst.
2. Geben Sie „Abdeckung“ ein und wählen Sie Abdeckung anzeigen 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 gekennzeichnete 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 anhand dieser Informationen den CSS-Code, damit der Browser sofort nach dem Laden der Seite mit der Verarbeitung kritischer Stile beginnen und nicht kritischen CSS-Code auf später verschieben kann:

1. Extrahieren Sie die Klassendefinitionen, die im Abdeckungsbericht grün markiert sind, und fügen Sie diese Klassen in einen <style>-Block oben auf 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 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" fordert das Stylesheet asynchron an. 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 der onload-Handler nach seiner Verwendung auf „null“ gesetzt wird, müssen einige Browser den Handler nicht noch einmal aufrufen, wenn sie das rel-Attribut ändern.
• Der Verweis auf das Stylesheet im noscript-Element bietet ein Fallback für Browser, die kein JavaScript 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 FCP-Markierung wird angezeigt, bevor die Seite CSS anfordert. Das bedeutet, dass der Browser mit dem Rendern der Seite nicht auf das Laden des CSS-Codes warten muss:

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 kritische CSS-Inhalte zurückstellen können, indem Sie den nicht verwendeten Code manuell auf der Seite extrahieren. Für komplexere Produktionsumgebungen werden im Leitfaden zum Extrahieren von kritischem CSS-Code einige der beliebtesten Tools zum Extrahieren von kritischem CSS-Code beschrieben. Außerdem finden Sie in diesem Codelab Informationen dazu, wie sie in der Praxis funktionieren.