CSS-bezogene Techniken zur Optimierung von Web Vitals
Die Art und Weise, wie Sie Ihre Stile schreiben und Layouts erstellen, kann sich erheblich auf die Core Web Vitals auswirken. Das gilt insbesondere für Cumulative Layout Shift (CLS) und Largest Contentful Paint (LCP).
In diesem Artikel werden CSS-bezogene Techniken zur Optimierung der Web Vitals beschrieben. Diese Optimierungen werden nach verschiedenen Aspekten einer Seite aufgeschlüsselt: Layout, Bilder, Schriftarten, Animationen und Laden. Dabei sehen wir uns an, wie wir eine Beispielseite verbessern können:
Layout
Inhalte in das DOM einfügen
Wenn Sie Inhalte auf einer Seite einfügen, nachdem der umgebende Inhalt bereits geladen wurde, wird alles andere auf der Seite nach unten verschoben. Dies führt zu Layoutverschiebungen.
Cookie-Benachrichtigungen, insbesondere solche, die oben auf der Seite platziert sind, sind ein häufiges Beispiel für dieses Problem. Weitere Seitenelemente, die beim Laden häufig zu dieser Art von Layoutänderung führen, sind Anzeigen und eingebettete Inhalte.
Identifizieren
Bei der Lighthouse-Analyse „Umfangreiche Layoutverschiebungen vermeiden“ werden Seitenelemente identifiziert, die verschoben wurden. In dieser Demo sehen die Ergebnisse so aus:
Die Cookie-Erklärung ist in diesen Ergebnissen nicht aufgeführt, da sie beim Laden nicht verschoben wird. Stattdessen werden die Elemente darunter auf der Seite (div.hero und article) verschoben. Weitere Informationen zum Identifizieren und Beheben von Layoutverschiebungen finden Sie unter Layoutverschiebungen beheben.
Korrigieren
Platzieren Sie die Cookie-Erklärung unten auf der Seite mit absoluter oder fester Positionierung.
Vorher:
.banner {
position: sticky;
top: 0;
}
Nachher:
.banner {
position: fixed;
bottom: 0;
}
Sie können diese Layoutänderung auch beheben, indem Sie oben auf dem Bildschirm Platz für die Cookie-Benachrichtigung reservieren. Dieser Ansatz ist ebenso effektiv. Weitere Informationen finden Sie unter Best Practices für die Cookie-Erklärung.
Bilder
Bilder und Largest Contentful Paint (LCP)
Bilder sind in der Regel das LCP-Element (Largest Contentful Paint) auf einer Seite. Weitere Seitenelemente, die das LCP-Element sein können, sind Textblöcke und Videoposterbilder. Der LCP wird durch den Zeitpunkt bestimmt, zu dem das LCP-Element geladen wird.
Das LCP-Element einer Seite kann je nach Inhalt, der dem Nutzer beim ersten Aufruf der Seite angezeigt wird, variieren. In dieser Demo sind beispielsweise der Hintergrund der Cookie-Benachrichtigung, das Hero-Image und der Artikeltext einige der potenziellen LCP-Elemente.
Auf der Beispielwebsite ist das Hintergrundbild der Cookie-Mitteilung ein großes Bild. Um den LCP-Wert zu verbessern, können Sie den Farbverlauf stattdessen in CSS zeichnen, anstatt ein Bild zu laden, um den Effekt zu erzielen.
Korrigieren
Ändern Sie das CSS für .banner, sodass statt eines Bilds ein CSS-Gradient verwendet wird:
Vorher:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
Nachher:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
Bilder und Layoutänderungen
Browser können die Größe eines Bildes erst bestimmen, wenn es geladen wurde. Wenn das Bild nach dem Rendern der Seite geladen wird, aber kein Platz für das Bild reserviert wurde, kommt es beim Anzeigen des Bilds zu einer Layoutverschiebung. In der Demo führt das Hero-Image beim Laden zu einer Layoutverschiebung.
Identifizieren
Mit der Lighthouse-Prüfung „Bildelemente haben eine explizite Breite und Höhe“ können Sie Bilder ohne explizite width und height identifizieren.
In diesem Beispiel fehlen sowohl dem Hero-Image als auch dem Artikelbild die Attribute width und height.
Korrigieren
Legen Sie die Attribute width und height für diese Bilder fest, um Layoutverschiebungen zu vermeiden.
Vorher:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
Nachher:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Schriftarten
Schriftarten können das Text-Rendering verzögern und zu Layoutverschiebungen führen. Daher ist es wichtig, Schriftarten schnell bereitzustellen.
Verzögertes Text-Rendering
Standardmäßig rendert ein Browser ein Textelement nicht sofort, wenn die zugehörigen Webschriften noch nicht geladen wurden. So wird ein „Flash of unstyled text“ (FOUT) verhindert. In vielen Fällen verzögert sich dadurch der First Contentful Paint (FCP). In einigen Fällen wird dadurch der Largest Contentful Paint (LCP) verzögert.
Layout-Shifts
Das Wechseln der Schriftart eignet sich zwar hervorragend, um Inhalte schnell für den Nutzer anzuzeigen, kann aber zu Layoutverschiebungen führen. Diese Layoutänderungen treten auf, wenn eine Webschrift und ihre Fallback-Schrift unterschiedliche Bereiche auf der Seite einnehmen. Wenn Sie Schriftarten mit ähnlichen Proportionen verwenden, werden diese Layoutänderungen minimiert.
Identifizieren
Wenn Sie die Schriftarten sehen möchten, die auf einer bestimmten Seite geladen werden, öffnen Sie in den Entwicklertools den Tab Netzwerk und filtern Sie nach Schriftart. Schriftarten können große Dateien sein. Daher ist es in der Regel besser, nur wenige Schriftarten zu verwenden, um die Leistung zu verbessern.
Wenn Sie sehen möchten, wie lange es dauert, bis die Schriftart angefordert wird, klicken Sie auf den Tab Timing. Je früher eine Schriftart angefordert wird, desto früher kann sie geladen und verwendet werden.
Wenn Sie die Anfragekette für eine Schriftart aufrufen möchten, klicken Sie auf den Tab Initiator. Im Allgemeinen gilt: Je kürzer die Anfragekette, desto schneller kann die Schriftart angefordert werden.
Korrigieren
In dieser Demo wird die Google Fonts API verwendet. Mit Google Fonts können Sie Schriftarten über <link>-Tags oder eine @import-Anweisung laden. Das <link>-Code-Snippet enthält einen preconnect-Ressourcenhinweis. Dies sollte zu einer schnelleren Bereitstellung des Stylesheets führen als bei der Verwendung der @import-Version.
Im Groben können Sie sich Ressourcenhinweise als eine Möglichkeit vorstellen, dem Browser mitzuteilen, dass er eine bestimmte Verbindung herstellen oder eine bestimmte Ressource herunterladen muss. Daher priorisiert der Browser diese Aktionen. Beachten Sie bei der Verwendung von Ressourcenhinweisen, dass durch die Priorisierung einer bestimmten Aktion Browserressourcen für andere Aktionen abgezogen werden. Daher sollten Ressourcenhinweise mit Bedacht und nicht für alles verwendet werden. Weitere Informationen finden Sie unter Netzwerkverbindungen frühzeitig herstellen, um die wahrgenommene Seitengeschwindigkeit zu verbessern.
Entfernen Sie die folgende @import-Anweisung aus Ihrem Stylesheet:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
Fügen Sie dem <head> des Dokuments die folgenden <link>-Tags hinzu:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Diese Link-Tags weisen den Browser an, eine frühzeitige Verbindung zu den von Google Fonts verwendeten Ursprüngen herzustellen und das Stylesheet zu laden, das die Schriftdeklaration für Montserrat und Roboto enthält. Diese <link>-Tags sollten so früh wie möglich in der <head> platziert werden.
Animationen
Animationen wirken sich vor allem dann auf die Web Vitals aus, wenn sie Layoutänderungen verursachen. Es gibt zwei Arten von Animationen, die Sie vermeiden sollten: Animationen, die das Layout auslösen, und „animationsähnliche“ Effekte, die Seitenelemente bewegen. In der Regel können diese Animationen durch leistungsstärkere Alternativen ersetzt werden, indem CSS-Eigenschaften wie transform, opacity und filter verwendet werden. Weitere Informationen finden Sie unter Leistungsstarke CSS-Animationen erstellen.
Identifizieren
Die Lighthouse-Analyse „Nicht zusammengesetzte Animationen vermeiden“ kann hilfreich sein, um nicht leistungsstarke Animationen zu identifizieren.
Korrigieren
Ändern Sie die slideIn-Animationssequenz so, dass transform: translateX() verwendet wird, anstatt die margin-left-Property zu überblenden.
Vorher:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
Nachher:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
Kritisches CSS
Stylesheets blockieren das Rendering. Das bedeutet, dass der Browser, wenn er ein Stylesheet findet, das Herunterladen anderer Ressourcen beendet, bis er das Stylesheet heruntergeladen und geparst hat. Dadurch kann sich der LCP verzögern. Um die Leistung zu verbessern, können Sie nicht verwendetes CSS entfernen, kritisches CSS einbetten und nicht kritisches CSS verzögern.
Fazit
Es gibt zwar noch Raum für weitere Verbesserungen, z. B. durch die Bildkomprimierung, um Bilder schneller auszuliefern. Durch diese Änderungen haben sich die Web Vitals dieser Website jedoch deutlich verbessert. Bei einer echten Website wäre der nächste Schritt, Leistungsdaten von echten Nutzern zu erheben, um zu beurteilen, ob die Grenzwerte für Web Vitals für die meisten Nutzer eingehalten werden. Weitere Informationen zu Web Vitals finden Sie unter Web Vitals kennenlernen.