Wenn Sie die Web Vitals Ihrer Website verbessern möchten, ist der erste Schritt die Erhebung von Daten. Bei einer umfassenden Analyse werden Leistungsdaten sowohl aus der Praxis als auch aus Laborumgebungen erfasst. Für die Messung von Web Vitals sind nur geringfügige Codeänderungen erforderlich und es können kostenlose Tools verwendet werden.
Web Vitals mit RUM-Daten messen
RUM-Daten (Real User Monitoring) werden auch als Felddaten bezeichnet. Sie erfassen die Leistung der 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, erhalten Sie mit den 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 leicht unterschiedliche Anwendungsfälle:
- Die Chrome DevTools sind in der Livemesswertansicht des Performance-Steuerfelds in den CrUX-Datensatz eingebunden. Wenn Sie Ihre lokale Version mit der Version für echte Nutzer auf derselben Seite vergleichen, können Sie fundiertere Entscheidungen darüber treffen, wo Sie Ihre Fehlerbehebung konzentrieren sollten. Wenn Sie nur eine einzige Maßnahme ergreifen möchten, um die Web Vitals-Werte Ihrer Website zu messen und zu verbessern, empfehlen wir Ihnen, den Leistungsbereich der Chrome-Entwicklertools zu verwenden.
- In PageSpeed Insights (PSI)-Berichten wird die aggregierte Leistung auf Seiten- und Ursprungsebene in den letzten 28 Tagen erfasst. Außerdem erhalten Sie Vorschläge zur Leistungsverbesserung. PSI ist im Web und als API verfügbar.
- In der Search Console werden Leistungsdaten pro Seite erfasst. Sie eignet sich daher gut zum Ermitteln bestimmter Seiten, die verbessert werden müssen. Im Gegensatz zu PageSpeed Insights enthalten Search Console-Berichte Daten zur bisherigen Leistung. Die Search Console kann nur für Websites verwendet werden, deren Inhaber Sie sind und deren Inhaberschaft Sie bestätigt haben.
- Das CrUX-Dashboard ist ein vordefiniertes Dashboard, in dem CrUX-Daten für einen von Ihnen ausgewählten Ursprung angezeigt werden. Sie basiert auf Data Studio und die Einrichtung dauert etwa eine Minute. Im Vergleich zu PageSpeed Insights und der Search Console enthalten CrUX-Dashboard-Berichte 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 den Einstieg in die Messung von Web Vitals, sie 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 mit Ihrem eigenen RUM zu ergänzen. Von Ihnen selbst erfasste RUM-Daten können detaillierteres und unmittelbareres Feedback zur Leistung Ihrer Website liefern. So lassen sich Probleme leichter erkennen und mögliche Lösungen testen.
Sie können eigene RUM-Daten erheben, indem Sie einen speziellen RUM-Anbieter verwenden oder eigene 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, fragen Sie Ihren RUM-Anbieter, ob er die Überwachung der Core Web Vitals für Ihre Website aktiviert.
Wenn du keinen RUM-Anbieter hast, kannst du deine vorhandene Analysekonfiguration erweitern, um diese Messwerte mithilfe der web-vitals-JavaScript-Bibliothek zu erfassen und Berichte dazu zu erstellen. Diese Methode wird im Folgenden genauer erläutert.
Die JavaScript-Bibliothek von Web Vitals
Wenn Sie eine eigene RUM-Einrichtung für Web Vitals implementieren, ist die JavaScript-Bibliothek web-vitals die einfachste Möglichkeit, Web Vitals-Messwerte zu erheben. web-vitals ist eine kleine, modulare Bibliothek (ca. 2 KB), die eine praktische API zum Erfassen und Melden aller feldmessbaren Web Vitals-Messwerte bietet.
Die Messwerte, aus denen Web Vitals bestehen, werden nicht alle direkt von den integrierten Leistungs-APIs des Browsers bereitgestellt, sondern basieren auf diesen. So wird beispielsweise Cumulative Layout Shift (CLS) mit der Layout Instability API implementiert. Wenn Sie web-vitals verwenden, müssen Sie diese Messwerte nicht selbst implementieren. Außerdem wird sichergestellt, dass die 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.
Datenaggregation
Es ist wichtig, dass Sie die von web-vitals erfassten Messungen erfassen. Wenn diese Daten erfasst, aber nicht erfasst werden, sehen Sie sie nie. Die web-vitals-Dokumentation enthält Beispiele, wie Sie die Daten an einen generischen API-Endpunkt, Google Analytics oder Google Tag Manager senden.
Wenn du bereits ein bevorzugtes Meldetool hast, solltest du dieses verwenden. Andernfalls können Sie Google Analytics kostenlos verwenden.
Wenn Sie überlegen, welches Tool Sie verwenden sollten, sollten Sie sich überlegen, wer Zugriff auf die Daten haben muss. Die größten Leistungssteigerungen erzielen Unternehmen in der Regel, wenn das gesamte Unternehmen und nicht nur eine einzelne Abteilung an der Leistungsverbesserung interessiert ist. Im Artikel Websitegeschwindigkeit funktionsübergreifend beheben erfahren Sie, wie Sie die Zustimmung verschiedener Abteilungen gewinnen.
Dateninterpretation
Bei der Analyse von Leistungsdaten ist es wichtig, auch die Enden der Verteilung zu beachten. RUM-Daten zeigen oft, dass die Leistung stark variiert: Bei einigen Nutzern ist sie schnell, bei anderen langsam. Wenn Sie Daten jedoch mit dem Median zusammenfassen, kann dies zu einer Verzerrung führen.
Bei Web Vitals verwendet Google den Prozentsatz der Seiten mit „guter“ Nutzerfreundlichkeit anstelle von Statistiken wie Median oder Mittelwert, um zu ermitteln, ob eine Website oder Seite die empfohlenen Grenzwerte erfüllt. Damit eine Website oder Seite als „Core Web Vitals-konform“ eingestuft wird, müssen 75 % der Seitenaufrufe für jeden Messwert den Grenzwert „Gut“ erreichen.
Web Vitals mithilfe von 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 Lab-Daten aus Vorproduktionsumgebungen erfasst und daher in Entwicklerworkflows und kontinuierliche Integrationsprozesse einbezogen werden. Beispiele für Tools, mit denen synthetische Daten erhoben werden, sind Lighthouse und WebPageTest.
Hinweise
Es wird immer Abweichungen zwischen den RUM-Daten und den Lab-Daten geben, insbesondere wenn die Netzwerkbedingungen, der Gerätetyp oder der Standort der Lab-Umgebung erheblich von denen der Nutzer abweichen. Beim Erfassen von Lab-Daten zu Web Vitals-Messwerten sind jedoch einige wichtige Punkte zu beachten:
- Der Largest Contentful Paint (LCP), der in Lab-Umgebungen gemessen wird, kann sich von dem unterscheiden, der im Feld mit RUM-Daten gemessen wird. Das kann 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 verschiedenen Nutzern je nach Bildschirm angezeigt werden, oder an anderen Gründen liegen (z. B. Cookie-Banner, Personalisierung).
- Cumulative Layout Shift (CLS), der in Laborumgebungen gemessen wird, kann künstlich niedriger sein als der CLS in RUM-Daten. Viele Lab-Tools laden nur die Seite und interagieren nicht mit ihr. Daher werden nur Layoutverschiebungen erfasst, die beim ersten Laden der Seite auftreten. Im Gegensatz dazu erfasst die von RUM-Tools gemessene CLS unerwartete Layoutverschiebungen, die während der gesamten Lebensdauer der Seite auftreten.
- Interaction to Next Paint (INP) kann nicht in Lab-Umgebungen gemessen werden, da Nutzerinteraktionen mit der Seite erforderlich sind. Daher ist Total Blocking Time (TBT) der empfohlene Lab-Proxy für INP. TBT misst die „Gesamtzeit zwischen First Contentful Paint und Time to Interactive, während der die Seite nicht auf Nutzereingaben reagieren kann“. Obwohl INP und TBT unterschiedlich berechnet werden, spiegeln sie beide einen blockierten Hauptthread während des Bootstrap-Prozesses wider. Wenn der Hauptthread blockiert ist, reagiert der Browser verzögert auf Nutzerinteraktionen.
Tools
Mit diesen Tools können Sie Lab-Messungen der Web Vitals durchführen:
- In den Chrome DevTools werden die Core Web Vitals für eine bestimmte Seite in der Live-Messwertansicht des Bereichs „Leistung“ erfasst und gemeldet. Diese Ansicht bietet Entwicklern Echtzeit-Feedback zur Leistung, während sie Codeänderungen vornehmen.
- Lighthouse: Lighthouse-Berichte zu LCP, CLS und TBT sowie mögliche Leistungsverbesserungen. Lighthouse ist in Chrome DevTools und als NPM-Paket verfügbar. Außerdem kann es mit Lighthouse CI in Continuous-Integration-Workflows eingebunden werden.
- WebPageTest bindet Web Vitals in die Standardberichte ein. WebPageTest ist nützlich, um Informationen zu Web Vitals unter bestimmten Geräte- und Netzwerkbedingungen zu erfassen.