Nicht kritisches CSS verschieben

Demián Renzulli

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>

Der Lighthouse-Bericht schlägt vor, damit Ihre Seite schneller geladen wird.

Hinweis: Diese Demowebsite verwendet ein sehr kleines Stylesheet. In Produktionsszenarien werden oft viel größere CSS-Dateien benötigt. Wenn Lighthouse erkennt, dass eine Seite mindestens 2.048 Byte an CSS-Regeln, die beim Rendern der above the fold ist, wird auch der Vorschlag Nicht verwendete CSS entfernen angezeigt.

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>

Auf der nicht optimierten Demoseite ist FCP nicht verfügbar bis das CSS geladen ist.

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>

Der Abdeckungsbericht zeigt, wie viel Ihres Preisvergleichsportals wird beim ersten Seitenaufbau verwendet.

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.

Hinweis:

In einem realen Produktionsszenario empfehlen wir die Verwendung von CSS-Rückstellungsfunktionen. wie z. B. loadCSS. die dieses Verhalten kapseln und browserübergreifend einwandfrei funktionieren. eine Content Security Policy unterstützen, die möglicherweise Inline-onload-JavaScript zulassen.

Sie können den CSS-Link auch unten auf der Seite platzieren, ohne auf das Stylesheet in Firefox und Chrome warten zu müssen. Der Browser priorisiert jedoch auch in diesem Fall das Stylesheet, sodass es können weiterhin kritische Inhalte in allen Browsern blockieren.

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>

Auf der optimierten Seite kann FCP bereits vor der wird geladen.

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 neue, reduzierte FCP.

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>

Die Seite übergibt jetzt die blockierenden Ressourcen. prüfen.

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