Google Core Web Vitals – 3 Metriken einfach erklärt

Was sind die Core Web Vitals?

Die Google Web Vitals sind eine Reihe von Metriken, mit denen Google bestimmt, wie gut eine Website funktioniert. Die Core Web Vitals sind ein wesentlicher Bestandteil der Web Vitals und setzen sich aus drei spezifischen Messungen der Seitengeschwindigkeit und der Nutzerinteraktion zusammen:

Largest Contentful Paint (LCP)

Largest Contentful Paint misst einfach die Zeit, die es dauert, bis das größte Element auf dem Bildschirm (im Sichtfeld des Betrachters) erscheint. Diese Elemente können beispielsweise Bilder, Videos oder andere Inhalte sein.

Als anzustrebenden Wert für Largest Contentful Paint nennt Google 2,5 Sekunden oder schneller. Alles unter 4 Sekunden ist verbesserungsbedürftig, und alles, was darüber liegt, wird als schlechte Leistung betrachtet.

Die Ermittlung des Largest Contentful Paint ist ein dynamischer Prozess: Das, was zu erst geladen wird, muss nicht unbedingt das größte Element sein.

Folgendes Bild ist Teil einer Analyse mit PageSpeed Insights und veranschaulicht den LCP Prozess.

Auf der linken Seite erscheint zunächst nur das Logo beziehungsweise die Kopfzeile. Später erscheint das Bild als möglicher Kandidat für LCP. Im letzten Bildausschnitt wird jedoch ersichtlich, dass der Cookie-Banner das größte Element ist, welches zum Schluss dargestellt wird.

Diese Darstellung von Bildabfolgen ist sehr praktisch, da schnell ersichtlich wird, welches Element als LCP gilt. Dieses Element kann nun, falls Bedarf besteht, optimiert werden.

First Input Delay (FID)

First Input Delay bezeichnet die Verzögerung zwischen der ersten Eingabe bis zur Reaktion des Browsers. Solche Verzögerungen treten auf, wenn der Browser noch andere Arbeiten im Hintergrund ausführt. First Input Delay misst alle Interaktionen, die während des Ladens der Webseite stattfinden. Hierzu gehören Eingabeaktionen wie Klicks und das Drücken von Tasten und Buttons. Zoomen und Scrollen werden hingegen nicht berücksichtigt.

Beispiel für FID: Die Webseite ist geladen und wird auch normal dargestellt. Doch wenn Sie auf eine Schaltfläche / einen Button tippen, dann passiert nichts beziehungsweise mit einer Verzögerung! Oftmals führen Webseiten mit solchen Verzögerungen zu Frustrationen. Selbst wenn es nur eine kleine Verzögerung gibt, kann dies dazu führen, dass sich die Seite träge anfühlt.

Als anzustrebenden Wert für First Input Delay nennt Google 100 Millisekunden oder schneller. Alles was zwischen 100 ms und 300 ms liegt ist verbesserungsbedürftig. Werte von über 300 ms werden als schlechte Leistung betrachtet.

Anders, als bei den anderen Core Web Vitals, kann der First Input Delay nur ermittelt werden, wenn es eine Nutzerinteraktion gibt. Aus diesem Grund werden für die FID Festlegung die Daten von echten Nutzern (sogenannte Felddaten) herangezogen.

Zur Verbesserung des FID Wertes muss oftmals der Fokus auf das verwendete JavaScript gelegt werden. Auf der einen Seite hilft JavaScript dabei, Interaktionen auf der Webseite zu gestalten. Auf der anderen Seite führt der Einsatz von JavaScript oftmals zu langsamen Websites mit komplexem Code. Während der Browser JavaScript ausführt, kann er nicht auf etwaige Eingaben reagieren.

Der Schlüssel zu einem besseren FID Wert und einer nutzerfreundlicheren Webseite ist demnach die Optimierung des JavaScript-Codes und der diesbezüglichen Verwendung.

Cumulative Layout Shift (CLS)

Diese dritte Metrik der Core Web Vitals misst den kumulativen Abstand zwischen der Anfangsposition eines Objekts und seiner endgültigen, vollständig gerenderten Position. Es wird also untersucht, wie oft und in welchem Ausmaß sich die Elemente der Webseite (beim Ladevorgang) verschieben.
Auf diese Weise gibt Cumulative Layout Shift Aufschluss darüber, wie viel Arbeit der Browser leisten muss, um die entsprechende Webseite zu rendern.

Layout-Verschiebungen (im Sinne von CLS) passieren häufig bei Anzeigen. Anzeigen sind für viele Websites äußerst relevant. Doch oftmals werden diese so schlecht geladen, dass sie die Benutzer frustrieren.

Cumulative Layout Shift vergleicht Frames, um die Bewegung von Elementen zu bestimmen. Google betrachtet einen CLS Wert von weniger als 0,1 als gut. Hingegen sollten Ergebnisse zwischen 0,1 und 0,25 überarbeitet werden, Werte von über 0,25 werden als schlecht befunden.