Wenn Sie die Web-Vitals Ihrer Website verbessern möchten, benötigen Sie zuerst relevante Daten. Für eine umfassende Analyse werden Leistungsdaten aus realen und Laborumgebungen erfasst. Für die Messung von Web-Vitals sind nur geringfügige Codeänderungen erforderlich. Außerdem können Sie kostenlose Tools verwenden.
Web Vitals mit RUM-Daten messen
Real User Monitoring-Daten (RUM-Daten), auch als Felddaten bezeichnet, erfassen die Leistung, die tatsächliche Nutzer einer Website erleben. RUM-Daten werden von Google verwendet, um festzustellen, ob eine Website die empfohlenen Core Web Vitals-Grenzwerte erfüllt.
Erste Schritte
Wenn Sie RUM nicht eingerichtet haben, können Sie mit den folgenden Tools schnell Daten zur tatsächlichen Leistung Ihrer Website abrufen. Alle diese Tools basieren auf demselben zugrunde liegenden Datensatz (dem Bericht zur Nutzererfahrung in Chrome), haben aber leicht unterschiedliche Anwendungsfälle:
- Chrome DevTools wird in der Ansicht mit Live-Messwerten des Bereichs „Leistung“ in das CrUX-Dataset eingebunden. Wenn Sie Ihre lokalen Erfahrungen mit den Erfahrungen echter Nutzer auf derselben Seite vergleichen, können Sie fundiertere Entscheidungen darüber treffen, worauf Sie sich bei der Fehlersuche konzentrieren sollten. Wenn Sie nur eine einzige Maßnahme ergreifen möchten, um mit der Messung und Verbesserung der Web-Vitals Ihrer Website zu beginnen, empfehlen wir, das Performance-Panel der Chrome-Entwicklertools zu verwenden.
- PageSpeed Insights (PSI) gibt die aggregierte Leistung auf Seiten- und Ursprungsebene der letzten 28 Tage an. Außerdem erhalten Sie Vorschläge zur Leistungsverbesserung. PSI ist im Web und als API verfügbar.
- In Search Console werden Leistungsdaten seitenweise bereitgestellt. Daher eignet sich das Tool gut, um bestimmte Seiten zu identifizieren, die verbessert werden müssen. Im Gegensatz zu PageSpeed Insights enthalten Search Console-Berichte ältere Leistungsdaten. Die Search Console kann nur für Websites verwendet werden, deren Inhaberschaft Sie bestätigt haben.
- CrUX Vis ist ein vordefiniertes Dashboard, in dem CrUX-Verlaufsdaten für eine URL oder einen Ursprung Ihrer Wahl angezeigt werden (sofern im CrUX-Dataset verfügbar). Sie basiert auf der CrUX History API und die Einrichtung dauert etwa eine Minute. Im Vergleich zu PageSpeed Insights und der Search Console enthält CrUX Vis mehr Daten, z. B. LCP-Unterteile und Navigationstypen.
- CrUX Vis ist ein Dashboard mit Verlaufsdaten, in dem CrUX-Daten für einen Ursprung oder eine URL Ihrer Wahl angezeigt werden. Sie basiert auf der CrUX History API. Im Vergleich zu PageSpeed Insights und der Search Console enthält der CrUX Vis-Bericht mehr Details, z. B. Navigationstypen. Außerdem sind LCP- und RTT-Daten in CrUX Vis verfügbar.
Die oben aufgeführten Tools eignen sich zwar gut für den Einstieg in die Messung von Web-Vitals, können aber auch in anderen Kontexten nützlich sein. Sowohl CrUX als auch PSI sind als API verfügbar und können zum Erstellen von Dashboards und anderen Berichten verwendet werden.
RUM-Daten erheben
CrUX-basierte Tools sind zwar ein guter Ausgangspunkt für die Untersuchung der Web Vitals-Leistung, wir empfehlen jedoch dringend, sie durch eigene RUM-Daten zu ergänzen. Mit RUM-Daten, die Sie selbst erfassen, können Sie detailliertere und unmittelbarere Informationen zur Leistung Ihrer Website erhalten. So lassen sich Probleme leichter erkennen und mögliche Lösungen testen.
Sie können Ihre eigenen RUM-Daten mit einem speziellen RUM-Anbieter oder mit eigenen Tools erfassen.
Spezielle RUM-Anbieter sind auf das Erfassen und Melden von RUM-Daten spezialisiert. Wenn Sie Core Web Vitals mit diesen Diensten verwenden möchten, fragen Sie Ihren RUM-Anbieter, ob er die Überwachung von Core Web Vitals für Ihre Website aktivieren kann.
Wenn Sie keinen RUM-Anbieter haben, können Sie möglicherweise Ihre bestehende Analytics-Einrichtung erweitern, um diese Messwerte mit der web-vitals-JavaScript-Bibliothek zu erfassen und zu melden. Diese Methode wird im Folgenden genauer erläutert.
Die web-vitals-JavaScript-Bibliothek
Wenn Sie Ihre eigene RUM-Einrichtung für Web Vitals implementieren, ist die web-vitals-JavaScript-Bibliothek die einfachste Möglichkeit, Web Vitals-Messwerte zu erfassen. web-vitals ist eine kleine, modulare Bibliothek (~2 KB), die eine praktische API zum Erfassen und Melden der einzelnen feldmessbaren Web Vitals-Messwerte bietet.
Die Messwerte, aus denen sich Web Vitals zusammensetzen, werden nicht alle direkt von den integrierten Leistungs-APIs des Browsers bereitgestellt, sondern darauf aufgebaut. Cumulative Layout Shift (CLS) wird beispielsweise mit der Layout Instability API implementiert. Wenn Sie web-vitals verwenden, müssen Sie diese Messwerte nicht selbst implementieren. Außerdem wird so sichergestellt, dass die von Ihnen erhobenen Daten der Methodik und den Best Practices für die einzelnen Messwerte entsprechen.
Weitere Informationen zur Implementierung von web-vitals finden Sie in der Dokumentation und im Leitfaden Best Practices für die Messung von Web-Vitals im Feld.
Datenaggregation
Es ist wichtig, dass Sie die von web-vitals erfassten Messungen melden. Wenn diese Daten erhoben, aber nicht gemeldet werden, sehen Sie sie nie. Die web-vitals-Dokumentation enthält Beispiele dafür, wie die Daten an einen generischen API-Endpunkt, Google Analytics oder Google Tag Manager gesendet werden.
Wenn Sie bereits ein bevorzugtes Tool für Berichte haben, sollten Sie es verwenden. Falls nicht, können Sie Google Analytics kostenlos für diesen Zweck verwenden.
Bei der Auswahl des Tools ist es hilfreich, darüber nachzudenken, wer Zugriff auf die Daten benötigt. Unternehmen erzielen in der Regel die größten Leistungssteigerungen, wenn das gesamte Unternehmen und nicht nur eine einzelne Abteilung an der Verbesserung der Leistung interessiert ist. Unter Websitegeschwindigkeit funktionsübergreifend optimieren erfahren Sie, wie Sie die Unterstützung verschiedener Abteilungen erhalten.
Dateninterpretation
Bei der Analyse von Leistungsdaten ist es wichtig, auf die Enden der Verteilung zu achten. RUM-Daten zeigen oft, dass die Leistung stark variiert: Einige Nutzer haben schnelle, andere langsame Ladezeiten. Wenn Sie jedoch den Median verwenden, um Daten zusammenzufassen, kann dieses Verhalten verborgen werden.
Bei Web Vitals verwendet Google den Prozentsatz der „guten“ Nutzerfreundlichkeit von Seiten und nicht Statistiken wie Mediane oder Durchschnittswerte, um zu ermitteln, ob eine Website oder Seite die empfohlenen Grenzwerte erfüllt. Damit eine Website oder Seite die Core Web Vitals-Mindestanforderungen erfüllt, müssen 75% der Seitenbesuche für jeden Messwert den Grenzwert „Gut“ erreichen.
Web-Vitals mit Labordaten messen
Labdaten, auch als synthetische Daten bezeichnet, werden in einer kontrollierten Umgebung und nicht von tatsächlichen Nutzern erhoben. Im Gegensatz zu RUM-Daten können Labordaten in Vorproduktionsumgebungen erhoben und daher in Entwickler-Workflows und Continuous Integration-Prozesse eingebunden werden. Beispiele für Tools, mit denen synthetische Daten erhoben werden, sind Lighthouse und WebPageTest.
Hinweise
Es wird immer Abweichungen zwischen RUM-Daten und Labdaten geben, insbesondere wenn sich die Netzwerkbedingungen, der Gerätetyp oder der Standort der Laborumgebung erheblich von denen der Nutzer unterscheiden. Beim Erheben von Labordaten zu Web Vitals-Messwerten sind jedoch einige Besonderheiten zu beachten:
- Der Largest Contentful Paint (LCP), der in Laborumgebungen gemessen wird, kann sich von dem unterscheiden, der mit RUM-Daten im Feld gemessen wird. Das liegt an Verzögerungen beim Laden der Seite (durch Weiterleitungen, Latenz bei der Verbindung zum Server oder nicht im Cache gespeicherte Daten), an unterschiedlichen Inhalten, die je nach Bildschirm für verschiedene Nutzer angezeigt werden, oder an anderen Gründen (z. B. Cookie-Banner, Personalisierung).
- Der Cumulative Layout Shift (CLS), der in Lab-Umgebungen gemessen wird, kann künstlich niedriger sein als der CLS, der in RUM-Daten beobachtet wird. Viele Lab-Tools laden die Seite nur, interagieren aber nicht mit ihr. Daher werden nur Layoutverschiebungen erfasst, die beim ersten Laden der Seite auftreten. Im Gegensatz dazu werden mit RUM-Tools unerwartete Layoutverschiebungen erfasst, die während der gesamten Lebensdauer der Seite auftreten.
- Interaction to Next Paint (INP) kann in Laborumgebungen nicht gemessen werden, da Nutzerinteraktionen mit der Seite erforderlich sind. Daher ist die gesamte Blockierzeit (Total Blocking Time, TBT) der empfohlene Lab-Proxy für INP. TBT gibt die „Gesamtzeit zwischen First Contentful Paint und Zeit bis Interaktivität an, in der die Seite nicht auf Nutzereingaben reagieren kann“. INP und TBT werden zwar unterschiedlich berechnet, aber beide geben Aufschluss über einen blockierten Hauptthread während des Bootstrapping-Prozesses. Wenn der Hauptthread blockiert ist, reagiert der Browser verzögert auf Nutzerinteraktionen.
Tools
Mit diesen Tools können Labormessungen von Web Vitals erfasst werden:
- Die Chrome-Entwicklertools messen und melden die Core Web Vitals für eine bestimmte Seite in der Ansicht mit Live-Messwerten des Bereichs „Leistung“. Diese Ansicht bietet Entwicklern Leistungsfeedback in Echtzeit, während sie Codeänderungen vornehmen.
- Lighthouse: Lighthouse-Berichte enthalten Informationen zu LCP, CLS und TBT sowie mögliche Leistungsverbesserungen. Lighthouse ist in den Chrome DevTools und als npm-Paket verfügbar. Außerdem kann es mit Lighthouse CI in Continuous Integration-Workflows eingebunden werden.
- WebPageTest enthält Web Vitals als Teil der Standardberichte. WebPageTest ist nützlich, um Informationen zu Web-Vitals unter bestimmten Geräte- und Netzwerkbedingungen zu erfassen.