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:
![Lighthouse-Bericht für nicht optimierte Seite, in dem unter „Empfehlungen“ der FCP-Wert „1“ und „Blockierungsressourcen beseitigen“ angezeigt werden](https://web.dev/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?authuser=6&hl=de)
So stellen Sie fest, wie dieses CSS das Rendering blockiert:
- Öffnen Sie die Seite in Chrome.
- Drücke
Control+Shift+J
(oderCommand+Option+J
auf einem Mac), um die Entwicklertools zu öffnen. - Klicken Sie auf den Tab Leistung.
- 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:
![Leistungs-Trace der Entwicklertools für nicht optimierte Seite; zeigt FCP, das nach dem Laden von CSS beginnt.](https://web.dev/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?authuser=6&hl=de)
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:
- Öffnen Sie in den Entwicklertools das Befehlstaste-Menü. Drücken Sie dazu
Control+Shift+P
oderCommand+Shift+P
(Mac). - Geben Sie „Abdeckung“ ein und wählen Sie Abdeckung anzeigen aus.
- Klicken Sie auf Aktualisieren, um die Seite neu zu laden und mit der Erfassung der Abdeckung zu beginnen.
![Abdeckung für CSS-Datei: 55, 9% der nicht verwendeten Byte werden angezeigt.](https://web.dev/static/articles/defer-non-critical-css/image/coverage-css-file-showi-7147a6123af9d.png?authuser=6&hl=de)
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:
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>
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 zupreload
finden Sie im Leitfaden zum Vorabladen wichtiger Assets.- Mit dem Attribut
onload
in der Dateilink
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 desrel
-Attributs noch einmal aufgerufen wird. - Der Verweis auf das Stylesheet im
noscript
-Element bietet ein Fallback für Browser, die kein JavaScript ausführen.
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:
![Leistungs-Trace der Entwicklertools für optimierte Seite, wobei FCP angezeigt wird, bevor CSS geladen wird.](https://web.dev/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?authuser=6&hl=de)
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 %):
![Lighthouse-Bericht mit einem FCP-Wert von „0, 8s“.](https://web.dev/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?authuser=6&hl=de)
Der Vorschlag Ressourcen, die das Rendering blockieren, wird nicht mehr unter Empfehlungen angezeigt, sondern im Abschnitt Bestandene Audits:
![Lighthouse-Bericht mit dem Abschnitt „Bestandene Prüfungen“ „blockierende Ressourcen beseitigen“.](https://web.dev/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?authuser=6&hl=de)
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.