Veröffentlicht am 4. Mai 2020, zuletzt aktualisiert am 31. Oktober 2024
Entscheidend für den langfristigen Erfolg einer Website ist, wie gut sich Nutzer darauf zurechtfinden und als wie angenehm sie die Website wahrnehmen. Mit Web Vitals können Sie unabhängig davon, ob Sie Geschäftsinhaber, Werbetreibender oder Entwickler sind, die Nutzererfahrung auf Ihrer Website beurteilen und Möglichkeiten zur Verbesserung ermitteln.
Übersicht
Web Vitals ist eine Initiative von Google. Ziel ist es, einheitliche Leitlinien für die Qualitätskriterien anzubieten, die entscheidend für eine optimale Nutzererfahrung beim Surfen im Internet sind.
Google hat im Laufe der Jahre eine Reihe von Tools zur Messung und Berichterstellung der Leistung bereitgestellt. Einige Entwickler sind Experten im Umgang mit diesen Tools, während andere die Fülle an Tools und Messwerten als Herausforderung empfunden haben.
Websiteinhaber müssen keine Leistungsexperten sein, um die Qualität der Nutzererfahrung zu verstehen, die sie ihren Nutzern bieten. Die Web Vitals-Initiative zielt darauf ab, die Landschaft zu vereinfachen und Websites dabei zu helfen, sich auf die wichtigsten Messwerte zu konzentrieren: die Core Web Vitals.
Core Web Vitals
Die Core Web Vitals sind eine Untergruppe der Web Vitals, die für alle Webseiten gelten, von allen Websiteinhabern gemessen werden sollten und in allen Google-Tools angezeigt werden. Jedes Core Web Vital repräsentiert eine bestimmte Facette der Nutzererfahrung, ist in der Praxis messbar und spiegelt das reale Erleben eines wichtigen, den Nutzenden betreffenden Aspekts wider.
Die Messwerte, die in den Core Web Vitals zum Ausdruck kommen, werden sich im Laufe der Zeit weiterentwickeln. Die aktuelle Zusammenstellung deckt drei Aspekte der Nutzererfahrung ab: Ladezeit, Interaktivität und visuelle Stabilität. Folgende Messwerte (und ihre jeweiligen Schwellenwerte) sind enthalten:
- Largest Contentful Paint (LCP): Hiermit wird die Ladeleistung gemessen. Als nutzerfreundlich gilt ein LCP von 2, 5 Sekunden nach dem ersten Laden der Seite.
- Interaction to Next Paint (INP): Hiermit wird die Interaktivität gemessen. Für eine angenehme Nutzung sollten Seiten einen INP-Wert von 200 Millisekunden oder weniger haben.
- Kumulatives Layout Shift (CLS): Hiermit wird die visuelle Stabilität gemessen. Für eine gute Nutzererfahrung sollten Seiten einen CLS-Wert von 0, 1 oder weniger haben.
Wenn Sie dafür sorgen möchten, dass Sie für die meisten Ihrer Nutzer die empfohlenen Messwerte erreichen, genügt es, das 75. Perzentil aller Seitenaufrufe, aufgeschlüsselt nach Mobilgeräten und Desktop-Geräten, zu messen.
Tools, mit denen die Einhaltung der Core Web Vitals bewertet wird, sollten eine Seite als bestanden betrachten, wenn sie die empfohlenen Ziele beim 75. Perzentil für alle drei Core Web Vitals-Messwerte erreicht.
Lebenszyklus
Messwerte für die Core Web Vitals durchlaufen einen Lebenszyklus, der aus drei Phasen besteht: experimentell, ausstehend und stabil.
Jede Phase soll Entwicklern signalisieren, wie sie über die einzelnen Messwerte denken sollten:
- Experimentelle Messwerte sind potenzielle Core Web Vitals, die je nach Tests und Community-Feedback noch erhebliche Änderungen erfahren können.
- Ausstehende Messwerte sind zukünftige Core Web Vitals, die die Test- und Feedbackphase durchlaufen haben und für die ein klar definierter Zeitplan für die Stabilisierung besteht.
- Stabile Messwerte sind die aktuellen Core Web Vitals, die Chrome für eine optimale Nutzererfahrung als unerlässlich betrachtet.
Die Core Web Vitals befinden sich in den folgenden Lebenszyklusphasen:
Experimentell
Wenn ein Messwert zum ersten Mal entwickelt wird und in das Ökosystem gelangt, gilt er als experimenteller Messwert.
Ziel der experimentellen Phase ist es, die Eignung eines Messwerts zu bewerten. Dazu wird zuerst das zu lösende Problem untersucht und möglicherweise wiederholt, was bei früheren Messwerten nicht funktioniert hat. Interaction to Next Paint (INP) wurde beispielsweise ursprünglich als experimenteller Messwert entwickelt, um die Probleme mit der Laufzeitleistung im Web umfassender zu beheben als First Input Delay (FID).
Die experimentelle Phase des Lebenszyklus der Core Web Vitals soll auch Flexibilität bei der Entwicklung eines Messwerts bieten, indem Fehler identifiziert und sogar Änderungen an der ursprünglichen Definition untersucht werden. Außerdem ist dies die Phase, in der das Community-Feedback am wichtigsten ist.
Ausstehend
Wenn das Chrome-Team feststellt, dass ein experimenteller Messwert ausreichend Feedback erhalten hat und sich als wirksam erwiesen hat, wird er zu einem ausstehenden Messwert. INP wurde beispielsweise 2023 vom experimentellen in den ausstehenden Status befördert, mit dem Ziel, FID schließlich einzustellen.
Ausstehende Messwerte bleiben mindestens sechs Monate in dieser Phase, damit das Ökosystem Zeit hat, sich anzupassen. Community-Feedback ist weiterhin ein wichtiger Aspekt dieser Phase, da immer mehr Entwickler den Messwert verwenden.
Stabil
Wenn ein Kandidatenmesswert für Core Web Vitals fertiggestellt ist, wird er zu einem stabilen Messwert. Dann kann der Messwert zu einem Core Web Vital werden.
Stabile Messwerte werden aktiv unterstützt und können Fehlerkorrekturen und Definitionsänderungen unterliegen. Stabile Core Web Vitals-Messwerte werden nicht öfter als einmal pro Jahr geändert. Alle Änderungen an einem Core Web Vital werden in der offiziellen Dokumentation des Messwerts sowie im Änderungsprotokoll des Messwerts deutlich kommuniziert. Core Web Vitals werden auch in alle Bewertungen einbezogen.
Tools zum Messen und Melden von Core Web Vitals
Google ist der Ansicht, dass die Core Web Vitals für alle Web-Erlebnisse entscheidend sind. Daher werden diese Messwerte in allen beliebten Google-Tools angezeigt. In den folgenden Abschnitten wird beschrieben, welche Tools die Core Web Vitals unterstützen.
Tools zur Messung von Core Web Vitals in der Praxis
Im Chrome User Experience Report werden anonymisierte Messdaten von echten Nutzern für jeden Core Web Vital erfasst. So können Websiteinhaber die Leistung schnell bewerten, ohne Analysen manuell auf ihren Seiten einrichten zu müssen. Außerdem werden Tools wie die Chrome-Entwicklertools, PageSpeed Insights und der Core Web Vitals-Bericht der Search Console unterstützt.
| LCP | INP | CLS | |
| Bericht zur Nutzererfahrung in Chrome | |||
| Chrome-Entwicklertools | |||
| PageSpeed Insights | |||
| Search Console (Core Web Vitals-Bericht) |
Die Daten aus dem Chrome User Experience Report bieten eine schnelle Möglichkeit, die Leistung von Websites zu bewerten. Sie enthalten jedoch nicht die detaillierte Telemetrie pro Seitenaufruf, die oft erforderlich ist, um Regressionen genau zu diagnostizieren, zu beobachten und schnell darauf zu reagieren. Daher empfehlen wir dringend, dass Websites ihre eigene Echtzeitüberwachung einrichten.
Core Web Vitals in JavaScript messen
Jeder der Core Web Vitals kann in JavaScript mit Standard-Web-APIs gemessen werden.
Die einfachste Möglichkeit, alle Core Web Vitals zu messen, ist die Verwendung der web-vitals JavaScript-Bibliothek. Dabei handelt es sich um einen kleinen, produktionsfertigen Wrapper um die zugrunde liegenden Web-APIs, mit dem jeder Messwert so gemessen wird, dass er genau mit der Art und Weise übereinstimmt, wie er von allen oben aufgeführten Google-Tools gemeldet wird.
Mit der Bibliothek „web-vitals“ kann jeder Messwert durch Aufrufen einer einzelnen Funktion gemessen werden. Vollständige Nutzungs- und API-Details 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, müssen Sie diese Daten aggregieren und Berichte dazu erstellen, um zu sehen, ob Ihre Seiten die empfohlenen Schwellenwerte für mindestens 75% der Seitenbesuche erreichen.
Einige Analyseanbieter bieten zwar eine integrierte Unterstützung für Core Web Vitals-Messwerte, aber auch bei anderen Anbietern sollten grundlegende Funktionen für benutzerdefinierte Messwerte verfügbar sein, mit denen Sie Core Web Vitals in ihrem Tool messen können.
Entwickler, die diese Messwerte lieber direkt mit den zugrunde liegenden Web-APIs messen möchten, können stattdessen diese Leitfäden für Messwerte verwenden, um Implementierungsdetails zu erhalten:
Weitere Informationen zum Messen dieser Messwerte mit beliebten Analysediensten oder Ihren eigenen internen Analysetools finden Sie unter Best Practices für das Messen von Web Vitals in der Praxis.
Lab-Tools zum Messen von Core Web Vitals
Alle Core Web Vitals sind in erster Linie Messwerte aus der Praxis, aber viele von ihnen können auch im Lab gemessen werden.
Die Lab-Messung ist die beste Möglichkeit, die Leistung von Funktionen während der Entwicklung zu testen, bevor sie für Nutzer veröffentlicht werden. Außerdem ist sie die beste Möglichkeit, Leistungsregressionen zu erkennen, bevor sie auftreten.
Mit den folgenden Tools können die Core Web Vitals in einer Lab-Umgebung gemessen werden:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome-Entwicklertools | |||
| Lighthouse | (stattdessen TBT verwenden) |
Die Lab-Messung ist zwar ein wesentlicher Bestandteil der Bereitstellung optimaler Nutzererlebnisse, ersetzt aber nicht die Messung in der Praxis.
Die Leistung einer Website kann je nach Gerätefunktionen des Nutzers, Netzwerkbedingungen, anderen Prozessen, die möglicherweise auf dem Gerät ausgeführt werden, und der Art und Weise, wie der Nutzer mit der Seite interagiert, erheblich variieren. Tatsächlich kann die Nutzerinteraktion den Wert jedes Core Web Vitals-Messwerts beeinflussen. Nur die Messung in der Praxis kann ein genaues Gesamtbild liefern.
Empfehlungen zur Verbesserung Ihrer Werte
In den folgenden Leitfäden finden Sie spezifische Empfehlungen zur Optimierung Ihrer Seiten für jeden der Core Web Vitals:
Es gibt viele Möglichkeiten, die Core Web Vitals zu verbessern. Jeder Ansatz hat unterschiedliche Auswirkungen, Relevanz und Benutzerfreundlichkeit für jede Situation. Eine kurze Liste der wichtigsten Empfehlungen des Chrome-Teams finden Sie unter Die effektivsten Methoden zur Optimierung der Core Web Vitals.
Andere Web Vitals
Die Core Web Vitals sind zwar die entscheidenden Messwerte, um eine optimale Nutzererfahrung zu verstehen und zu bieten, es gibt aber auch andere unterstützende Messwerte.
Diese anderen Messwerte können als Proxy oder als zusätzliche Messwerte für die drei Core Web Vitals dienen, um einen größeren Teil der Nutzererfahrung zu erfassen oder bei der Diagnose eines bestimmten Problems zu helfen.
Die Messwerte Time to First Byte (TTFB) und First Contentful Paint (FCP) sind beispielsweise beide wichtige Aspekte der Ladezeit und helfen bei der Diagnose von Problemen mit LCP (langsame Serverantwortzeiten bzw. Ressourcen, die das Rendering blockieren).
Ebenso ist ein Messwert wie „Total Blocking Time“ (TBT) ein Lab-Messwert, der entscheidend ist, um potenzielle Probleme mit der Interaktivität zu erkennen und zu diagnostizieren, die sich auf INP auswirken können. Er ist jedoch nicht Teil der Core Web Vitals, da er nicht in der Praxis messbar ist und kein nutzerorientiertes Ergebnis widerspiegelt.
Änderungen an Web Vitals
Web Vitals und Core Web Vitals sind die besten verfügbaren Signale, die Entwickler heute haben, um die Qualität der Nutzererfahrung im Web zu messen. Diese Signale sind jedoch nicht perfekt und zukünftige Verbesserungen oder Ergänzungen sind zu erwarten.
Die Core Web Vitals sind für alle Webseiten relevant und werden in den entsprechenden Google-Tools angezeigt. Änderungen an diesen Messwerten haben weitreichende Auswirkungen. Daher sollten Entwickler davon ausgehen, dass die Definitionen und Schwellenwerte der Core Web Vitals stabil sind und dass Updates im Voraus angekündigt werden und in einem vorhersehbaren jährlichen Rhythmus erfolgen.
Die anderen Web Vitals sind oft kontext- oder toolspezifisch und möglicherweise experimenteller als die Core Web Vitals. Daher können sich ihre Definitionen und Schwellenwerte häufiger ändern.
Alle Änderungen an Web Vitals werden in diesem öffentlichen CHANGELOG dokumentiert.