Das Page Experience Update wurde schon lange angekündigt und ist jetzt im vollen Gange. Wir haben hier ja schon öfter dazu berichtet und möchten Dir jetzt die wesentlichen Punkte nochmal zusammenfassen.
Die Core Web Vitals sind drei wichtige Metriken (LCP, CLS und FID), die Google verwendet, um das Erlebnis der Nutzer beim Besuchen einer Website objektiv zu bewerten. Dabei geht es um die technische Darstellung des Inhalts, nicht um den dargestellten Inhalt selbst. Also:
- Wie schnell ist die Seite?
- Wie stabil ist das Layout?
- Reagiert die Seite zügig auf Nutzerinteraktion?
Aber wie misst Google das? Google verwendet echte Benutzerdaten aus den Chrome User Experience Reports (CrUX). Dieses Dataset enthält anonyme Daten darüber, wie schnell eine Website für alle Nutzer des Chrome-Browsers geladen wird. Das bedeutet, dass keine Geschwindigkeitstests durchgeführt werden, während Google eine Website crawlt und rendert. Die Messung der Core Web Vitals basiert auf der tatsächlichen Geschwindigkeit, die die Nutzer erleben.
Wie schon oben erwähnt basiert das Algorithmus-Update auf drei Metriken:
- LCP - Largest Contentful Paint zur Bewertung der Ladeleistung
- CLS - Cumulative Layout Shift zur Bewertung der visuellen Stabilität
- FID - First Input Delay zur Bewertung der Interaktivität
Wie soll der LCP einer Webseite optimiert werden?
Der Largest Contentful Paint kann die Absprungrate / Bounce Rate direkt beeinflussen.
Why page performance matters Longer page load times have a severe effect on bounce rates. For example:
- If page load time increases from 1 second to 3 seconds, bounce rate increases 32%
- If page load time increases from 1 second to 6 seconds, bounce rate increases by 106%
Deswegen sollte Deine Seite möglichst schnell - in unter 2,5 Sekunden - werden:
To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. Bei web.dev kannst Du Dich mehr über LCP informieren.
Der beste Indikator um zu messen, wann der Hauptinhalt einer Seite geladen wurde, ist laut Google aktuell das das größte Element, welches “above-the-fold” gerendert wird. Der Largest Contentful Paint eben.
Die häufigsten Ursachen für einen schlechten LCP sind:
- Langsame Ladezeiten von Ressourcen (zum Beispiel große Bilder)
- Langsame Server (Antwortzeiten)
- Rendering-blockierendes JavaScript und CSS
Wieso ist visuelle Stabilität (CLS) so wichtig?
Es ist sehr störend, wenn beim Lesen eines Artikels der Text plötzlich anfängt hin und her zu springen. Die Ursache liegt typischerweise daran, dass Informationen aus verschiedenen CSS und JS Dateien nacheinander gelesen und ausgeführt werden. Dadurch kann es sein, dass ein Element, welches bereits dargestellt wird nochmal an eine andere Position verschoben wird, zum Beispiel weil ein weiteres Element eingefügt wurde das erste Element dadurch nach unten gedrückt wird.
Die häufigsten Ursachen für einen schlechten CLS-Wert sind:
- Bilder ohne “width” und “height”
- Anzeigen und iFrames
- Dynamisch geladene Inhalte
To provide a good user experience, sites should strive to have a CLS score of 0.1 or less.
Bei web.dev kannst Du Dich mehr über CLS informieren.
Interaktion oder First Input Delay (FID) Deiner Webseite optimieren
Der First Input Delay misst, wie reaktionsschnell Deine Website auf Interaktionen eines Benutzers reagiert. Die häufigste Ursache für ein schlechtes FID ist die JavaScript-Menge, die der Browser auf einmal ausführen muss. Um den FID zu verbessern kannst Du nicht verwendetes JavaScript entfernen, verwendetes JavaScript performanter gestalten und wenn möglich in Service Worker auslagern.
To provide a good user experience, sites should strive to have a First Input Delay of 100 milliseconds or less. Bei wev.dev kannst Du Dich mehr über FID informieren.
Tools für Messung von Core Web Vitals Wie kannst Du die Core Web Vitals am besten messen? Hier sind die wichtigsten Tools, mit denen Du die Core Web Vitals überprüfen kannst:
- Google Search Console Core Web Vitals Report: Als Überblick welche URLs noch verbessert werden müssen
- Page Speed Insights: Um Einzel-URLs zu prüfen und Felddaten abzurufen
- Lighthouse Chrome Extension: Um Einzel-URLs zu prüfen und Verbesserungen unter kontrollierten Bedingungen testen zu können
Wenn Du Deine Webseite so schnell wie eine Rakete machen möchtest, dann optimiere die drei Core Web Vitals Metriken. Dann können auch Deine Nutzer Deine blitzschnelle Seite besser genießen. ;-)