Google startet Web Vitals zum Bewerten der User Experience

Inhaltsverzeichnis

Unter dem Titel Web Vitals hat Google eine Initiative ins Leben gerufen, die Einblick in wesentliche Faktoren der User Experience (UX) von Webseiten geben soll. Betreiber von Websites können über Werkzeuge und eine JavaScript Library unter anderem die Geschwindigkeit beim Laden der Seite und beim Bereitstellen der interaktiven Funktionen messen.

Der Kern der Wahrnehmung

Die sogenannten Core Web Vitals umfassen in der Initiative die Faktoren Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Ersteres ist eine Maßeinheit für die Ladegeschwindigkeit und gibt wieder, wann der wichtigste Inhalt einer Seite verfügbar ist. FID misst, wie lange es dauert, bis Nutzer mit der Seite interagieren können, und der CLS-Wert zeigt die visuelle Konsistenz beziehungsweise Stabilität einer Seite an.

Für alle drei Werte existiert ein Ampelsystem als Qualitätsrichtlinie. So gilt eine Ladezeit unter 2,5 Sekunden als gut, bis vier Sekunden als verbesserungsbedürftig und jenseits davon als schlecht. Für das FID geht der grüne Bereich bis 100 ms, während eine Verzögerung jenseits von 300 ms als schlecht gilt.

Die Stabilitätsformel

Die Berechnung von CLS ist ein wenig komplexer und ergibt sich aus der Formel:

layout shift score = impact fraction * distance fraction

Die impact fraction beschreibt dabei, wie instabile Elemente sich auf den sichtbaren Bereich auswirken. Wenn ein Element dabei insgesamt drei Viertel des Viewports einnimmt, beträgt der Wert 0,75. Die distance Fraction ergibt sich aus der Bewegung selbst: Ein um ein Viertel der sichtbaren Höhe verschobenes Element erhält den Wert 0,25.

Daraus ergibt sich für ein Element, das die halbe Höhe des Viewports einnimmt und um ein Viertel nach unten verschoben wird, ein CLS von 0,75 * 0,25 = 0,1875.

Wechselbeziehungen und Report

Die Kernmetriken sind mit zahlreichen anderen Werten verknüpft. So gibt es einen offensichtlichen Zusammenhang zwischen dem LCP und dem First Contentful Paint (FCP), der misst, wie lange es dauert, bis der Browser das erste Element anzeigt, auch wenn es sich dabei nur um einen einzelnen Button handelt und der Rest der Seite noch leer ist. Auch der Wert Time to First Byte (TTFB), der angibt, wie lange es dauert, bis der Browser das erste Byte vom Server erhält, hat eine Wechselbeziehung zur LCP-Metrik.

Webentwickler und Site-Betreiber können die Werte auf unterschiedliche Art ermitteln. Unter anderem können sie auf den Chrome User Experience Report zurückgreifen, der die von Google gesammelten und anonymisierten Nutzungsstatistiken der Anwender enthält, die die Statistiksammlung im Chrome-Browser nicht deaktivieren.

JavaScript Library und Chrome Extension

Auf GitHub hat der Internetriese zudem eine schlanke JavaScript Library namens web-vitals veröffentlicht, mit der sich die drei Core Web Vitals sowie derzeit die FCP- und TTFB-Werte ermitteln lassen. Die Ausgabe der Kernmetriken im Konsolenfenster erfolgt mit folgendem Code:

import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

Einige Metriken erlauben dabei einen zweiten Parameter reportAllChanges, der die Ausgabe bei Änderungen über die Callback-Methode onReport steuert.

Derzeit noch als Alpha gekennzeichnet ist die Web Vitals Chrome Extension, die ebenfalls auf GitHub verfügbar ist und die Core Vitals in einem Pop-up mit der zugehörigen Ampelfarbe anzeigt.

Weitere Details und Pläne zu den Web Vitals lassen sich dem Chromium-Blog bei Google entnehmen. (rme)