Veröffentlicht: 4. Mai 2020
Die Optimierung der Nutzererfahrung ist entscheidend für den langfristigen Erfolg jeder Website. Mit Web Vitals können Sie unabhängig davon, ob Sie Geschäftsinhaber, Marketingexperte oder Entwickler sind, die Nutzerfreundlichkeit Ihrer Website beurteilen und Möglichkeiten zur Verbesserung ermitteln.
Übersicht
Web Vitals ist eine Initiative von Google, mit der einheitliche Informationen zu wichtigen Faktoren für eine optimale Nutzererfahrung im Web zur Verfügung gestellt werden.
Google hat im Laufe der Jahre eine Reihe von Tools zur Verfügung gestellt, mit denen sich die Leistung messen und Berichte erstellen lassen. Einige Entwickler sind Experten in der Verwendung dieser Tools, während andere die Vielzahl von Tools und Messwerten als Herausforderung empfinden.
Websiteinhaber müssen keine Leistungsexperten sein, um zu verstehen, wie gut die Nutzererfahrung ist, die sie ihren Nutzern bieten. Die Web Vitals-Initiative soll die Situation vereinfachen und Websites 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 nutzerorientierten 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): Misst die Interaktivität. Für eine angenehme Nutzung sollten Seiten einen INP-Wert von 200 Millisekunden oder weniger haben.
- Cumulative 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.
Bei Tools, mit denen die Einhaltung der Core Web Vitals bewertet wird, sollte eine Seite als bestanden gelten, wenn sie für alle drei Core Web Vitals-Messwerte die empfohlenen Ziele im 75. Perzentil erreicht.
Lifecycle
Messwerte für die Core Web Vitals durchlaufen einen Lebenszyklus mit drei Phasen: experimentell, ausstehend und stabil.
Jede Phase soll Entwicklern signalisieren, wie sie die einzelnen Messwerte betrachten sollten:
- Experimentelle Messwerte sind potenzielle Core Web Vitals, die je nach Tests und Community-Feedback noch erheblichen Änderungen unterliegen 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 Stabilität festgelegt ist.
- Stabile Messwerte sind die aktuellen Core Web Vitals, die Chrome als entscheidend für eine gute Nutzererfahrung ansieht.
Die Core Web Vitals befinden sich in den folgenden Lebenszyklusphasen:
Experimentell
Wenn ein Messwert entwickelt wird und in das Ökosystem aufgenommen wird, gilt er als experimenteller Messwert.
In der Testphase soll die Eignung eines Messwerts bewertet werden. Dazu wird zuerst das zu lösende Problem untersucht und es wird möglicherweise wiederholt, was bei früheren Messwerten nicht berücksichtigt wurde. Interaction to Next Paint (INP) wurde beispielsweise ursprünglich als experimenteller Messwert entwickelt, um Laufzeitleistungsprobleme im Web umfassender als First Input Delay (FID)) zu beheben.
Die Testphase des Core Web Vitals-Lebenszyklus soll auch Flexibilität bei der Entwicklung eines Messwerts bieten, indem Fehler identifiziert und sogar Änderungen an der ursprünglichen Definition vorgenommen werden. Außerdem ist es die Phase, in der Community-Feedback am wichtigsten ist.
Ausstehend
Wenn das Chrome-Team feststellt, dass ein experimenteller Messwert ausreichend Feedback erhalten hat und seine Wirksamkeit nachgewiesen wurde, wird er zu einem anstehenden Messwert. So wurde INP 2023 vom experimentellen in den ausstehenden Status hochgestuft, um FID schließlich auszumustern.
Ausstehende Messwerte werden in dieser Phase mindestens sechs Monate lang gespeichert, 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. Ab diesem Zeitpunkt 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 höchstens einmal pro Jahr geändert. Jede Änderung an einem Core Web Vital wird in der offiziellen Dokumentation des Messwerts sowie im zugehörigen Changelog deutlich kommuniziert. Core Web Vitals werden auch in allen Prüfungen berücksichtigt.
Tools zum Messen und Melden von Core Web Vitals
Google ist der Ansicht, dass die Core Web Vitals für alle Web-Erlebnisse von entscheidender Bedeutung sind. Daher werden diese Messwerte in allen beliebten Tools angezeigt. In den folgenden Abschnitten wird beschrieben, welche Tools die Core Web Vitals unterstützen.
Feldtools zum Messen der Core Web Vitals
Im Chrome User Experience Report werden anonymisierte Messdaten von echten Nutzern für jedes Core Web Vital erfasst. Mithilfe dieser Daten können Websiteinhaber die Leistung ihrer Website schnell bewerten, ohne Analysen auf ihren Seiten manuell 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 | |
| Chrome User Experience Report | |||
| 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 häufig erforderlich ist, um Leistungsabfälle genau zu diagnostizieren, zu überwachen und schnell darauf zu reagieren. Daher empfehlen wir dringend, dass Websites ihr eigenes Real-User-Monitoring 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 JavaScript-Bibliothek web-vitals. Sie ist ein kleiner, produktionsreifer Wrapper für die zugrunde liegenden Web-APIs, mit dem jeder Messwert so gemessen wird, dass er genau mit den Angaben in allen oben aufgeführten Google-Tools übereinstimmt.
Mit der web-vitals-Bibliothek kann jeder Messwert durch Aufrufen einer einzelnen Funktion gemessen werden. Eine vollständige Nutzungsdokumentation 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 web-vitals-Bibliothek verwendet wird, um Ihre Core Web Vitals-Daten zu erfassen und an einen Analytics-Endpunkt zu senden, müssen Sie diese Daten aggregieren und Berichte erstellen, um zu sehen, ob Ihre Seiten bei mindestens 75% der Seitenaufrufe die empfohlenen Grenzwerte erreichen.
Einige Analyseanbieter bieten integrierte Unterstützung für Core Web Vitals-Messwerte. Aber auch bei Anbietern, die das nicht tun, sollten grundlegende Funktionen für benutzerdefinierte Messwerte vorhanden sein, mit denen Sie Core Web Vitals in ihrem Tool erfassen können.
Entwickler, die diese Messwerte lieber direkt mit den zugrunde liegenden Web-APIs erfassen möchten, können stattdessen diese Messwertleitfäden für Implementierungsdetails verwenden:
Weitere Informationen zum Messen dieser Messwerte mit beliebten Analysediensten oder Ihren eigenen Analysetools finden Sie unter Best Practices für die Messung von Web-Vitals in der Praxis.
Labortools zum Messen der Core Web Vitals
Alle Core Web Vitals sind in erster Linie Feldmesswerte, viele von ihnen lassen sich aber auch im Labor messen.
Lab-Tests sind die beste Möglichkeit, die Leistung von Funktionen während der Entwicklung zu testen, bevor sie für Nutzer veröffentlicht werden. Außerdem lassen sich so Leistungsregressionen am besten erkennen, bevor sie auftreten.
Mit den folgenden Tools lassen sich die Core Web Vitals in einer Testumgebung messen:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome-Entwicklertools | |||
| Lighthouse | (verwenden Sie stattdessen TBT) |
Labormessungen sind zwar ein wichtiger Bestandteil der Entwicklung ansprechender Websites, ersetzen aber nicht die Messungen im Feld.
Die Leistung einer Website kann je nach den Gerätefunktionen eines Nutzers, den 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 sich die Nutzerinteraktion auf die Werte aller Core Web Vitals-Messwerte auswirken. Nur mit Feldtests lässt sich ein umfassendes Bild erhalten.
Empfehlungen zur Verbesserung Ihrer Werte
Die folgenden Leitfäden enthalten spezifische Empfehlungen zur Optimierung Ihrer Seiten für die einzelnen Core Web Vitals:
Es gibt viele Möglichkeiten, die Core Web Vitals zu verbessern. Jeder Ansatz hat je nach Situation unterschiedliche Auswirkungen, Relevanz und Benutzerfreundlichkeit. Eine kurze Liste der wichtigsten Empfehlungen des Chrome-Teams finden Sie unter Effektivste Methoden zur Optimierung der Core Web Vitals.
Weitere Web Vitals
Die Core Web Vitals sind zwar die wichtigsten Messwerte, um eine gute Nutzererfahrung zu verstehen und zu ermöglichen, 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 Nutzerfreundlichkeit zu erfassen oder ein bestimmtes Problem zu diagnostizieren.
Die Messwerte Time to First Byte (TTFB) und First Contentful Paint (FCP) sind beispielsweise beide wichtige Aspekte der Ladezeit und können zur Diagnose von Problemen mit LCP (langsame Serverantwortzeiten bzw. renderblockierende Ressourcen) verwendet werden.
Ebenso ist eine Labormetrik wie die Total Blocking Time (TBT) unerlässlich, um potenzielle Interaktivitätsprobleme zu erkennen und zu diagnostizieren, die sich auf INP auswirken können. Sie sind jedoch nicht Teil der Core Web Vitals, da sie nicht in der Praxis messbar sind und kein nutzerorientiertes Ergebnis widerspiegeln.
Änderungen bei Web Vitals
Web Vitals und Core Web Vitals sind die besten verfügbaren Signale, mit denen Entwickler die Nutzerfreundlichkeit im Web messen können. Diese Signale sind jedoch nicht perfekt und es ist mit zukünftigen Verbesserungen oder Ergänzungen zu rechnen.
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 Grenzwerte der Core Web Vitals stabil sind und Updates mit Vorlauf 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 Grenzwerte häufiger ändern.
Änderungen an den Web-Vitals werden in diesem öffentlichen CHANGELOG dokumentiert.