CSS für Web Vitals

CSS-bezogene Techniken zur Optimierung von Web Vitals

Katie Hempenius
Katie Hempenius
X
Una Kravets

Die Art und Weise, wie Sie Stile und Layouts erstellen, kann einen großen Einfluss auf die Core Web Vitals haben. Das gilt insbesondere für Cumulative Layout Shift (CLS) und Largest Contentful Paint (LCP).

In diesem Artikel werden CSS-bezogene Techniken zur Optimierung von Web Vitals behandelt. Diese Optimierungen lassen sich nach verschiedenen Aspekten einer Seite aufschlüsseln: Layout, Bilder, Schriftarten, Animationen und Laden. Dabei sehen wir uns an, wie wir eine Beispielseite verbessern können:

Screenshot einer Beispielwebsite

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-Hinweise, insbesondere oben auf der Seite, 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. Für diese Demo sehen die Ergebnisse so aus:

Prüfung „Große Layoutverschiebungen vermeiden“ von Lighthouse

Der Cookie-Hinweis ist in diesen Ergebnissen nicht aufgeführt, da sich die Cookie-Benachrichtigung beim Laden nicht verschiebt. Stattdessen werden die Elemente darunter auf der Seite (div.hero und article) verschoben. Weitere Informationen zum Erkennen und Korrigieren von Layout Shifts finden Sie unter Layout Shifts beheben.

Korrigieren

Platzieren Sie die Cookie-Erklärung unten auf der Seite mit absoluter oder fester Positionierung.

Cookie-Hinweis wird unten auf der Seite angezeigt

Vorher:

.banner {
  position: sticky;
  top: 0;
}

Nachher:

.banner {
  position: fixed;
  bottom: 0;
}

Eine weitere Möglichkeit, diesen Layout Shift zu beheben, wäre, Platz für den Cookie-Hinweis am oberen Bildschirmrand zu reservieren. Dieser Ansatz ist gleichermaßen effektiv. Weitere Informationen finden Sie unter Best Practices für die Cookie-Erklärung.

Bilder

Bilder und Largest Contentful Paint (LCP)

Bilder sind häufig 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 bei jedem Seitenaufbau variieren. Dies hängt davon ab, welche Inhalte für den Nutzer beim ersten Aufruf der Seite sichtbar sind. In dieser Demo sind beispielsweise der Hintergrund der Cookie-Benachrichtigung, das Hero-Image und der Artikeltext einige der potenziellen LCP-Elemente.

Diagramm, das das LCP-Element der Seite in verschiedenen Szenarien hervorgehoben

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 den CSS-Code .banner so, dass statt eines Bildes ein CSS-Farbverlauf 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 dann ermitteln, 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.

Lighthouse-Prüfung „Bildelemente haben explizite Breite und Höhe“

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">
Das Bild wird jetzt geladen, ohne dass es zu einer Layoutverschiebung kommt.

Schriftarten

Schriftarten können das Textrendering verzögern und Layoutverschiebungen verursachen. Daher ist es wichtig, Schriftarten schnell bereitzustellen.

Verzögertes Text-Rendering

Standardmäßig rendert ein Browser ein Textelement nicht sofort, wenn die zugehörigen Webschriftarten noch nicht geladen wurden. So wird ein „Flash of unstyled text“ (FOUT) verhindert. In vielen Situationen wird dadurch First Contentful Paint (FCP) verzögert. In einigen Situationen kommt es zu einer Verzögerung von Largest Contentful Paint (LCP).

Layout-Shifts

Das Austauschen von Schriftarten ist zwar hervorragend geeignet, um dem Nutzer Inhalte schnell 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.

Diagramm mit einer Layoutverschiebung, die durch einen Schriftschnittwechsel verursacht wurde
In diesem Beispiel haben sich die Seitenelemente durch den Schriftartwechsel um fünf Pixel nach oben verschoben.

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. Da es sich bei Schriftarten um große Dateien handelt, ist die Leistung im Allgemeinen besser, wenn weniger Schriftarten verwendet werden.

Screenshot einer Schriftart in den Entwicklertools

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.

Screenshot des Tabs „Timing“ in den Entwicklertools

Wenn Sie die Anfragekette für eine Schriftart aufrufen möchten, klicken Sie auf den Tab Initiator. Allgemein gilt: Je kürzer die Anfragekette, desto früher kann die Schriftart angefordert werden.

Screenshot des Tabs „Initiator“ in den Entwicklertools

Korrigieren

In dieser Demo wird die Google Fonts API verwendet. Google Fonts bietet die Möglichkeit, Schriftarten über <link>-Tags oder eine @import-Anweisung zu 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.

Allgemein können Sie sich Ressourcenhinweise als Hinweis für den Browser vorstellen, 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 <head> platziert werden.

Animationen

Animationen wirken sich hauptsächlich auf Web Vitals aus, wenn sie Layoutverschiebungen verursachen. Sie sollten zwei Arten von Animationen nicht verwenden: Animationen, die das Layout auslösen, und „animationsähnliche“ Effekte, die Seitenelemente verschieben. 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.

Prüfung von Lighthouse zum Vermeiden von nicht zusammengesetzten Animationen

Korrigieren

Ändern Sie die Animationssequenz slideIn so, dass transform: translateX() verwendet wird, anstatt das Attribut margin-left zu ändern.

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. Sie können die Leistung verbessern, indem Sie nicht verwendete CSS entfernen, wichtigen CSS-Code inline einbinden und nicht kritischen CSS-Code aufschieben.

Fazit

Es ist zwar noch Raum für weitere Verbesserungen (z. B. durch die Bildkomprimierung zur schnelleren Bereitstellung von Bildern), diese Änderungen haben jedoch die Web Vitals-Werte dieser Website erheblich verbessert. Bei einer echten Website besteht der nächste Schritt darin, Leistungsdaten von echten Nutzern zu erfassen, um zu beurteilen, ob sie die Web Vitals-Grenzwerte für die meisten Nutzer erfüllt. Weitere Informationen zu Web Vitals finden Sie unter Web Vitals kennenlernen.