Veröffentlicht: 4. Mai 2020
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 Nutzerfreundlichkeit auf Ihrer Website beurteilen und Möglichkeiten zur Verbesserung ermitteln.
Übersicht
Web Vitals ist eine Initiative von Google, mit der einheitliche Leitlinien für die Qualitätskriterien angeboten werden, die entscheidend für eine optimale Nutzererfahrung beim Surfen im Internet sind.
Google hat im Laufe der Jahre eine Reihe von Tools zur Leistungsmessung und -auswertung entwickelt. Einige Entwickler sind Experten in der Verwendung dieser Tools, während andere es schwierig finden, mit der Fülle an Tools und Messwerten Schritt zu halten.
Websiteinhaber sollten keine Leistungsexperten sein, um die Qualität der Nutzererfahrung zu verstehen, die sie ihren Nutzern bieten. Die Web Vitals-Initiative soll die Situation vereinfachen und Webmastern helfen, sich auf die wichtigsten Messwerte zu konzentrieren: die Core Web Vitals.
Core Web Vitals
Die Core Web Vitals sind Teil der Web Vitals, die für alle Webseiten gelten, von allen Websiteinhabern gemessen werden sollten und in allen Google-Tools angezeigt werden. Jeder der Core Web Vitals ist ein wichtiger Faktor für die Nutzerfreundlichkeit einer Webseite, im praktischen Einsatz messbar und spiegelt die tatsächliche Nutzererfahrung eines wichtigen nutzerorientierten Ergebnisses wider.
Die Messwerte, aus denen sich die Core Web Vitals zusammensetzen, werden sich mit der Zeit weiterentwickeln. Der aktuelle Satz konzentriert sich auf drei Aspekte der Nutzerfreundlichkeit: Ladezeit, Interaktivität und visuelle Stabilität. Er umfasst die folgenden Messwerte (und die zugehörigen Grenzwerte):
- Largest Contentful Paint (LCP): Hiermit wird die Ladeleistung gemessen. Für eine gute Nutzerfreundlichkeit sollte der LCP innerhalb von 2, 5 Sekunden nach Beginn des Seitenaufbaus erreicht werden.
- Interaction to Next Paint (INP): Hiermit wird die Interaktivität gemessen. Für eine gute Nutzerfreundlichkeit sollten Seiten einen INP von 200 Millisekunden oder weniger haben.
- Cumulative Layout Shift (CLS): Hiermit wird die visuelle Stabilität gemessen. Für eine gute Nutzerfreundlichkeit sollte der CLS der Seiten 0, 1 oder weniger betragen.
Damit Sie für die meisten Nutzer das empfohlene Ziel für diese Messwerte erreichen, ist der 75. Perzentilwert der Seitenladezeiten, segmentiert nach Mobil- und Desktopgeräten, ein guter Messwert.
Tools zur Prüfung der Einhaltung der Core Web Vitals-Anforderungen sollten eine Seite als bestanden betrachten, wenn sie die empfohlenen Ziele für alle drei Core Web Vitals-Messwerte im 75. Perzentil erreicht.
Lifecycle
Messwerte im Core Web Vitals-Track durchlaufen einen Lebenszyklus mit drei Phasen: experimentell, ausstehend und stabil.
Jede Phase soll Entwicklern signalisieren, wie sie über die einzelnen Messwerte nachdenken sollten:
- Experimentelle Messwerte sind potenzielle Core Web Vitals, die sich je nach Test und Community-Feedback noch erheblich ändern können.
- Ausstehende Messwerte sind zukünftige Core Web Vitals, die die Test- und Feedbackphase bestanden haben und für die ein klar definierter Zeitplan für die Stabilisierung vorliegt.
- Stabile Messwerte sind die aktuellen Core Web Vitals, die in Chrome für eine gute Nutzererfahrung als entscheidend erachtet werden.
Die Core Web Vitals befinden sich in den folgenden Lebenszyklusphasen:
Experimentell
Wenn ein Messwert entwickelt wird und in das System aufgenommen wird, gilt er als experimenteller Messwert.
Der Zweck der Testphase besteht darin, die Eignung eines Messwerts zu bewerten. Dazu wird zuerst das zu lösende Problem untersucht und möglicherweise iteriert, was mit früheren Messwerten möglicherweise nicht behoben werden konnte. Interaction to Next Paint (INP) wurde beispielsweise ursprünglich als experimenteller Messwert entwickelt, um die Laufzeitleistungsprobleme im Web umfassender als First Input Delay (FID) anzugehen.
Die experimentelle Phase des Lebenszyklus der Core Web Vitals soll auch Flexibilität bei der Entwicklung eines Messwerts bieten, indem Fehler erkannt und sogar Änderungen an der ursprünglichen Definition geprüft werden. In dieser Phase ist auch das Feedback der Community am wichtigsten.
Ausstehend
Wenn das Chrome-Team feststellt, dass ein experimenteller Messwert ausreichend Feedback erhalten und seine Wirksamkeit bewiesen hat, wird er zu einem ausstehenden Messwert. So wurde beispielsweise der Status von INP 2023 von „experimentell“ in „ausstehend“ geändert, um FIDs nach und nach einzustellen.
Ausstehende Messwerte werden in dieser Phase mindestens sechs Monate lang aufbewahrt, damit sich das System anpassen kann. Das Feedback der Community bleibt in dieser Phase ein wichtiger Aspekt, da immer mehr Entwickler den Messwert verwenden.
Stabil
Wenn ein Core Web Vitals-Kandidatenmesswert abgeschlossen ist, wird er zu einem stabilen Messwert. In diesem Fall kann der Messwert zu einem Core Web Vital werden.
Stabile Messwerte werden aktiv unterstützt und können Fehlerkorrekturen und Definitionen unterliegen. Stabile Core Web Vitals-Messwerte ändern sich nicht mehr als einmal pro Jahr. Alle Änderungen an einem Core Web Vital werden in der offiziellen Dokumentation des Messwerts sowie im Änderungslog des Messwerts klar kommuniziert. Core Web Vitals werden auch in allen Bewertungen berücksichtigt.
Tools zum Erfassen und Erstellen von Berichten zu Core Web Vitals
Google ist der Ansicht, dass die Core Web Vitals für alle Web-Anwendungen entscheidend sind. Deshalb werden diese Messwerte in allen gängigen Tools angezeigt. In den folgenden Abschnitten wird beschrieben, welche Tools die Core Web Vitals unterstützen.
Tools zur Messung der Core Web Vitals
Im Bericht zur Nutzererfahrung in Chrome werden anonymisierte Messdaten von echten Nutzern für jeden Core Web Vital erfasst. Anhand dieser Daten können Websiteinhaber ihre Leistung schnell bewerten, ohne Analysen auf ihren Seiten manuell einrichten zu müssen. Außerdem werden Tools wie die Chrome DevTools, 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 im Bericht zur Nutzererfahrung in Chrome bereitgestellten Daten bieten eine schnelle Möglichkeit, die Leistung von Websites zu bewerten. Sie enthalten jedoch keine detaillierten Telemetriedaten pro Seitenaufruf, die oft erforderlich sind, um Rückgänge genau zu diagnostizieren, zu überwachen und schnell darauf zu reagieren. Wir empfehlen daher dringend, eigene Monitoring-Tools für echte Nutzer einzurichten.
Core Web Vitals in JavaScript messen
Alle Core Web Vitals können in JavaScript mithilfe von Standard-Web-APIs gemessen werden.
Die einfachste Möglichkeit, alle Core Web Vitals zu erfassen, ist die Verwendung der JavaScript-Bibliothek web-vitals. Dabei handelt es sich um einen kleinen, produktionsfertigen Wrapper für die zugrunde liegenden Web-APIs, mit dem jeder Messwert genau so erfasst wird, wie er in allen oben aufgeführten Google-Tools erfasst wird.
Mit der web-vitals-Bibliothek können Sie jeden Messwert mit einer einzigen Funktion erfassen. In der Dokumentation finden Sie vollständige Informationen zur Nutzung und zur API.
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, besteht der nächste Schritt darin, diese Daten zu aggregieren und Berichte zu erstellen, um zu sehen, ob Ihre Seiten die empfohlenen Grenzwerte für mindestens 75% der Seitenaufrufe einhalten.
Einige Analyseanbieter bieten eine integrierte Unterstützung für Core Web Vitals-Messwerte. Aber auch Anbieter, die das nicht tun, sollten grundlegende Funktionen für benutzerdefinierte Messwerte haben, mit denen Sie Core Web Vitals in ihrem Tool messen können.
Entwickler, die diese Messwerte lieber direkt mit den zugrunde liegenden Web-APIs erfassen möchten, können stattdessen diese Messwertanleitungen für Implementierungsdetails verwenden:
Weitere Informationen zum Erfassen dieser Messwerte mit gängigen Analysediensten oder Ihren eigenen Analysetools finden Sie unter Best Practices für die Messung von Web Vitals in der Praxis.
Lab-Tools zur Messung der Core Web Vitals
Alle Core Web Vitals sind in erster Linie Feldmesswerte, viele davon lassen sich aber auch im Lab messen.
Mithilfe von Lab-Tests lässt sich die Leistung von Funktionen während der Entwicklung am besten testen, bevor sie für Nutzer freigegeben werden. Außerdem können Sie so Leistungseinbrüche frühzeitig erkennen.
Mit den folgenden Tools können die Core Web Vitals in einer Lab-Umgebung gemessen werden:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome-Entwicklertools | |||
| Lighthouse | (verwenden Sie stattdessen TBT) |
Labormessungen sind zwar ein wichtiger Bestandteil für eine gute Nutzererfahrung, aber kein Ersatz für Feldmessungen.
Die Leistung einer Website kann je nach Gerätefunktionen, Netzwerkbedingungen, anderen auf dem Gerät ausgeführten Prozessen und der Interaktion des Nutzers mit der Seite stark variieren. Tatsächlich kann sich die Bewertung jedes der Core Web Vitals-Messwerte durch Nutzerinteraktionen ändern. Nur eine Messung vor Ort kann ein genaues und vollständiges Bild liefern.
Empfehlungen zur Verbesserung Ihrer Bewertung
In den folgenden Leitfäden finden Sie 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 unterschiedliche Auswirkungen, Relevanz und Nutzerfreundlichkeit für jede Situation. Im Artikel Die effektivsten Möglichkeiten zur Verbesserung der Core Web Vitals finden Sie eine kurze Liste der wichtigsten Empfehlungen des Chrome-Teams.
Weitere Web Vitals
Die Core Web Vitals sind die wichtigsten Messwerte, um die Nutzerfreundlichkeit zu verstehen und zu verbessern. Es gibt aber auch andere unterstützende 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 der Nutzerfreundlichkeit 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 Ladevorgangs und nützlich, um Probleme mit dem LCP zu diagnostizieren (langsame Serverantwortzeiten oder renderblockierende Ressourcen).
Ebenso ist ein Messwert wie die Gesamte Blockierzeit (Total Blocking Time, TBT) ein wichtiger Messwert für die Erkennung und Diagnose potenzieller Interaktivitätsprobleme, die sich auf die Nutzerfreundlichkeit auswirken können. Sie sind jedoch nicht Teil der Core Web Vitals, da sie nicht feldmessbar sind und auch kein nutzerorientiertes Ergebnis widerspiegeln.
Änderungen an Web Vitals
Web Vitals und Core Web Vitals sind die derzeit 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 allen relevanten 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 dass Updates vorab angekündigt und in einem vorhersehbaren, jährlichen Rhythmus erfolgen.
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 an allen Web Vitals werden in diesem öffentlichen ÄNDERUNGSPROTOKOLL klar dokumentiert.