Erste Schritte beim Messen von Web Vitals

Katie Hempenius

Der erste Schritt zu ihrer Verbesserung ist das Erheben von Daten zu den Web Vitals Ihrer Website. Bei einer gut durchdachten Analyse werden Leistungsdaten sowohl aus realen als auch aus Laborumgebungen erhoben. Die Messung von Web Vitals erfordert nur minimale Codeänderungen und kann mit kostenlosen Tools durchgeführt werden.

Web Vitals mit RUM-Daten messen

Real User Monitoring (RUM)-Daten, auch Felddaten genannt, erfassen die Leistung der tatsächlichen Nutzer einer Website. Anhand von RUM-Daten ermittelt Google, ob eine Website die empfohlenen Core Web Vitals-Grenzwerte erfüllt.

Erste Schritte

Wenn Sie kein RUM eingerichtet haben, liefern Ihnen die folgenden Tools schnell Daten zur tatsächlichen Leistung Ihrer Website. Diese Tools basieren alle auf demselben zugrunde liegenden Datensatz (dem Bericht zur Nutzererfahrung in Chrome), haben aber unterschiedliche Anwendungsfälle:

• PageSpeed Insights (PSI): In PageSpeed Insights finden Sie die zusammengefasste Leistung auf Seiten- und Ursprungsebene der letzten 28 Tage. Außerdem finden Sie hier Vorschläge zur Leistungsoptimierung. Wenn Sie nur eine einzige Maßnahme ergreifen möchten, um die Web Vitals Ihrer Website zu messen und zu verbessern, empfehlen wir Ihnen, Ihre Website mit PSI zu prüfen. PSI ist im Web und als API verfügbar.
• Search Console: In der Search Console werden Leistungsdaten auf Seitenbasis erfasst. Sie eignet sich daher gut zur Identifizierung bestimmter verbesserungswürdiger Seiten. Anders als PageSpeed Insights enthalten Search Console-Berichte auch bisherige Leistungsdaten. Die Search Console kann nur auf Websites verwendet werden, deren Inhaber Sie sind und deren Inhaberschaft Sie bestätigt haben.
• CrUX-Dashboard: Das CrUX-Dashboard ist ein vordefiniertes Dashboard, in dem CrUX-Daten für einen Ursprung Ihrer Wahl angezeigt werden. Es basiert auf Data Studio und die Einrichtung dauert etwa eine Minute. Im Vergleich zu PageSpeed Insights und der Search Console enthalten die Berichte im CrUX-Dashboard mehr Dimensionen. So können Daten beispielsweise nach Gerät und Verbindungstyp aufgeschlüsselt werden.

Die oben aufgeführten Tools eignen sich zwar gut für die ersten Schritte bei der 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 werden erfasst

Tools, die auf CrUX basieren, sind zwar ein guter Ausgangspunkt für die Untersuchung der Web Vitals-Leistung, wir empfehlen jedoch dringend, sie durch einen eigenen RUM zu ergänzen. Von Ihnen selbst erfasste RUM-Daten können ein detaillierteres und direktes Feedback zur Leistung Ihrer Website liefern. So lassen sich Probleme leichter erkennen und mögliche Lösungen testen.

Hinweis : In CrUX-basierten Datenquellen werden Daten mit einem Detaillierungsgrad von etwa einem Monat erfasst. Die Details können jedoch je nach Tool leicht variieren. PSI und die Search Console berichten beispielsweise über die in den letzten 28 Tagen beobachtete Leistung, während das CrUX-Dataset und das Dashboard nach Kalendermonat aufgeschlüsselt sind.

Sie können Ihre eigenen RUM-Daten erfassen, indem Sie einen dedizierten RUM-Anbieter verwenden oder Ihre eigenen Tools einrichten.

Spezielle RUM-Anbieter sind auf die Erhebung und Berichterstellung von RUM-Daten spezialisiert. Wenn Sie Core Web Vitals mit diesen Diensten verwenden möchten, bitten Sie Ihren RUM-Anbieter, das Core Web Vitals-Monitoring für Ihre Website zu aktivieren.

Wenn Sie keinen RUM-Anbieter haben, können Sie Ihre bestehende Analyseeinrichtung möglicherweise erweitern, um diese Messwerte mithilfe der web-vitals-JavaScript-Bibliothek zu erfassen und Berichte dazu zu erstellen. Diese Methode wird unten ausführlicher erläutert.

Die JavaScript-Bibliothek „web-vitals“

Wenn Sie eine eigene RUM-Einrichtung für Web Vitals implementieren, lassen sich Web Vitals-Messungen am einfachsten mit der JavaScript-Bibliothek web-vitals erfassen. web-vitals ist eine kleine, modulare Bibliothek (ca. 1 KB), die eine bequeme API zum Erfassen und Melden der feldmessbaren Web Vitals-Messwerte bietet.

Die Messwerte, aus denen die Web Vitals bestehen, werden nicht alle direkt über die integrierten Performance APIs des Browsers angezeigt, sondern fließen auf sie ein. Cumulative Layout Shift (CLS) wird beispielsweise mithilfe der Layout Instability API implementiert. Wenn Sie web-vitals verwenden, müssen Sie sich nicht um die Implementierung dieser Messwerte kümmern. Außerdem wird dadurch sichergestellt, dass die von Ihnen erfassten Daten der Methodik und den Best Practices für jeden Messwert 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 gemessen, aber nicht in Berichten enthalten sind, werden sie nie angezeigt. Die web-vitals-Dokumentation enthält Beispiele, die zeigen, wie die Daten an einen allgemeinen API-Endpunkt, Google Analytics oder Google Tag Manager gesendet werden.

Wenn Sie bereits eines Ihrer Lieblingstools haben, sollten Sie dieses verwenden. Andernfalls ist Google Analytics kostenlos und kann zu diesem Zweck genutzt werden.

Bei der Auswahl des Tools ist es hilfreich, darüber nachzudenken, wer Zugriff auf die Daten haben muss. Unternehmen erzielen in der Regel die größten Leistungssteigerungen, wenn das gesamte Unternehmen und nicht nur eine einzelne Abteilung daran interessiert ist, die Leistung zu verbessern. Unter Funktionsübergreifende Korrektur der Websitegeschwindigkeit erfahren Sie, wie Sie die Zustimmung verschiedener Abteilungen erhalten.

Dateninterpretation

Bei der Analyse von Leistungsdaten ist es wichtig, auf die Ausläufe der Verteilung zu achten. RUM-Daten zeigen häufig, dass die Leistung stark variiert – einige Nutzende arbeiten schnell, andere langsam. Wenn Sie jedoch den Medianwert zum Zusammenfassen von Daten verwenden, lässt sich dieses Verhalten leicht verschleiern.

Im Hinblick auf Web Vitals verwendet Google den Prozentsatz „guter“ Nutzerfreundlichkeit und nicht Statistiken wie Median- oder Durchschnittswerte, um zu bestimmen, ob eine Website oder Seite die empfohlenen Grenzwerte erreicht. Damit eine Website oder Seite die Core Web Vitals-Grenzwerte erfüllt, müssen bei jedem Messwert 75% der Seitenaufrufe den Grenzwert „Gut“ erfüllen.

Web Vitals mit Labdaten messen

Labdaten, auch synthetische Daten genannt, werden in einer kontrollierten Umgebung erfasst und nicht von tatsächlichen Nutzern. Im Gegensatz zu RUM-Daten können Labdaten aus Vorproduktionsumgebungen erfasst und in Entwicklungsworkflows und Continuous-Integration-Prozesse eingebunden werden. Beispiele für Tools, die synthetische Daten erfassen, sind Lighthouse und WebPageTest.

Hinweise

Zwischen den RUM-Daten und den Labdaten kommt es immer zu Abweichungen – insbesondere wenn die Netzwerkbedingungen, der Gerätetyp oder der Standort der Laborumgebung deutlich von denen der Nutzer abweichen. Wenn Sie jedoch insbesondere Labordaten zu Web Vitals-Messwerten erheben möchten, sind einige Dinge zu beachten:

• Cumulative Layout Shift (CLS): Der in einer Laborumgebung gemessene Cumulative Layout Shift kann künstlich niedriger sein als der CLS-Wert in RUM-Daten. CLS ist die Summe aller individuellen Layout Shift-Werte für jeden unerwarteten Layout Shift, der während der gesamten Lebensdauer der Seite auftritt. Die Lebensdauer einer Seite variiert jedoch in der Regel sehr unterschiedlich, je nachdem, ob sie von einem echten Nutzer oder einem synthetischen Tool zur Leistungsmessung geladen wird. Viele Lab-Tools laden nur die Seite – sie interagieren nicht mit ihr. Daher werden nur Layoutverschiebungen erfasst, die beim ersten Seitenaufbau auftreten. Im Gegensatz dazu werden mit den von RUM-Tools gemessenen CLS unerwartete Layoutverschiebungen erfasst, die während der gesamten Lebensdauer der Seite auftreten.
• First Input Delay (FID): First Input Delay kann in Lab-Umgebungen nicht gemessen werden, da Nutzerinteraktionen mit der Seite erforderlich sind. Daher ist Total Blocking Time (TBT) der empfohlene Lab-Proxy für FID. TBT misst die „Gesamtzeit zwischen First Contentful Paint und Zeit bis Interaktivität, während der die Seite nicht auf Nutzereingaben reagiert“. Obwohl FID und TBT unterschiedlich berechnet werden, spiegeln sie einen blockierten Hauptthread während des Bootstrap-Prozesses wider. Wenn der Hauptthread blockiert ist, reagiert der Browser verzögert auf Nutzerinteraktionen. FID misst gegebenenfalls die Verzögerung, die auftritt, wenn ein Nutzer zum ersten Mal versucht, mit einer Seite zu interagieren.

Tools

Mit diesen Tools können Lab-Messungen von Web Vitals erfasst werden:

• Web Vitals-Chrome-Erweiterung:Mit der Chrome-Erweiterung Web Vitals werden die Core Web Vitals (LCP, FID und CLS) für eine bestimmte Seite erfasst und gemeldet. Dieses Tool soll Entwicklern bei Änderungen am Code Echtzeit-Feedback zur Leistung geben.
• Lighthouse:Lighthouse bietet Informationen zu LCP, CLS und TBT und hebt mögliche Leistungsverbesserungen hervor. Lighthouse ist in den Chrome-Entwicklertools, als Chrome-Erweiterung und als npm-Paket verfügbar. Lighthouse kann über Lighthouse CI auch in Continuous-Integration-Workflows eingebunden werden.
• WebPageTest:WebPageTest umfasst Web Vitals in die Standardberichte. Mit WebPageTest können Sie Informationen zu Web Vitals unter bestimmten Geräte- und Netzwerkbedingungen erfassen.