Das Geheimnis der Core Web Vitals

Lesedauer ca. 6 Minuten

Als mir der Begriff „Core Web Vitals“ zum ersten Mal begegnet ist, habe ich zuallererst gedacht: „Toll wieder neue Frühstücksflocken“. Da diese Werte aber so überhaupt nichts mit Müsli zu tun haben, wäre es doch eigentlich ganz interessant, was es mit dem neuen Core Update von Google im Mai 2021 auf sich hat und wie du dich darauf vorbereiten kannst? Und das erkläre ich dir in diesem Beitrag.

Was sind die Core Web Vitals?

Um die Page Experience der Webseiten noch besser widerzuspiegeln, fügt Google in diesem Jahr drei weitere Werte zur Messung hinzu. Bisher war es immer sehr schwer, dem Kunden bei Performanceproblemen der Webseite zu erklären, woran es genau liegt und welche Bereiche der Webseite diese Probleme verursachen. Ein paar Anhaltspunkte dazu konnte man zwar im Networktab des Browsers auslesen. Etwa wie lange es dauert, bis die Seite komplett geladen wird oder mit dem time to first byte (TTFB) Wert, wie lange der Server braucht, um zu antworten. Wirkliche Kennzahlen für die Leistung der Webseite gab es bislang aber nicht. Mit den drei neuen Werten von Google soll sich das aber ändern. Ab Mai 2021 sollen diese Daten auch im Faktor für das Ranking mit einfließen. Wie viel Auswirkung diese Werte dann aber tatsächlich auf das Ranking deiner Webseite haben, ist derzeit noch unklar und wird sich erst mit der Zeit zeigen.

Die drei Werte der Core Web Vitals

Ladezeit – Largest Contentful Paint (LCP)

Der LCP misst die Ladezeit, bis der eigentliche Content, also das größte Element deiner Webseite für den Besucher sichtbar ist. Hierbei geht es nicht um die Größe in Kilobyte (kB), sondern um die Größe in Pixel.

Folgende Kennzahlen sind wichtig:

• < 2,5 Sekunden = 😀
• Bis 4 Sekunden = 😐
• Ab 4 Sekunden = 🙁

Gründe für schlechte LCP Werte:

• Langsame Reaktionszeit des Servers
• JavaScript und CSS, die das Rendern blockieren
• Langsames Laden der Ressourcen
• Client-seitiges Rendering

Interaktivität – First Input Delay (FID)

Der FID misst den Zeitraum, bis der Nutzer mit deiner Webseite interagieren kann. Ein Beispiel hierfür wäre das Ausfüllen eines Formulars. Kannst du sofort nach Laden der Seite mit der Eingabe deiner Daten beginnen, ist der Wert gut. Musst du aber erst mal mit der Eingabe warten, da der erforderliche Inhalt noch nicht fertig geladen wurde, ist der Wert eher schlecht.

Folgende Kennzahlen sind wichtig:

• < 0,1 Sekunden = 😀
• Bis 0,3 Sekunden = 😐
• Ab 0,3 Sekunden = 🙁

Gründe für schlechte FID Werte:

• Dateien viel zu groß
• Ladezeit JavaScript beschleunigen
• Zu viele Ressourcen werden geladen
• Zu viele Drittanbieter Codes

Visuelle Stabilität – Cumulative Layout Shift (CLS)

Der CLS misst die visuelle Stabilität deiner Webseite. Google prüft damit, ob der Inhalt deiner Seite während des Ladens springt und die Elemente ohne irgendwelche Layoutverschiebungen geladen werden. Damit du ein Bild vor den Augen hast, erkläre ich es dir anhand eines Bildes und zweier Textelemente, wie Google das nicht möchte. Das Bild soll beim Laden der Webseite zwischen den beiden Textelementen geladen werden. Da ein Bild aber meistens länger zum Laden braucht, passiert Folgendes: Wird der Bereich zwischen den beiden Texten, wo das Bild platziert werden soll, nicht freigehalten, verschiebt das Bild den nachfolgenden Inhalt der Webseite, während die Webseite lädt.

Folgende Kennzahlen sind wichtig:

• < 0.1 = 😀
• Bis 0.25 = 😐
• Ab 0.25 = 🙁

Dieser Wert unterliegt keiner Einheit und wird mit der folgenden Formel berechnet:
layout shift score = impact fraction * distance fraction
Gründe für schlechte CLS Werte

• Bilder haben keine Größenangaben
• Inhalte nachträglich per JavaScript oben eingefügt
• Größe der Elemente werden beim Laden noch nachträglich geändert
• Keine Animationen genutzt

Diese drei Werte könnten laut Google in Zukunft noch ergänzt oder auch gänzlich ausgetauscht werden. In diesem Fall wird es aber sechs Monate vorher eine Ankündigung geben. So hat jeder von uns noch genug Zeit, sich darauf einzustellen.

Wie werden die Core Web Vitals gemessen?

Die einzelnen Werte habe ich dir jetzt oben vorgestellt. Jetzt fragst du dich aber bestimmt, wie du diese Informationen für deine Webseite auslesen und analysieren kannst. Hierfür gibt es zwei Möglichkeiten und Arten von Daten, die Google dir dafür zur Verfügung stellt und verschiedene Tools, die du entweder direkt kostenlos von Google oder auch kostenpflichtig von externen Dienstleistern nutzen kannst.

Labordaten

Um einen Core Web Vitals Bericht abzurufen, bietet dir Google für den Chrome-Browser die Erweiterung „Google Lighthouse“ an. Nach der Installation dieser App gelangst du mit [F12] zu den Entwicklertools. Dort findest du dann meistens oben rechts in den Tabs den Reiter „Lighthouse“. Hier kannst du Labor Daten abfragen. Achte bei der Überprüfung darauf, den Browser in einem privaten Tab zu öffnen, damit deine Ergebnisse nicht verfälscht werden. Drücke hierfür im geöffneten Chrome-Browserfenster einfach gleichzeitig die Tasten [Strg] + [Shift] + [N]. Die zweite Möglichkeit für eine Überprüfung bietet dir das Google Tool „Pagespeed Insights“. Hier besteht der Vorteil darin, dass die Prüfung direkt auf einem Server von Google stattfindet und nicht lokal auf deinem Rechner.

Felddaten

Hierfür hat Google ein Nutzerpanel im Chrome. Dort messen echte Nutzer von öffentlichen URLs die Daten für deine Webseite. Diese Felddaten sind dann laut Google auch die Grundlage für den Rankingfaktor. Um diese Daten einzusehen, benötigst du die „Google Search Console“. Du solltest also vorher schon über ein Google-Konto verfügen und deine Webseite sollte in der Search Console als Property angemeldet sein. In der Oberfläche selbst findest du links in der Sidebar unter „Verbesserungen“ den Navigationspunkt „Core Web Vitals“. Auch im Google Tool „Pagespeed Insights“ gibt es einen Web Vitals Report und dafür einen eigenen Reiter, wo du eine Einsicht auf die Daten bekommst.

Fazit

Wie schon weiter oben erwähnt, ist noch nicht abzusehen, inwieweit sich die Core Web Vitals letztendlich auf das Ranking deiner Webseite auswirken. Trotzdem solltest du diese Werte nicht ignorieren und damit anfangen, diese Kennzahlen zu hinterfragen und zu prüfen. Denn sind wir mal ehrlich, eigentlich war die Ladezeit und Usability schon immer sehr wichtig, um die Absprungrate deiner Webseite sehr gering zu halten, die Besuchsdauer zu erhöhen und damit die User Experience zu verbessern. Wer möchte schon lange auf eine Antwort einer Onlinepräsenz warten oder zusehen, wie sich die Seite im Tetris-Stil aufbaut und die Elemente sich gegenseitig verschieben? Mal ganz zu schweigen von nervigen Pop-up-Fenstern.

Aktualisierung vom Mai 2021: Die Veröffentlichung vom Core Web Vitals Update wird auf Mitte Juni 2021 verschoben und laut Google wohl erst Ende August 2021 komplett ausgerollt sein.