Testen von Web Vitals im Browser (eine Schlüsselkompetenz für Entwickler)

Core Web Vitals sind Metriken, die wir zur Bewertung der Leistung von Websites in Bereichen wie Ladegeschwindigkeit, Interaktivität und Layout-Stabilität verwenden. Diese Metriken werden immer wichtiger, um eine gute Benutzererfahrung sicherzustellen, und Google nutzt sie als einen der Faktoren für die Platzierung in den Suchergebnissen.

In unserer Praxis begegnen wir jedoch immer noch Entwicklern, denen das Wissen fehlt, wie man Core Web Vitals zuverlässig im Browser testet. Beim Debugging reicht es nicht aus, nur eine Änderung vorzunehmen, von der wir glauben, dass sie die Metriken verbessern wird. Man muss auch in der Lage sein, die Auswirkungen dieser Änderungen zu testen.

Wir raten dringend davon ab, „blind“ zu optimieren, nach dem Prinzip Versuch und Irrtum, also „ich veröffentliche und warte auf die Auswirkungen in den Nutzerdaten“.

Testen Sie nicht ausschließlich in Lighthouse, das nur synthetische Messungen durchführen kann und zum Beispiel die Metrik INP nicht erfasst und die Metrik CLS nur eingeschränkt.

Das Testen von Core Web Vitals im Browser ergänzt das regelmäßige automatisierte Monitoring der Webgeschwindigkeit, das Sie ebenfalls durchführen sollten.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Website korrekt testen können.

Was sind Core Web Vitals?#

Wiederholung ist die Mutter der Weisheit. Die grundlegenden Core Web Vitals Metriken sind drei:

Core Web Vitals in ihrer ganzen Pracht. Diese Metriken müssen in erster Linie getestet werden.

• Interaction to Next Paint (INP) – die Ladezeit des größten Elements.
• Largest Contentful Paint (LCP) – die Reaktion der Website nach Benutzerinteraktionen.
• Cumulative Layout Shift (CLS) – die Stabilität des Layouts.

Warum sollte man Lighthouse im Browser nicht verwenden?#

Lighthouse kann beim Debugging der Geschwindigkeit hilfreich sein, aber wir haben allgemein viele Vorbehalte dagegen, weshalb wir es auch nicht für das Testen Ihrer Metriken nach Entwickleränderungen empfehlen.

Es misst nämlich keine Benutzer-Metriken, sondern synthetisch, also wie eine Maschine, siehe Unterschiede zwischen Messungen. Damit verbunden ist ein weiteres Problem – die von ihm angegebenen Metriken gelten nur für das erste Laden und das, was im ersten Viewport des Benutzers passiert (CLS misst es daher schlecht, INP überhaupt nicht).

Es ist auch nicht ideal für die Messung von LCP, da es nur einen Kontext (Zustand) testen kann, z.B. eine Website mit Cookie-Banner. In die Vor- und Nachteile des Tools Lighthouse und seiner Metrik LPS vertieft sich Martin Michálek in seinem Artikel Lighthouse Performance Score (LPS): Schönheiten und Fallstricke der Metrik aller Metriken.

Das Tool Lighthouse kann helfen, reicht aber für das Testen im Browser nicht aus.

Wie testet man Core Web Vitals im Browser#

Das grundlegende Werkzeug für unser Testen sind die Entwicklerwerkzeuge („Dev Tools“) im Browser Google Chrome. Diese enthalten weitere, oft gut versteckte Funktionen, die uns die Arbeit erheblich erleichtern.

Konkret werden wir heute über die Web Vitals-Erweiterung für Chrome und das Performance-Panel sprechen.

Web Vitals Chrome Extension#

Der einfachste Weg, die Web Vitals Metriken zu testen, ist, die Web Vitals-Erweiterung im Browser zu öffnen. Diese zeigt die Metriken für jede Seite an, die Sie gerade besuchen.

Wir empfehlen, die Web Vitals-Erweiterung an die Erweiterungsleiste anzuheften, damit Sie sie immer griffbereit haben. Auf der jeweiligen Seite reicht ein Klick auf das Icon, und beim nächsten Laden wird eine Tabelle mit den Metriken angezeigt.

Web Vitals-Erweiterung.

In den Einstellungen der Erweiterung empfehlen wir auch, die Option „Console logging“ zu aktivieren. Dann können Sie fortgeschrittene Informationen zu den einzelnen Metriken direkt im Konsolen-Tab der DevTools debuggen.

Detailprotokollierung in der Konsole mithilfe der Web Vitals-Erweiterung.

Wir nutzen die Web Vitals-Erweiterung zum Testen aller drei Metriken. Ein Vorteil ist, dass Sie im Netzwerk-Panel die Netzwerkgeschwindigkeit drosseln können, um die Metriken unter simulierten Bedingungen zu messen.

Performance-Panel#

Das Performance-Panel hat seit September 2024 ein neues Aussehen und zwei Modi – die Messung des Metrikstatus und die detaillierte Messung.

Metrikstatus im Performance-Panel#

Dieser Modus ermöglicht schnelle Tests, ähnlich wie in der Web Vitals-Erweiterung.

Metrikstatus im Performance-Panel für schnelles Testen der Seite und ihrer Interaktionen.

Lassen Sie uns beschreiben, was auf dem Bild zu sehen ist:

1. Der aktuelle Metrikstatus auf der Seite, der sich bei ihrer Nutzung ändert, und der Vergleich mit Daten aus dem Chrome UX Report.
2. Protokollierungs-Panel für Interaktionen (zur INP-Metrik) oder Layout-Verschiebungen (zur CLS-Metrik).
3. Panel mit der Möglichkeit zur Datenextraktion aus dem Chrome UX Report.
4. Testparameter – wir empfehlen, hier mindestens eine 4-fache CPU-Drosselung und eine langsamere 4G-Verbindung einzustellen.
5. Aufnahme einer detaillierten Messung – Übergang zur vollständigen Aufzeichnung des Ladens oder der Interaktionen mit der Seite. Mehr dazu im folgenden Text.

Detaillierte Messung im Performance-Panel#

Dieses Tool nennen wir liebevoll „Regenwürmer“, wegen der Art und Weise, wie der ausgeführte JavaScript angezeigt wird. Es enthält jedoch viele andere nützliche Registerkarten. Für unsere Zwecke sind die Sektionen „Web Vitals“ (im Bild unten als Nummer 1), „Timings“ (2) und „Experience“ (3) am wichtigsten.

Web Vitals ist die erste Sektion im Performance-Panel, die uns die zeitlichen Angaben der Metriken mitteilt.

Die Sektion Timings ist sehr ähnlich, enthält jedoch im Falle der LCP-Metrik auch wertvolle Informationen, zum Beispiel über das spezifische Element, die Größe und den Typ.

Die Sektion Experience hingegen nutzen Sie am häufigsten beim Testen der CLS-Metrik, da sie eine detaillierte Analyse der gemessenen Layout-Verschiebung auf der Seite anzeigt. Sie müssen nur auf das rote Quadrat klicken, das das Problem markiert, und Informationen wie unten im Bild werden angezeigt.

Fazit#

Denken Sie daran, dass die Optimierung der Core Web Vitals-Metriken unter anderem zu einer guten Benutzererfahrung auf der Website beiträgt. Etwaige Anpassungen zur Verbesserung der Metriken müssen stets getestet werden.