Verfahren zur Optimierung von Web Vitals im Zusammenhang mit Preisvergleichsportalen
Die Art und Weise, wie du deine Stile und Layouts erstellst, 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 Techniken zur Optimierung von Web Vitals im Zusammenhang mit Preisvergleichsportalen behandelt. Diese Optimierungen werden nach verschiedenen Aspekten einer Seite aufgeschlüsselt: Layout, Bilder, Schriftarten, Animationen und Ladevorgänge. Dabei erfahren Sie auch, wie Sie 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, werden alle anderen Inhalte auf der Seite nach unten verschoben. Das führt zu Layoutverschiebungen.
Ein häufiges Beispiel sind Cookie-Hinweise, insbesondere die oben auf der Seite platzierten Cookies. Andere Seitenelemente, die beim Laden häufig zu dieser Art von Layoutverschiebung führen, sind unter anderem Anzeigen und Einbettungen.
Identifizieren
Bei der Lighthouse-Prüfung „Große Layoutverschiebungen vermeiden“ werden Seitenelemente ermittelt, die verschoben wurden. Für diese Demo sehen die Ergebnisse so aus:
Der Cookiehinweis wird in diesen Ergebnissen nicht aufgeführt, da er sich beim Laden nicht verschiebt. Stattdessen werden die untergeordneten Elemente (div.hero und article) auf der Seite verschoben. Weitere Informationen zum Identifizieren und Korrigieren von Layoutverschiebungen finden Sie unter Fehlerbehebung bei Layoutverschiebungen.
Problembehebung
Platzieren Sie den Cookie-Hinweis unten auf der Seite und verwenden Sie die absolute oder feste Positionierung.
Vorher:
.banner {
position: sticky;
top: 0;
}
Nachher:
.banner {
position: fixed;
bottom: 0;
}
Eine andere Möglichkeit zur Behebung dieses Layout Shifts besteht darin, Platz für den Cookie-Hinweis oben auf dem Bildschirm zu reservieren. Dieser Ansatz ist ebenso effektiv. Weitere Informationen finden Sie unter Best Practices für Cookie-Hinweise.
Bilder
Bilder und Largest Contentful Paint (LCP)
Bilder sind in der Regel das Largest Contentful Paint (LCP)-Element auf einer Seite. Weitere Seitenelemente, die das LCP-Element sein können, sind Textblöcke und Videoposterbilder. Die Zeit, zu der das LCP-Element geladen wird, bestimmt den LCP.
Dabei ist zu beachten, dass das LCP-Element einer Seite je nach Seitenaufbau variieren kann. Das hängt von dem Inhalt ab, der für den Nutzer sichtbar ist, wenn die Seite zum ersten Mal angezeigt wird. In dieser Demo sind beispielsweise der Hintergrund des Cookie-Hinweises, das Hero-Image und der Artikeltext einige mögliche LCP-Elemente.
Auf der Beispielwebsite ist das Hintergrundbild der Cookie-Mitteilung eigentlich ein großes Bild. Zur Verbesserung des LCP können Sie den Farbverlauf stattdessen in CSS darstellen, anstatt ein Bild zu laden, um den Effekt zu erzeugen.
Problembehebung
Ändern Sie die CSS-Eigenschaft .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 Layoutverschiebungen
Browser können die Größe eines Bildes erst dann ermitteln, wenn es geladen wurde. Wenn das Bild geladen wird, nachdem die Seite gerendert wurde, aber kein Platz dafür reserviert wurde, tritt beim Erscheinen des Bildes eine Layoutverschiebung auf. In der Demo führt das Hero-Image beim Laden zu einem Layoutverschiebung.
Identifizieren
Wenn Sie Bilder ohne explizite width und height identifizieren möchten, verwenden Sie die 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.
Problembehebung
Lege für diese Bilder die Attribute width und height 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 Textrendering verzögern und Layoutverschiebungen verursachen. Deshalb ist es wichtig, Schriftarten schnell bereitzustellen.
Verzögertes Textrendering
Standardmäßig rendert ein Browser ein Textelement nicht sofort, wenn die zugehörigen Webschriftarten noch nicht geladen wurden. Dadurch wird ein „Blitzen von nicht formatiertem Text“ (FOUT) verhindert. In vielen Situationen kann dies den First Contentful Paint (FCP) verzögern. In einigen Situationen kann dies den Largest Contentful Paint (LCP) verzögern.
Layout Shifts
Das Austauschen von Schriftarten ist zwar hervorragend für die schnelle Darstellung von Inhalten für Nutzer geeignet, kann aber zu Layoutverschiebungen führen. Diese Layoutverschiebungen treten auf, wenn eine Webschrift- und ihre Fallback-Schriftart unterschiedlich viel Platz auf der Seite einnehmen. Durch die Verwendung von ähnlich proportionalen Schriftarten wird die Größe dieser Layoutverschiebungen minimiert.
Identifizieren
Wenn du die Schriftarten sehen möchtest, die auf einer bestimmten Seite geladen werden, öffne in den Entwicklertools den Tab Netzwerk und filtere nach Schriftart. Bei den Schriftarten kann es sich um große Dateien handeln. Daher ist die Leistung im Allgemeinen besser, wenn Sie weniger Schriftarten verwenden.
Um zu sehen, wie lange es dauert, bis die Schriftart angefordert wird, klicken Sie auf den Tab Timing. Je früher eine Schriftart angefordert wird, desto schneller kann sie geladen und verwendet werden.
Klicken Sie auf den Tab Initiator (Initiator), um die Anfragekette für eine Schriftart aufzurufen. Im Allgemeinen gilt: Je kürzer die Anfragekette, desto früher kann die Schriftart angefordert werden.
Problembehebung
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 Code-Snippet <link> enthält einen preconnect-Ressourcenhinweis. Dies sollte zu einer schnelleren Bereitstellung des Stylesheets führen als bei Verwendung der @import-Version.
Grundsätzlich können Sie sich Ressourcenhinweise als Hinweis für den Browser vorstellen, dass er eine bestimmte Verbindung einrichten oder eine bestimmte Ressource herunterladen muss. Daher hat der Browser diese Aktionen priorisiert. Beachten Sie bei der Verwendung von Ressourcenhinweisen, dass durch das Priorisieren einer bestimmten Aktion Browserressourcen von anderen Aktionen entfernt werden. Daher sollten Ressourcenhinweise durchdacht verwendet werden und nicht für alles. Weitere Informationen finden Sie unter Frühzeitig Netzwerkverbindungen 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">
Mit diesen Link-Tags wird der Browser angewiesen, eine frühzeitige Verbindung zu den von Google Fonts verwendeten Ursprüngen herzustellen und das Stylesheet zu laden, das die Schriftartdeklaration für Montserrat und Roboto enthält. Diese <link>-Tags sollten so früh wie möglich im <head>-Element platziert werden.
Animationen
Animationen wirken sich in erster Linie auf Web Vitals aus, wenn sie Layoutverschiebungen verursachen. Es gibt zwei Arten von Animationen, die Sie vermeiden sollten: Animationen, die das Layout auslösen, und animierten Effekte, die Seitenelemente verschieben. In der Regel können diese Animationen mithilfe von CSS-Eigenschaften wie transform, opacity und filter durch leistungsstärkere Äquivalente ersetzt werden. Weitere Informationen finden Sie unter So erstellen Sie leistungsstarke CSS-Animationen.
Identifizieren
Die Lighthouse-Prüfung „Nicht zusammengesetzte Animationen vermeiden“ kann hilfreich sein, um nicht leistungsstarke Animationen zu identifizieren.
Problembehebung
Ändern Sie die Animationssequenz slideIn so, dass transform: translateX() verwendet wird, anstatt die Eigenschaft margin-left zu übertragen.
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. Wenn der Browser auf ein Stylesheet stößt, stoppt er den Download weiterer Ressourcen, bis der Browser das Stylesheet heruntergeladen und geparst hat. Dadurch kann sich der LCP verzögern. Zum Verbessern der Leistung können Sie nicht verwendetes CSS entfernen, wichtiges CSS einbinden und nicht kritisches CSS aufschieben.
Fazit
Es gibt zwar noch Verbesserungsmöglichkeiten, zum Beispiel durch die Bildkomprimierung, um Bilder schneller auszuliefern, haben aber die Web Vitals dieser Website durch diese Änderungen deutlich verbessert. Wenn dies eine echte Website wäre, wäre der nächste Schritt, Leistungsdaten von echten Nutzern zu erheben, um zu beurteilen, ob sie die Web Vitals-Grenzwerte für die meisten Nutzer erreicht. Weitere Informationen zu Web Vitals findest du unter Learn Web Vitals.