Web Vitals ist eine Google-Initiative, mit der einheitliche Informationen zu Signalen zur Qualität von Webseiten bereitgestellt werden, die für eine optimale Nutzererfahrung im Web unerlässlich sind. Ziel ist es, die Vielzahl der verfügbaren Tools zur Leistungsmessung zu vereinfachen und Websiteinhabern dabei zu helfen, sich auf die wichtigsten Messwerte zu konzentrieren – die Core Web Vitals.
Core Web Vitals
Core Web Vitals ist die Teilmenge der Web Vitals, die für alle Webseiten gilt, von allen Websiteinhabern gemessen werden soll und in allen Google-Tools berücksichtigt wird. Jeder der Core Web Vitals repräsentiert einen bestimmten Aspekt der Nutzererfahrung, ist in der Praxis messbar und spiegelt die reale Nutzung eines wichtigen nutzerorientierten Ergebnisses wider.
Die Messwerte, aus denen Core Web Vitals besteht, werden sich im Laufe der Zeit weiterentwickeln. Im aktuellen Bereich liegt der Schwerpunkt auf drei Aspekten der Nutzererfahrung: Ladevorgang, Interaktivität und visuelle Stabilität. Sie umfasst die folgenden Messwerte:
- Largest Contentful Paint (LCP): Misst die Ladeleistung. Für eine gute Nutzerfreundlichkeit muss der LCP innerhalb von 2, 5 Sekunden nach dem ersten Laden der Seite ausgeführt werden.
- First Input Delay (FID): Misst die Interaktivität. Für eine gute Nutzerfreundlichkeit dürfen Seiten eine FID von 100 Millisekunden oder weniger haben.
- Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Für eine gute Nutzererfahrung sollte ein CLS-Wert von 0.1. oder weniger beibehalten werden.
Damit Sie für die meisten Nutzer das empfohlene Ziel erreichen, sollten Sie bei jedem dieser Messwerte das 75. Perzentil der Seitenaufbauvorgänge, segmentiert nach Mobilgeräten und Desktop-Geräten, messen.
Tools zur Bewertung der Einhaltung der Core Web Vitals sollten eine Seite als konform betrachten, wenn sie die empfohlenen Ziele beim 75. Perzentil für jeden dieser drei Messwerte erfüllt.
Lifecycle
Messwerte im Core Web Vitals-Track durchlaufen einen Lebenszyklus, der aus drei Phasen besteht: „experimentell“, „Ausstehend“ und „Stabil“.
Jede Phase soll Entwickelnden signalisieren, was sie über die einzelnen Messwerte denken sollten:
- Experimentelle Messwerte sind potenzielle Core Web Vitals, die je nach Tests und Feedback der Community noch erheblichen Änderungen unterliegen können.
- Ausstehende Messwerte sind zukünftige Core Web Vitals-Werte, die die Test- und Feedback-Phase bestanden haben und nach einem klar definierten Zeitplan feststehen, bis sie stabil sind.
- Stabile Messwerte sind die aktuellen Core Web Vitals-Werte, die Chrome für eine optimale Nutzererfahrung einstuft.
Die Core Web Vitals befinden sich in den folgenden Lebenszyklusphasen:
- LCP: Stabil
- FID: stabile Version
- CLS: stabile Version
- Interaction to Next Paint (INP): ausstehend
Weitere Informationen zur Entwicklung von INP finden Sie unter Advancing Interaction to Next Paint.
Experimentell
Ein neuer Messwert wird als experimenteller Messwert betrachtet.
Der Zweck der experimentellen Phase besteht darin, die Fitness eines Messwerts zu bewerten. Dazu wird zuerst das zu lösende Problem untersucht und anschließend unter Umständen darauf iteriert, was bei früheren Messwerten nicht behandelt werden konnte. Beispielsweise wurde INP ursprünglich als experimenteller Messwert entwickelt, um Probleme mit der Laufzeitleistung im Web umfassender zu beheben als First Input Delay (FID).
Die experimentelle Phase des Core Web Vitals-Lebenszyklus soll auch Flexibilität bei der Entwicklung eines Messwerts ermöglichen, indem Fehler identifiziert und sogar Änderungen an der ursprünglichen Definition untersucht werden. Es ist auch die Phase, in der das Feedback aus der Community am wichtigsten ist.
Ausstehend
Wenn das Chrome-Team feststellt, dass ein experimenteller Messwert ausreichend Feedback erhalten hat und seine Effizienz bewiesen hat, wird er zu einem ausstehenden Messwert. Ausstehende Messwerte werden in dieser Phase mindestens sechs Monate aufbewahrt, um dem System Zeit für die Anpassung zu geben. Das Feedback der Community bleibt ein wichtiger Aspekt dieser Phase, da immer mehr Entwickler damit beginnen, den Messwert zu verwenden.
Stabil
Wenn ein Core Web Vitals-Kandidaten-Messwert finalisiert wird, wird er zu einem stabilen Messwert. Dann kann der Messwert zu einem Core Web Vitals-Messwert werden.
Stabile Messwerte werden aktiv unterstützt und können Fehlerkorrekturen und Definitionsänderungen unterliegen. Die Stable Core Web Vitals-Messwerte ändern sich nur einmal pro Jahr. Jede Änderung an einem Core Web Vitals-Messwert wird klar und deutlich in der offiziellen Dokumentation des Messwerts und im Änderungsprotokoll des Messwerts angegeben. Core Web Vitals werden ebenfalls in alle Bewertungen einbezogen.
Wichtig: Stabile Messwerte sind nicht unbedingt dauerhaft. Ein stabiler Messwert kann nicht mehr verwendet und durch einen anderen Messwert ersetzt werden, der den Problembereich effektiver angeht.
Core Web Vitals messen und Berichte dazu erstellen
Google ist der Ansicht, dass die Core Web Vitals für alle Web-Nutzerfreundlichkeit eine entscheidende Rolle spielen. Daher ist es bestrebt, diese Messwerte in all seinen beliebten Tools anzuzeigen. In den folgenden Abschnitten wird beschrieben, welche Tools die Core Web Vitals unterstützen.
Praxistools zur Messung von Core Web Vitals
Im Bericht zur Nutzererfahrung in Chrome werden für jeden Core Web Vitals-Messwert anonymisierte, echte Nutzermesswerte erfasst. Anhand dieser Daten können Websiteinhaber ihre Leistung schnell bewerten, ohne dass sie manuell Analysen für ihre Seiten einrichten müssen. Außerdem stehen Tools wie PageSpeed Insights und der Core Web Vitals-Bericht der Search Console zur Verfügung.
| LCP | FID | CLS | |
| Bericht zur Nutzererfahrung in Chrome | |||
| PageSpeed Insights | |||
| Search Console (Core Web Vitals-Bericht) |
Die Daten im Bericht zur Nutzererfahrung in Chrome ermöglichen eine schnelle Bewertung der Websiteleistung. Sie enthalten jedoch nicht die detaillierte Telemetrie pro Seitenaufruf, die häufig für die genaue Diagnose, Überwachung und schnelle Reaktion auf Regressionen erforderlich ist. Daher empfehlen wir dringend, dass Websites ihre eigene Überwachung der tatsächlichen Nutzer einrichten.
Core Web Vitals in JavaScript messen
Jeder der Core Web Vitals kann in JavaScript über Standard-Web-APIs gemessen werden.
Am einfachsten lassen sich alle Core Web Vitals mithilfe der web-vitals-JavaScript-Bibliothek messen. Dabei handelt es sich um einen kleinen, produktionsreifen API-Wrapper, der jeden Messwert so misst, wie er von den Google-Tools erfasst wird.
Mit der Bibliothek web-vitals lässt sich jeder Messwert ganz einfach messen. Dazu muss nur eine einzige Funktion aufgerufen werden. Informationen zur vollständigen Nutzung und zu API finden Sie in der Dokumentation:
import {onCLS, onFID, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
Nachdem Sie Ihre Website so konfiguriert haben, dass die Bibliothek web-vitals verwendet wird, um Ihre Core Web Vitals-Daten zu messen und an einen Analyseendpunkt zu senden, besteht der nächste Schritt darin, diese Daten zusammenzufassen und Berichte dazu zu erstellen. So können Sie feststellen, ob Ihre Seiten die empfohlenen Grenzwerte für mindestens 75% der Seitenaufrufe erfüllen.
Einige Analyseanbieter unterstützen Core Web Vitals-Messwerte. Aber auch wenn nicht, sollten grundlegende benutzerdefinierte Messwertfunktionen enthalten sein, mit denen sich Core Web Vitals in ihrem Tool messen lassen.
Ein Beispiel ist der Web Vitals-Bericht, mit dem Websiteinhaber ihre Core Web Vitals mithilfe von Google Analytics messen können. Anleitungen zum Messen von Core Web Vitals mithilfe anderer Analysetools finden Sie unter Best Practices zum Messen von Web Vitals im Feld.
Mit der Web Vitals-Chrome-Erweiterung können Sie auch Berichte zu den Core Web Vitals erstellen, ohne Code schreiben zu müssen. Diese Erweiterung verwendet die web-vitals-Bibliothek, um jeden dieser Messwerte zu messen und den Nutzern beim Surfen im Web anzuzeigen.
Diese Erweiterung kann hilfreich sein, um die Leistung Ihrer eigenen Websites, der Websites Ihrer Konkurrenz und des gesamten Webs zu verstehen.
| LCP | FID | CLS | |
|---|---|---|---|
| Web Vitals | |||
| Web Vitals-Erweiterung |
Entwickler, die diese Messwerte lieber direkt über die zugrunde liegenden Web-APIs messen möchten, können stattdessen die folgenden Messwertleitfäden verwenden, um Details zur Implementierung zu erhalten:
Weitere Informationen zum Messen dieser Messwerte mit gängigen Analysediensten oder Ihren eigenen internen Analysetools finden Sie unter Best Practices für die Messung von Web Vitals in der Praxis.
Lab-Tools zur Messung von Core Web Vitals
Bei allen Core Web Vitals handelt es sich in erster Linie um Feldmesswerte, viele davon können aber auch im Labor gemessen werden.
Die Lab-Messung ist die beste Möglichkeit, die Leistung von Features während der Entwicklung zu testen. Dies ist auch die beste Möglichkeit, Leistungsabfälle zu erkennen, bevor sie auftreten.
Mit den folgenden Tools können Sie die Core Web Vitals in einer Testumgebung messen:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome-Entwicklertools | (verwenden Sie stattdessen TBT) | ||
| Lighthouse | (verwenden Sie stattdessen TBT) |
Tools wie Lighthouse, die Seiten in einer simulierten Umgebung ohne Nutzer laden, können die FID nicht messen, da sie keine Nutzereingabe haben. Der Messwert „Total Blocking Time“ (TBT) ist jedoch im Labor messbar und ein hervorragender Proxy für FID. Leistungsoptimierungen, die die TBT im Labor verbessern, sollten auch den FID-Wert verbessern. Weitere Informationen finden Sie unter Empfehlungen zur Verbesserung des Index.
Obwohl die Messung im Labor ein wesentlicher Bestandteil für eine hervorragende Leistung ist, ist sie kein Ersatz für eine Feldmessung. Die Leistung einer Website kann je nach den Gerätefunktionen eines Nutzers, seinen Netzwerkbedingungen, den anderen Prozessen, die möglicherweise auf dem Gerät ausgeführt werden, und der Interaktion mit der Seite stark variieren. Tatsächlich kann der Wert jedes Core Web Vitals-Messwerts durch die Nutzerinteraktion beeinflusst werden. Nur Feldmessungen können das vollständige Bild genau erfassen.
Empfehlungen zur Verbesserung des Index
In den folgenden Leitfäden finden Sie spezifische Empfehlungen zur Optimierung Ihrer Seiten für jeden der Core Web Vitals:
Andere Web Vitals
Zwar sind die Core Web Vitals entscheidende Messwerte für das Verständnis und die Bereitstellung einer hervorragenden Nutzererfahrung, doch es gibt noch weitere wichtige Messwerte.
Diese anderen Web Vitals dienen häufig als Proxy- oder ergänzende Messwerte für die Core Web Vitals, um einen größeren Teil der App zu erfassen oder ein bestimmtes Problem zu diagnostizieren.
Time to First Byte (TTFB) und First Contentful Paint (FCP) sind beispielsweise wichtige Aspekte des Ladevorgangs und beide sind nützlich für die Diagnose von LCP-Problemen (langsame Serverantwortzeiten bzw. Ressourcen, die das Rendering blockieren).
Ein Messwert wie Total Blocking Time (TBT) ist ein wichtiger Lab-Messwert zum Erkennen und Diagnostizieren potenzieller Interaktivitätsprobleme, die sich auf FID und INP auswirken können. Er ist jedoch nicht in den Core Web Vitals-Werten enthalten, da er nicht feld messbar ist und kein nutzerorientiertes Ergebnis darstellt.
Änderungen bei Web Vitals
Web Vitals und Core Web Vitals sind die besten verfügbaren Signale, die Entwicklern derzeit zur Verfügung stehen, um die Qualität der Nutzererfahrung im Web zu messen. Diese Signale sind jedoch nicht perfekt und sollten in der Zukunft verbessert oder ergänzt werden.
Die Core Web Vitals sind für alle Webseiten relevant und werden in relevanten Google-Tools präsentiert. Da Änderungen an diesen Messwerten weitreichende Auswirkungen haben, sollten Entwickler davon ausgehen, dass die Definitionen und Schwellenwerte der Core Web Vitals stabil sind. Außerdem sollten sie vorherige Ankündigungen und einen vorhersehbaren Zeitplan für Aktualisierungen haben.
Die anderen Web Vitals sind oft kontext- oder toolspezifisch und können experimenteller sein als die Core Web Vitals. Daher können sich ihre Definitionen und Schwellenwerte mit größerer Häufigkeit ändern.
Alle Web Vitals-Änderungen sind in diesem öffentlichen Änderungsprotokoll dokumentiert.