Für den langfristigen Erfolg einer Website ist die Optimierung der Nutzererfahrung der Schlüssel zum Erfolg. Unabhängig davon, ob Sie Geschäftsinhaber, Werbetreibender oder Entwickler sind, können Sie mit Web Vitals die Nutzererfahrung auf Ihrer Website messen und Verbesserungsmöglichkeiten erkennen.
Übersicht
Web Vitals ist eine Initiative von Google, die einheitliche Leitlinien für die Qualität von Signalen bereitstellt, die für eine positive Nutzererfahrung im Web unerlässlich sind.
Google stellt im Laufe der Jahre eine Reihe von Tools zur Verfügung, mit denen Sie die Leistung messen und Berichte dazu erstellen können. Einige Entwickler sind Experten im Umgang mit diesen Tools, während andere feststellen, dass es schwierig ist, mit der Vielzahl an Tools und Messwerten Schritt zu halten.
Websiteinhaber sollten keine Leistungsexperten sein, um die Qualität der Nutzererfahrung zu verstehen. Ziel der Web Vitals-Initiative ist es, die Übersichtlichkeit zu vereinfachen und Websites dabei zu helfen, sich auf die wichtigsten Messwerte zu konzentrieren: die Core Web Vitals.
Core Web Vitals
Core Web Vitals sind eine Untergruppe der Web Vitals, die für alle Webseiten gelten und von allen Websiteinhabern gemessen werden sollten. Sie werden in allen Google-Tools verwendet. Jeder Core Web Vitals-Bericht repräsentiert eine bestimmte Facette der Nutzererfahrung, ist in der Praxis messbar und spiegelt die reale Erfahrung eines wichtigen nutzerorientierten Ergebnisses wider.
Die Core Web Vitals-Messwerte ändern sich mit der Zeit. Die aktuellen Messwerte für 2020 konzentrieren sich auf drei Aspekte der Nutzererfahrung: Ladevorgang, Interaktion und visuelle Stabilität. Sie umfassen die folgenden Messwerte und ihre jeweiligen Grenzwerte:
- Largest Contentful Paint (LCP): Misst die Ladeleistung. Für eine gute Nutzerfreundlichkeit sollte der LCP innerhalb von 2, 5 Sekunden nach dem ersten Laden der Seite ausgeführt werden.
- Interaction to Next Paint (INP): misst die Interaktivität. Für eine gute Nutzerfreundlichkeit sollten Seiten einen INP-Wert von 200 Millisekunden oder weniger haben.
- Cumulative Layout Shift (CLS): misst die visuelle Stabilität. Aus Gründen der Nutzerfreundlichkeit sollten Seiten einen CLS-Wert von 0.1. oder weniger haben.
Damit Sie für die meisten Nutzer das empfohlene Ziel für diese Messwerte erreichen, eignet sich dazu das 75. Perzentil der Seitenaufbauvorgänge, segmentiert nach Mobil- und Desktopgeräten.
Bei Tools zur Bewertung der Core Web Vitals-Compliance sollte eine Seitenübergabe berücksichtigt werden, wenn sie im 75. Perzentil die empfohlenen Ziele für alle drei Core Web Vitals-Messwerte erfüllt.
<ph type="x-smartling-placeholder">Lifecycle
Die Messwerte im Core Web Vitals-Track durchlaufen einen Lebenszyklus, der aus drei Phasen besteht: experimentell, ausstehend und stabil.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Jede Phase dient dazu, Entwicklern zu signalisieren, wie sie über die einzelnen Messwerte nachdenken sollten:
- Experimentelle Messwerte sind potenzielle Core Web Vitals, die aufgrund von Tests und Community-Feedback möglicherweise noch erheblich geändert werden.
- Ausstehende Messwerte sind zukünftige Core Web Vitals, die die Test- und Feedbackphase bestanden haben und nach einem klar definierten Zeitplan für eine stabile Entwicklung aufgestellt werden.
- Stabile Messwerte sind die aktuellen Core Web Vitals, die Chrome als unverzichtbar für eine positive Nutzererfahrung erachtet.
Die Core Web Vitals befinden sich in folgenden Lebenszyklusphasen:
Experimentell
Wenn ein Messwert neu entwickelt wurde und eingeführt wird, gilt er als experimenteller Messwert.
Der Zweck der Testphase besteht darin, die Fitness einer Metrik zu bewerten, indem Sie zunächst das zu lösende Problem untersuchen und möglicherweise darüber iterieren, welche vorherigen Metriken möglicherweise nicht behoben wurden. Interaction to Next Paint (INP) wurde beispielsweise ursprünglich als experimenteller Messwert entwickelt, um die im Web vorhandenen Laufzeitleistungsprobleme umfassender zu beheben als First Input Delay (FID).
Die Testphase des Core Web Vitals-Lebenszyklus dient auch dazu, die Entwicklung eines Messwerts flexibler zu gestalten. Dazu werden Fehler identifiziert und sogar Änderungen an der ursprünglichen Definition untersucht. In dieser Phase ist das Feedback der Community am wichtigsten.
Ausstehend
Wenn das Chrome-Team feststellt, dass ein experimenteller Messwert ausreichend Feedback erhalten und seine Wirksamkeit erwiesen hat, wird er zu einem ausstehenden Messwert. INP beispielsweise wurde 2023 vom experimentellen Status in den Status „Ausstehend“ hochgestuft, um FID endgültig einzustellen.
Ausstehende Messwerte werden in dieser Phase mindestens sechs Monate lang aufbewahrt, damit das System genügend Zeit zur Anpassung hat. Das Feedback der Community spielt in dieser Phase nach wie vor eine wichtige Rolle, da immer mehr Entwickler den Messwert verwenden.
Stabil
Wenn ein Core Web Vitals-Kandidat festgelegt ist, wird er zu einem stabilen Messwert. Ab diesem Zeitpunkt kann der Messwert ein Core Web Vitals-Messwert werden.
Stabile Messwerte werden aktiv unterstützt und können Fehlerkorrekturen und Definitionsänderungen unterliegen. Stable Core Web Vitals-Messwerte ändern sich nur einmal pro Jahr. Jede Änderung an einem Core Web Vital wird in der offiziellen Dokumentation des Messwerts sowie im Änderungsprotokoll des Messwerts klar kommuniziert. Core Web Vitals sind auch in allen Bewertungen enthalten.
<ph type="x-smartling-placeholder">Tools zum Messen und Melden von Core Web Vitals
Google ist der Ansicht, dass die Core Web Vitals für alle Webauftritte von entscheidender Bedeutung sind. Aus diesem Grund strebt es das Unternehmen an, diese Messwerte in allen gängigen Tools bereitzustellen. In den folgenden Abschnitten wird beschrieben, welche Tools die Core Web Vitals unterstützen.
Tools zur Messung von Core Web Vitals
Im Bericht zur Nutzererfahrung in Chrome werden anonymisierte, echte Nutzer-Messdaten für jeden Core Web Vitals-Messwert erhoben. Anhand dieser Daten können Websiteinhaber ihre Leistung schnell bewerten, ohne dass sie Analysen auf ihren Seiten manuell instrumentieren müssen. Außerdem werden Tools wie PageSpeed Insights und der Core Web Vitals-Bericht der Search Console unterstützt.
| LCP | INP | CLS | |
| <ph type="x-smartling-placeholder"></ph> Bericht zur Nutzererfahrung in Chrome | |||
| <ph type="x-smartling-placeholder"></ph> PageSpeed Insights | |||
| <ph type="x-smartling-placeholder"></ph> Search Console (Core Web Vitals-Bericht) |
Die im Bericht zur Nutzererfahrung in Chrome bereitgestellten Daten bieten eine schnelle Möglichkeit, die Leistung von Websites zu bewerten. Sie enthalten jedoch nicht die detaillierte Telemetrie pro Seite, die häufig erforderlich ist, um Regressionen präzise zu diagnostizieren, zu überwachen und schnell darauf zu reagieren. Daher empfehlen wir Websites dringend, ein eigenes Monitoring für echte Nutzer einzurichten.
Core Web Vitals in JavaScript messen
Jeder Core Web Vitals-Wert kann mithilfe standardmäßiger Web-APIs in JavaScript gemessen werden.
<ph type="x-smartling-placeholder">Am einfachsten lassen sich alle Core Web Vitals mit der web-vitals-JavaScript-Bibliothek messen. Dabei handelt es sich um einen kleinen, produktionsreifen Wrapper für die zugrunde liegenden Web-APIs, der jeden Messwert so misst, wie er von allen oben aufgeführten Google-Tools gemeldet wird.
Mit der Bibliothek web-vitals können Sie jeden Messwert messen, indem Sie eine einzelne Funktion aufrufen. Vollständige Informationen zur Verwendung 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 web-vitals-Bibliothek zum Messen und Senden Ihrer Core Web Vitals-Daten an einen Analyseendpunkt verwendet wird, müssen Sie diese Daten im nächsten Schritt aggregieren und Berichte dazu erstellen. So lässt sich feststellen, ob Ihre Seiten die empfohlenen Grenzwerte für mindestens 75% der Seitenaufrufe erfüllen.
Einige Analyseanbieter unterstützen Core Web Vitals-Messwerte zwar bereits integriert, aber auch bei anderen Anbietern sollten grundlegende Funktionen für benutzerdefinierte Messwerte enthalten sein, mit denen Sie Core Web Vitals in ihrem Tool messen können.
Ein Beispiel dafür 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 mit anderen Analysetools finden Sie unter Best Practices für die Messung von Web Vitals in der Praxis.
Mit der Web Vitals-Erweiterung für Chrome können Sie außerdem Berichte zu jedem Core Web Vitals erstellen, ohne Code schreiben zu müssen. Diese Erweiterung verwendet die Bibliothek web-vitals, um jeden dieser Messwerte zu analysieren und Nutzern beim Surfen im Web anzuzeigen.
Diese Erweiterung kann hilfreich sein, um die Leistung Ihrer eigenen Websites, der Websites Ihrer Mitbewerber und des Webs insgesamt zu verstehen.
| LCP | INP | CLS | |
|---|---|---|---|
| Web Vitals | |||
| <ph type="x-smartling-placeholder"></ph> Web Vitals-Erweiterung |
Entwickler, die diese Messwerte lieber direkt mit den zugrunde liegenden Web-APIs messen möchten, können stattdessen diese Leitfäden zu den Messwerten für die Implementierung verwenden:
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.
Lab-Tools zur Messung von Core Web Vitals
Alle Core Web Vitals sind in erster Linie Feldmesswerte, viele davon lassen sich jedoch auch im Labor messen.
Die Labormessung 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 es der beste Weg, Leistungsabfälle zu erkennen, bevor sie auftreten.
Mit den folgenden Tools können Sie die Core Web Vitals in einer Lab-Umgebung messen:
| LCP | INP | CLS | |
|---|---|---|---|
| <ph type="x-smartling-placeholder"></ph> Chrome-Entwicklertools | (stattdessen TBT verwenden) | ||
| <ph type="x-smartling-placeholder"></ph> Leuchtturm | (stattdessen TBT verwenden) |
Labormessungen sind zwar ein wesentlicher Bestandteil für die Bereitstellung erstklassiger Erlebnisse, sind aber kein Ersatz für Feldmessungen.
Die Leistung einer Website kann je nach den Gerätefunktionen des Nutzers, seinen Netzwerkbedingungen, den anderen Prozessen, die möglicherweise auf dem Gerät ausgeführt werden, und der Interaktion des Nutzers mit der Seite stark variieren. Tatsächlich kann der Wert jedes Core Web Vitals-Messwerts durch Nutzerinteraktionen beeinflusst werden. Nur die Feldmessung kann ein vollständiges Bild erfassen.
Empfehlungen zur Verbesserung Ihrer Werte
In den folgenden Leitfäden finden Sie spezifische Empfehlungen zur Optimierung Ihrer Seiten für die einzelnen Core Web Vitals:
Andere Web Vitals
Die Core Web Vitals sind zwar die entscheidenden Messwerte für eine optimale Nutzererfahrung, aber es gibt noch weitere unterstützende Messwerte.
Diese anderen Messwerte können als Proxy oder ergänzende Messwerte für die drei Core Web Vitals dienen, um einen größeren Teil der Nutzererfahrung zu erfassen oder ein bestimmtes Problem zu diagnostizieren.
So sind beispielsweise die Messwerte Time to First Byte (TTFB) und First Contentful Paint (FCP) wichtige Aspekte des Ladens und bei der Diagnose von LCP-Problemen (langsame Serverantwortzeiten bzw. Ressourcen, die das Rendering blockieren), nützlich.
Ebenso ist ein Messwert wie Total Blocking Time (TBT) ein Lab-Messwert, der wichtig ist, um potenzielle Interaktivitätsprobleme, die sich auf INP auswirken können, zu erkennen und zu diagnostizieren. Sie gehören jedoch nicht zu den Core Web Vitals, da sie weder feldmessbar sind noch ein nutzerorientiertes Ergebnis widerspiegeln.
Änderungen an Web Vitals
Web Vitals und Core Web Vitals stellen die besten verfügbaren Signale dar, mit denen Entwickler derzeit die Qualität der Weberfahrung messen können. Diese Signale sind jedoch nicht perfekt und künftige Verbesserungen oder Ergänzungen sind zu erwarten.
Die Core Web Vitals sind für alle Webseiten relevant und werden in allen relevanten Google-Tools verwendet. Änderungen an diesen Messwerten werden weitreichende Auswirkungen haben. Entwickler sollten also davon ausgehen, dass die Definitionen und Grenzwerte der Core Web Vitals beständig sind. Updates müssen vorab angekündigt und mit einem vorhersehbaren jährlichen Rhythmus aktualisiert werden.
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 Grenzwerte häufiger ändern.
Änderungen für alle Web Vitals werden in diesem öffentlichen CHANGELOG dokumentiert.