Für den langfristigen Erfolg einer Website ist es entscheidend, die Nutzerfreundlichkeit zu optimieren. Unabhängig davon, ob Sie Geschäftsinhaber, Werbetreibender oder Entwickler sind, können Sie mit Web Vitals die Nutzerfreundlichkeit Ihrer Website messen und Verbesserungsmöglichkeiten ermitteln.
Überblick
Web Vitals ist eine Initiative von Google mit dem Ziel, einheitliche Informationen zu Qualitätssignalen bereitzustellen, die für eine optimale Nutzererfahrung im Web unerlässlich sind.
Google hat im Laufe der Jahre eine Reihe von Tools zur Verfügung gestellt, um die Leistung zu messen und Berichte dazu zu erstellen. Einige Entwickler sind Experten im Umgang mit diesen Tools, während andere festgestellt haben, dass die Fülle von Tools und Messwerten schwierig zu bewältigen ist.
Websiteinhaber sollten keine Leistungsexperten sein müssen, um die Qualität der Website oder App selbst zu beurteilen. Ziel der Web Vitals-Initiative ist es, den Überblick zu behalten und Websites dabei zu unterstützen, 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 stellt einen deutlichen Aspekt der Nutzererfahrung dar, ist in der Praxis messbar und spiegelt die reale Erfahrung eines wichtigen nutzerorientierten Ergebnisses wider.
Die Messwerte, aus denen die Core Web Vitals besteht, werden im Laufe der Zeit weiterentwickelt. Das aktuelle Set für 2020 konzentriert sich auf drei Aspekte der Nutzererfahrung – Ladezeiten, Interaktivität und visuelle Stabilität. Dabei werden die folgenden Messwerte sowie die jeweiligen Grenzwerte angezeigt:
- Largest Contentful Paint (LCP): Misst die Ladeleistung. Für eine gute Nutzererfahrung sollte der LCP innerhalb von 2, 5 Sekunden nach dem ersten Laden der Seite stattfinden.
- Interaction to Next Paint (INP): Misst die Interaktivität. Für eine gute Nutzererfahrung sollten Seiten eine INP von 200 Millisekunden oder weniger haben.
- Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Für eine gute Nutzerfreundlichkeit sollten Seiten eine CLS von 0.1. oder weniger haben.
Damit Sie bei den meisten Nutzern das empfohlene Ziel für diese Messwerte erreichen, sollten Sie das 75. Perzentil der Seitenaufbauvorgänge, segmentiert nach Mobilgeräten und Desktop-Geräten, messen.
Bei Tools, mit denen die Einhaltung der Core Web Vitals geprüft wird, sollte eine Seite als bestanden eingestuft werden, wenn sie die empfohlenen Ziele des 75. Perzentils für alle drei Core Web Vitals-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:
Experimentell
Wenn ein Messwert neu entwickelt wurde und in die Plattform eingeführt wird, gilt er als experimenteller Messwert.
Der Zweck der Testphase besteht darin, die Fitness einer Metrik zu bewerten. Zunächst wird das zu lösende Problem untersucht und gegebenenfalls iteriert, welche bisherigen Messwerte möglicherweise nicht berücksichtigt wurden. Interaction to Next Paint (INP) wurde beispielsweise 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, da Fehler identifiziert und sogar Änderungen an der ursprünglichen Definition untersucht werden. Es ist auch die Phase, in der das Feedback 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. Beispielsweise wurde INP 2023 von „Experimentell“ auf den Status „Ausstehend“ hochgestuft, mit der Absicht, FID später einzustellen.
Ausstehende Messwerte werden in dieser Phase mindestens sechs Monate lang 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
Sobald 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 sowie im Änderungsprotokoll des Messwerts angegeben. Core Web Vitals ist ebenfalls in allen Tests enthalten.
Tools zur Messung und Berichterstellung zu Core Web Vitals
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-Bericht anonymisierte, echte Nutzermesswerte erfasst. Anhand dieser Daten können Websiteinhaber ihre Leistung schnell bewerten, ohne dass sie manuell Analysen auf ihren Seiten vornehmen müssen. Außerdem werden Tools wie PageSpeed Insights und der Core Web Vitals-Bericht der Search Console bereitgestellt.
| LCP | INP | CLS | |
| Bericht zur Nutzererfahrung in Chrome | |||
| PageSpeed Insights | |||
| Search Console (Core Web Vitals-Bericht) |
Die Daten im Bericht zur Nutzererfahrung in Chrome bieten eine schnelle Möglichkeit, die Leistung von Websites zu bewerten, enthalten jedoch nicht die detaillierten Telemetriedaten pro Seitenaufruf, die häufig für die genaue Diagnose, Überwachung und schnelle Reaktion auf Regressionen erforderlich sind. Daher empfehlen wir dringend, für Websites eine eigene Überwachung der tatsächlichen Nutzer einzurichten.
Core Web Vitals in JavaScript messen
Jeder der Core Web Vitals kann in JavaScript mithilfe von Standard-Web-APIs gemessen werden.
Die einfachste Methode, alle Core Web Vitals zu messen, ist die Verwendung der JavaScript-Bibliothek web-vitals. Das ist ein kleiner, produktionsfertiger Wrapper um die zugrunde liegenden Web-APIs, mit dem jeder Messwert so gemessen wird, wie er von allen oben aufgeführten Google-Tools erfasst wird.
Mit der Bibliothek web-vitals kann jeder Messwert durch Aufrufen einer einzelnen Funktion erfasst werden. Weitere Informationen zur Nutzung und zur API finden Sie in der Dokumentation:
import {onCLS, onINP, 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);
onINP(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 dies nicht der Fall ist, sollten grundlegende Funktionen für benutzerdefinierte Messwerte 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. Informationen zur Messung von Core Web Vitals mithilfe anderer Analysetools finden Sie unter Best Practices für die Messung von Web Vitals.
Mit der Web Vitals-Chrome-Erweiterung können Sie auch Berichte zu jedem der Core Web Vitals erstellen, ohne Code schreiben zu müssen. Diese Erweiterung nutzt die Bibliothek web-vitals, um jeden dieser Messwerte zu erfassen und sie den Nutzern beim Surfen im Web anzuzeigen.
Diese Erweiterung kann hilfreich sein, um die Leistung Ihrer eigenen Websites, der Websites Ihrer Mitbewerber und des Internets insgesamt zu verstehen.
| LCP | INP | CLS | |
|---|---|---|---|
| Web Vitals | |||
| Web Vitals-Erweiterung |
Entwickler, die diese Messwerte lieber direkt mit den zugrunde liegenden Web-APIs messen möchten, können stattdessen die folgenden Messwertleitfäden verwenden, um Details zur Implementierung zu erhalten:
Weitere Informationen zur Analyse dieser Messwerte mit gängigen Analysediensten oder eigenen internen Analysetools finden Sie unter Best Practices für die Messung von Web Vitals.
Lab-Tools zur Messung von Core Web Vitals
Bei allen Core Web Vitals handelt es sich in erster Linie um Feldmesswerte, aber viele davon können auch im Labor gemessen werden.
Die Lab-Messung ist die beste Möglichkeit, die Leistung von Funktionen während der Entwicklung zu testen – noch bevor sie für Nutzer veröffentlicht werden. Außerdem ist dies der beste Weg, Leistungsabfälle zu erkennen, bevor sie auftreten.
Mit den folgenden Tools können Sie die Core Web Vitals in einer Testumgebung messen:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome-Entwicklertools | (verwenden Sie stattdessen TBT) | ||
| Lighthouse | (verwenden Sie stattdessen TBT) |
Die Messung im Labor ist ein wesentlicher Bestandteil für die Bereitstellung großartiger Ergebnisse, sie ist aber kein Ersatz für die Messung vor Ort.
Die Leistung einer Website kann je nach Gerätefunktionen, Netzwerkbedingungen, anderen Prozessen, die möglicherweise auf dem Gerät ausgeführt werden und wie Nutzer mit der Seite interagieren, erheblich 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 dazu, wie Sie Ihre Seiten für jeden der Core Web Vitals optimieren:
Andere Web Vitals
Die Core Web Vitals sind entscheidende Messwerte, um die Nutzerfreundlichkeit zu verbessern. Es gibt aber auch noch andere Messwerte.
Diese anderen Messwerte können als Proxy oder als ergänzende Messwerte für die drei Core Web Vitals dienen, um einen größeren Teil des Erlebnisses zu erfassen oder ein bestimmtes Problem zu diagnostizieren.
Die Messwerte Time to First Byte (TTFB) und First Contentful Paint (FCP) sind beispielsweise wichtige Aspekte des Ladevorgangs und beide nützlich für die Diagnose von LCP-Problemen (langsame Serverantwortzeiten bzw. Ressourcen, die das Rendering blockieren).
Auch ein Messwert wie Total Blocking Time (TBT) ist ein Lab-Messwert, der entscheidend ist, um potenzielle Interaktivitätsprobleme zu erkennen und zu diagnostizieren, die sich auf INP auswirken können. Sie sind jedoch nicht in den Core Web Vitals-Werten enthalten, da sie nicht feldmessbar sind und auch kein nutzerorientiertes Ergebnis liefern.
Änderungen bei Web Vitals
Web Vitals und Core Web Vitals sind die besten 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 es sollte in Zukunft Verbesserungen oder Ergänzungen erwartet werden.
Die Core Web Vitals sind für alle Webseiten relevant und werden in relevanten Google-Tools präsentiert. Änderungen an diesen Messwerten haben weitreichende Auswirkungen. Daher sollten Entwickler damit rechnen, dass die Definitionen und Grenzwerte der Core Web Vitals stabil sind, dass Aktualisierungen vorab angekündigt werden und ein kalkulierbarer jährlicher Ablauf eingehalten wird.
Die anderen Web Vitals sind oft kontext- oder toolsspezifisch und möglicherweise experimenteller als die Core Web Vitals. Daher können sich ihre Definitionen und Grenzwerte mit größerer Häufigkeit ändern.
Bei allen Web Vitals werden die Änderungen in diesem öffentlichen CHANGELOG deutlich dokumentiert.