Skip to content
 

Google Core Web Vitals – Das solltest Du wissen

Autor

Jan Xaver Schmid
Jan Xaver Schmid
Core Web Vitals

Core Web Vitals sind ein Teil der Web Vitals Initiative von Google. Ziel ist es, ein Set von Qualitätsfaktoren für die User Experience (UX) im Web zu erstellen. Diese sollten möglichst einfach und für alle Website Betreibenden nachvollziehbar sein. Damit geht Google immer weitere Schritte, weg von einfachen Performance Metriken, hin zu einem messbaren positiven Nutzererlebnis.

Was steckt hinter "Core Web Vitals"?

Die Core Web Vitals umfassen aktuell drei Metriken, die alle Websites möglichst gut erfüllen sollten: „Ladezeit“, „Interaktivität“ und „visuelle Stabilität“. Im Englischen heißen diese „Largest Contentful Paint (LCP)“, „First Input Delay (FID)“ und „Cumulative Layout Shift (CLS)“.

Largest

Contentful

Paint

„Largest Contentful Paint“ oder einfach „LCP“ ist verwandt mit der bekannten „Ladezeit“ einer Website. Im Detail wird hier die Zeit gemessen, bis das visuell größte Element im Viewport des Nutzer gerendert wurde. Das ist in den meisten Fällen ein Bild oder Video. Natürlich kann auf visuell reduzierten Seiten dieses Element auch ein Textblock sein, hier gibt es nur in der Regel kaum Geschwindigkeitsprobleme. Text lässt sich in der Regel schnell und unkompliziert laden und darstellen.

First

Input

Delay

Neben einer schnellen Ladezeit ist für eine positive User Experience auch eine Interaktivität essentiell: Hier greift „FID“ oder auch „First Input Delay“ als Metrik an. Das Problem ist allen InternetnutzerInnen bekannt: Die Website reagiert nicht oder viel später als erwartet auf einen Klick oder eine Eingabe in einem Textfeld. Die Zeit zwischen der ersten Interaktion der NutzerIn und Reaktion der Website ist also zu lang. Genau diese Zeit wird als „First Input Delay“ bezeichnet.

Cumulative

Layout

Shift

Das sicherlich größte Fragezeichen gilt aktuell der visuellen Stabilität, von Google sperrig auf den Namen „Cumulative Layout Shift“ oder „CLS“ getauft. Gemessen wird hier die Verschiebung einzelner Document Object Model (DOM) Elemente, die in der Regel durch asynchrones Laden verursacht werden. Wichtig ist hierbei, dass nur unerwartete Verschiebungen gemessen werden. Klicken NutzerInnen aktiv auf einen „mehr lesen“-Button, wodurch sich Teile der Webseite verschieben, folgt das auf eine Aktion und wird somit nicht auf den CLS Wert auf addiert.

Wie lassen sich die Metriken messen und vergleichen?

Damit Website Betreiber sich mit den neuen Metriken auseinandersetzen können und auch erste Optimierungen durchführen, gibt es eine Reihe von Hilfsmittel, um die eigene Website zu messen und zu vergleichen:

Page Speed Insights

Die bekannten „Page Speed Insights“ von Google messen neben den altbekannten Performance Metriken auch die Core Web Vitals Werte und geben dazu auch Empfehlungen für eine Optimierung.

pagespeedinsights-core-web-vitals
Beispiel www.mso-digital.de

Google Chrome Plugin

Wer die laufende Messung des CLS Werts nachvollziehen möchte, kann das „Web Vitals“ Google Chrome Plugin installieren. Neben LCP und FID werden hier mit einem Ampelsystem die Layoutverschiebungen schnell und einfach visualisiert.

Google Search Console

Für alle NutzerInnen der Google Search Console gibt es bereits seit Mitte 2020 einen Bericht über die Entwicklung der Core Web Vitals. Insbesondere der historische Verlauf hilft bei Anpassungen und bei der Fehlersuche nach Relaunch oder kleineren Deployments.

Screenshot aus der Search Console

Es gibt natürlich noch viele weitere Tools, die oft einen deutlich größeren Funktionsumfang haben und sehr ins Detail gehen. Für einen ersten Blick reichen die bisher genannten Hilfsmittel jedoch aus.

Kleiner SEO Tipp am Rande: Um die Anpassungen an der eigenen Website auch nachvollziehbar zu machen, sollte immer ein und dasselbe Tool für die Datenerhebung genutzt werden.

Wie sind Messwerte einzuordnen? 

Welche Werte wie zu bewerten sind erläutert Google in der Search Console-Hilfe.

Die Tabelle haben wir für Dich übertragen:

Gut
Optimierung erforderlich
Langsam
LCP
bis 2,5 s
bis 4 s
> 4 s
FID
bis 100 ms
bis 300 ms
> 300 ms
CLS
bis 0,1
bis 0,25
> 0.25

Core Web Vitals und SEO

Natürlich werden die neuen Metriken auch einen Einfluss auf das Ranking bei Google haben. Das zusätzliche Gewicht, das die User Experience mit diesen Werten bekommt, passt zu den Algorithmus Updates und der Ausrichtung in der Google Suche der letzten Jahre.  Jedoch werden die drei Werte nicht alleinstehende Rankingfaktoren: Gemeinsam mit „Mobile“, „Sicherheit“ und „aufdringliche Interstitials“ bilden sie den Faktor „Page Experience Signals“. Damit wird das Thema User Experience und Ihr Einfluss auf ein organisches Ranking nachvollziehbarer und leichter messbar. Wie groß der Einfluss der einzelnen Metriken in der Zukunft sein wird, muss für jede Website und die dazugehörige Branche getestet werden. Und zukünftige Anpassungen von Seiten Google wird es sicherlich geben.
Gastreferent Jan Xaver Schmid
Jan Xaver Schmid
Team Lead SEO

Wie kannst Du die Metriken auf Deiner Website verbessern?

Bevor wir Dir pro Metrik konkrete Ideen an die Hand geben möchten wir Malte zu Wort kommen lassen. Er und sein Team von be-on! haben uns bei der Optimierung unserer Website extrem weitergeholfen. 

Google hat mit den Core Web Vitals klare Anforderungen für die User Experience von Webseiten und Onlineshops definiert. Somit ist es der nächste logische Schritt, die messbar gewordene UX auch als Rankingfaktor zu verwenden. Als Konsequenz müssen sich Betreiber bestehender Onlineplattformen Gedanken machen wie sie ihre Page Experience entscheidend verbessern können. Das Ziel sollte dabei allerdings sein, dem Besucher einen echten Mehrwert zu bieten und sich nicht ausschließlich auf die Optimierung der Punktzahl zu konzentrieren. Um gute Ergebnisse zu erzielen, sollte die Analyse der Core Web Vitals in zukünftigen Projekten von Beginn an berücksichtigt werden.
Malte Horstmann von be-on über Core Web Vitals
Malte Horstmann
Leiter Entwicklung bei be-on!

Tipps zur Optimierung im Sinne der User Experience

Largest Contentful Paint

Nehmen wir als Beispiel eine klassische Produkt-Detail-Seite in einem Onlineshop: Produktinformationen, 1 bis X Bilder des Produkts, Preis und der Kaufen-Button. 

Hier muss für einen optimierten LCP Wert das Produktbild, das dem Nutzer direkt angezeigt wird, besser komprimiert oder in einem modernen Bildformat wie WebP zur Verfügung gestellt werden. Viele Content Management- oder Shop-Systeme bieten entsprechende Plugins an. Bei großen Projekten können auch automatisierte Skripte auf dem Server die Bilder regelmäßig nach Optimierungspotenzial durchforsten.

First Input Delay

FID ist der erste „funktionale“ Eindruck den die Website beim Nutzer hinterlässt. Wie im echten Leben, außerhalb des Internets, zählt eben dieser erste Eindruck.

Für die Optimierung muss im Detail auf die Ausführung von JavaScript und externem Code geachtet werden. Diese blockieren oft den Browser zu lange und verhindern somit eine zeitnahe Reaktion. 

Cumulativ Layout Shift

Klassische Nachrichten Layouts bestehen aus Titel, Artikelbild, Einleitung und Hauptinhalt. Um die Ladezeit zu verbessern wird die Seite meist in der Reihenfolge Titel, Einleitung, Hauptinhalt und Bild geladen. Das zum Schluss hinzukommende Bild verschiebt mindestens zwei der bereits geladenen Inhalte nach unten. 

Dies passiert für den NutzerInnen unerwartet – hat er ja bereits mit dem Lesen begonnen. Im Gegensatz zu den bisherigen Web Vitals Metriken, wird der CLS Wert nicht bis zu einem bestimmten Zeitpunkt oder einer Interaktion aufaddiert: Solange die NutzerInnen die Seite benutzen, werden unerwartete Verschiebungen erfasst und verschlechtern den Wert.

Anhand der Problembeschreibung wird schnell klar, wo einfach gegengesteuert werden kann: Entweder die Ladereihenfolge wird so gewählt, dass sich das Layout für den Nutzer nicht verschiebt oder alle asynchron geladenen Elemente haben zu Beginn eine feste Größe im DOM erhalten. 

Fragen?

Hast Du weitere Fragen oder benötigst Du Unterstützung bei der Optimierung deiner Website? Dann melde Dich gerne bei uns!

Empfohlene Beiträge

2 Kommentare

  1. Avatar

    Ich würde gern jquery auf meiner Website abschalten, um die Ladezeit zu verbessern. Aber dann funktioniert das Headerbidding wohl nicht mehr?

    • Richard Wenner

      Hallo Steffen,
      vielen Dank für Dein Feedback und die damit verbundene Frage!
      Du kannst jQuery prinzipiell auf Deiner Website abschalten. Standardmäßig funktioniert Header Bidding mit unserem Script zwar nur mithilfe von jQuery. Aber wir haben die Möglichkeit, das Script entsprechend umzubauen, so dass es auch ohne jQuery läuft. Dies muss individuell in Deinem Account umgebaut/aktiviert werden. Dein Accountmanager Christoff wird sich dazu mit Dir in Verbindung setzen.
      Herzliche Grüße,
      Dein Team von mso digital.


Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.