Core Web Vitals - Was ist das?
Google Core Web Vitals ist eine Sammlung von standardisierten Metriken. Jede Metrik steht für Ladezeiten, Interaktivität und visuelle Stabilität. Google selbst empfiehlt hier, gute Werte zu erreichen.
We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally. This, along with other page experience aspects, aligns with what our core ranking systems seek to reward.
Gute Werte sind, zumindest teilweise, für das Ranking und damit die Auffindbarkeit deiner Seite wichtig!
Web Vitals messen und verstehen
Largest Contentful Paint (LCP)
Dieser Wert misst die “wahrgenommene Ladegeschwindigkeit” und markiert den Punkt, an dem der Hauptinhalt der Seite geladen wurde. D. h., der Zeitpunkt, an dem der größte Bild- und/oder Textbereich im sichtbaren Feld der Website geladen ist.
Ein guter Wert ist hier unter 2,5 Sekunden.
First Input Delay (FID)
Dies ist der Zeitpunkt von der ersten Interaktion bis zu dem Zeitpunkt, an dem die Interaktion verarbeitet wird. Als Beispiel: Der Nutzer klickt auf einen Button, die Zeit bis der Klick auf den Button eine Aktion auslöst, ist der First Input Delay.
Ein guter Wert liegt hier unter 100 ms
Cumulative Layout Shift (CLS)
Ein Layoutshift ist der Effekt, wenn jemand deine Website besucht und z. B. ein Bild oder eine Schrift nachlädt und dadurch sich der Inhalt der Seite verschiebt.
Ein guter Wert liegt hier bei unter 0,1
Das Ziel ist es nicht nur, einen Score von über 90 zu erreichen, sondern auch, die Nutzererfahrung durch schnelle Ladezeiten, reibungslose Interaktionen und stabile visuelle Darstellungen zu verbessern. Eine optimierte Seite führt zu höherer Zufriedenheit der Besucher, längeren Verweildauern und letztendlich zu einer besseren Conversion-Rate.
Mein Blog ist zum Beispiel ohne CMS. Er ist mit Astro, einem statischen Seitengenerator, erstellt.
Wir wissen nun, wenn auch grob, was diese Vitals sind. Aber wie messen wir diese?
Zur Messung der Core Web Vitals empfehle ich unter anderem folgende Tools:
Google’s PageSpeed Insights: Für umfassende Berichte und Empfehlungen zur Verbesserung deiner Seite. Web Vitals Chrome Extension: Ermöglicht Echtzeit-Überwachung der Core Web Vitals direkt in deinem Browser.
Die eigene URL eintragen und analysieren lassen. Nehmen wir als Beispiel einen meiner ersten Blogbeiträge. Nachdem die Analyse durchgelaufen ist, haben wir 2 Tabs: Mobile und Desktop, die jeweils unterschiedliche Werte anzeigen können. Werfen wir zuerst einen Blick auf die Desktop-Analyse.
Durch gezielte Optimierungen haben wir eine perfekte Performance-Bewertung erreicht. Hier ein Einblick in die Schritte, die zu diesem Erfolg geführt haben.
Optimierung Largest Contentful Paint (LCP)
Wie auch in diesem Blogbeitrag ist bei dem getesteten der Largest Contentful Paint (also das größte sichtbare Element) das Einstiegsbild. Wie auch bei vielen anderen Seiten ist das erste, was der Nutzer sieht, ein Bild.
Für die Bildoptimierung empfehle ich folgende Schritte:
- Konvertierung in das WebP-Format, um die Dateigröße ohne Qualitätsverlust zu verringern.
- Implementierung von Lazy Loading, damit Bilder erst geladen werden, wenn sie in den sichtbaren Bereich kommen.
- Einsatz von Responsive Images mit dem
<picture>-Element, unterschiedliche Bildgrößen für verschiedene Bildschirmauflösungen.
Das Originalbild hatte eine Auflösung von 1024x1024 px und eine Dateigröße von 2 MB. 2 MB über die gute Internetleitung zu Hause zu laden, dauert nicht lange, aber kann durchaus eine sichtbare Verzögerung sein. Also eher schlecht für unseren Messwert. Zudem ist eine Auflösung von 1024 px ein bisschen zu groß für unsere kleinen Handybildschirme. Also auf zur Bildoptimierung.
Astro, wie auch andere Frameworks, kommt bereits mit einer Bildoptimierung. Nutzen wir diese, liefern wir das Bild nun im modernen webp-Dateiformat standardmäßig aus. Damit haben wir bereits die Dateigröße von 2 MB auf 200 KB gesenkt.
Ein ordentlicher Performance-Boost!
Aber noch nicht ausreichend. In den modernen Browsern ist es möglich, unterschiedliche Größen an Bildern, je nach Größe des Bildschirms, auszuliefern. Stellen wir die Bilder so ein, dass je nach Auflösung die passende Variante ausgeliefert wird, erreichen wir die 100%!
Hier gibt es noch diverse kleinere Optimierungen, aber das würde an dieser Stelle zu weit führen.
First Input Delay (FID)
Hier gab es bei mir nichts zu optimieren. Je nach eingesetztem System gibt es unterschiedliche Dinge zu beachten. Großes Javascript, das direkt ausgeführt wird, Inhalte von einer externen Seite laden oder Skripte, die von Dritten kommen (vor allem Consent-Tools und Tracking), sind hier oft der Bösewicht.
Optimierung Cumulative Layout Shift (CLS)
Dies war auch bei mir zu verbessern. Zuerst wurden die Bilder, vor der Bildoptimierung, luden die Bilder etwas langsam und haben entsprechend den Inhalt der Seite nach dem Laden verschoben. Eine Lösung dafür ist es, dem Browser mitzuteilen, wie groß das Bild sein wird, damit der Platz dort direkt reserviert wird. Das verhindert dann das Verschieben des Inhalts.
Es gibt natürlich noch weitaus mehr Problemstellungen bei der Optimierung der Vitals. Dies war nur ein kleiner Auszug, wie es bei dieser Seite war.
Aus meiner Erfahrung mit verschiedenen CMS-Systemen und Tools ist klar: Die Optimierung der Core Web Vitals erfordert eine sorgfältige Analyse und strategische Planung.
oder möchtest eine Analyse durchführen?
Schreib mir unter
joerg@jorgson.tech