Nicht kritisches CSS verschieben

CSS-Dateien sind Ressourcen, die das Rendering blockieren: müssen geladen und verarbeitet werden, bevor der Browser die Seite rendert. Webseiten die unnötig große Stylesheets enthalten, dauert länger zum Rendern.

In diesem Leitfaden erfahren Sie, wie Sie nicht kritisches CSS zurückstellen, um die Kritischer Rendering-Pfad und Verbesserung First Contentful Paint (FCP):

Beispiel: Suboptimales Laden von CSS

Das folgende Beispiel enthält ein Akkordeon mit drei versteckten Absätzen text, der jeweils mit einer anderen Klasse gestaltet ist:

Auf dieser Seite wird eine CSS-Datei mit acht Klassen angefordert, es sind aber nicht alle die zum Rendern des "sichtbaren" Inhalte.

Das Ziel dieses Leitfadens ist es, diese Seite so zu optimieren, dass nur die wichtigen Stile synchron geladen, während der Rest (einschließlich der Absatzstile) nicht blockierend geladen.

Messen

Führen Sie Lighthouse aus auf der Seite und rufen Sie das Bereich Leistung.

Der Bericht enthält den Messwert First Contentful Paint mit dem Wert „1s“ und die Möglichkeit Ressourcen entfernen, die das Rendering blockieren, und auf die style.css-Datei hinzu:

<ph type="x-smartling-placeholder">

</ph>

So können Sie visualisieren, 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 FCP-Markierung sofort platziert wird. nach dem Laden des CSS-Codes:

<ph type="x-smartling-placeholder">

</ph>

Das bedeutet, dass der Browser warten muss, bis alle CSS-Dateien geladen und verarbeitet wurden. bevor ein einzelnes Pixel auf den Bildschirm gemalt wird.

Optimieren

Um diese Seite zu optimieren, müssen Sie wissen, welche Klassen als kritisch angesehen werden. Verwenden Sie das Abdeckungstool, um dies zu ermitteln:

1. Öffnen Sie in den Entwicklertools das Befehlsmenü. durch Drücken von 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.

<ph type="x-smartling-placeholder">

</ph>

Doppelklicken Sie auf den Bericht, um Details zu sehen:

• Grün gekennzeichnete Klassen sind kritisch. Sie werden vom Browser benötigt, um die sichtbare Inhalte, einschließlich Titel, Untertitel und Akkordeon-Schaltflächen.
• Rot markierte Klassen sind nicht kritisch, nur die sich auf Inhalte auswirken, die nicht sofort sichtbar sind, wie etwa verborgene Absätze.

Optimieren Sie anhand dieser Informationen Ihr CSS, damit der Browser mit der Verarbeitung beginnen kann. kritische Stile sofort nach dem Laden der Seite zu testen und nicht kritische CSS- für später:

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 den Rest der Klassen asynchron, indem Sie Folgendes anwenden: Muster:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

Dies ist nicht die Standardmethode zum Laden von CSS. So funktionierts:

• link rel="preload" as="style" fordert das Stylesheet asynchron an. Ich finden Sie weitere Informationen zu preload im Leitfaden zum Vorabladen wichtiger Assets.
• Mit dem Attribut onload im link kann der Browser den CSS-Code verarbeiten, wenn damit das Stylesheet fertig geladen ist.
• "nulling" kann der onload-Handler nach seiner Verwendung verhindern, den Handler noch einmal aufrufen, wenn er das rel-Attribut ändert.
• Der Verweis auf das Stylesheet im noscript-Element stellt ein Fallbacks für Browser, die kein JavaScript ausführen.

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

Überwachen

Führen Sie mit den Entwicklertools einen weiteren Performance-Trace im optimierten Seite.

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

<ph type="x-smartling-placeholder">

</ph>

Führen Sie als letzten Schritt Lighthouse auf der optimierten Seite aus.

Im Bericht sehen Sie, dass die FCP-Seite um 0,2 s (um 20 %) reduziert wurde. Verbesserung!):

<ph type="x-smartling-placeholder">

</ph>

Der Vorschlag Ressourcen entfernen, die das Rendering blockieren, wird nicht mehr unter Opportunities. Sie finden sie stattdessen im Bereich Bestandene Prüfungen:

<ph type="x-smartling-placeholder">

</ph>

Nächste Schritte und Referenzen

In diesem Leitfaden haben Sie erfahren, wie Sie nicht kritische CSS-Elemente zurückstellen können, indem Sie nicht verwendeten Code auf der Seite. Bei komplexeren Produktionsumgebungen aus dem kritischen CSS-Leitfaden, der gängigsten Tools zum Extrahieren von kritischem CSS-Code. Dazu gehören Codelab, um zu sehen, in der Praxis arbeiten