Web Vitals in GA4 – Wie eine schnellere Webseite zu gesteigerten Umsätzen führt
Management Summary
Lassen Sie Ihre Besucher nicht warten. Optimieren Sie Ihre Webseiten Performance mit Web Vitals und Google Analytics 4. Web Vitals können Ihnen helfen, Ihren Shop zu optimieren und so einen höheren Umsatz zu erzielen.
Web Vitals & Website Performance
Jeder mag schnelle Webseiten. Deshalb ist es als Webseitenbetreiber so wichtig, auf die Performance der eigenen Webseite zu achten, insbesondere, wenn die Webseite ein Shop ist oder Dienstleistungen anbietet. Auch Google beurteilt Ihre Webseite in vielen Aspekten. Nicht nur die Benutzerfreundlichkeit ist wichtig, auch die Webseiten Performance wird gemessen. Hierbei verwendet Google unter anderem die Core Web Vitals, um die Performance von Webseiten zu klassifizieren.
Mit wenig Aufwand lassen sich die Web Vitals, die Google als KPI (Key Performance Indicator) für Webseiten Performance heranzieht, auch bei jedem Webseitenaufruf messen. Wenn Nutzer Ihre Website aufrufen, können Sie feststellen, wie gut Ihre Webseite in den Endgeräten der Benutzer performt. Und das Ganze lässt sich dann bequem in Google Analytics 4 auswerten.
Quelle: https://web.dev/vitals/
Für die Optimierung der Seitenladegeschwindigkeit, ist es wichtig, ein wenig die Technik hinter dem Rendern einer Webseite zu verstehen. Dazu hat Google drei Main KPI’s definiert, an denen man sich orientieren kann. Das sind drei Metriken (Zahlenwerte) die einen Ausschlag darüber geben, wie gut die Seite im Browser wiedergegeben wird:
- LCP: Largest Contentful Paint – gibt an, wie lange es dauert, bis das größte Bild oder der größte Textblock innerhalb des aktuell angezeigten Bereichs (=Viewport) geladen wurde. Im Optimalfall liegt der Wert unter 2,5 Sekunden.
- FID: First Input Delay – hier geht es um die Reaktionsfähigkeit des Browsers beim Anzeigen einer Webseite. Also wie schnell auf einen Klick (oder bei einem Tablet auf ein Tippen) reagiert wird. Der Wert sollte unter 100 Millisekunden liegen.
- CLS: Cumulative Layout Shift – Wenn Texte verrutschen, oder Bilder die Position ändern, schlägt diese Metrik auf. Diese KPI gibt Auskunft darüber, ob sich der Content auf der Webseite beim Laden stark ändert. Wenn man etwas liest und der Text plötzlich verrutscht, weil etwas nachlädt, wird diese Metrik in den roten Bereich geraten. Im besten Fall (kein Verrutschen / “Shiften” des Contents) wird 0 übergeben.
Einbaumöglichkeiten
Web Vitals ist eine JavaScript Bibliothek, welche auf Ihrer Webseite eingebunden werden kann. Sie können es entweder selbst hosten, oder ein CDN (Content Delivery Network) verwenden. Cloudflare stellt mit dem Dienst unpkg.com eine kostenlose Ressource zur Verfügung, von der Web Vitals auf jeder Webseite bereitgestellt werden darf.
Wenn also ein unkomplizierter Einbau präferiert wird, kann schnell und einfach mit einer Zeile Code die Bibliothek von Web Vitals über unpkg.com auf der eigenen Seite bereitgestellt werden.
Wenn ein Google Tag Manager Container vorhanden ist:
Der einfachste Weg führt über die GTM Vorlage “Core Web Vitals”:
Die Vorlage kann über den Menüpunkt “Vorlagen” / “Templates” und durch einen Klick auf “In Galerie suchen” gesucht und gefunden werden. Wenn die Vorlage zum Arbeitsbereich hinzugefügt wurde, muss sie noch als Tag angelegt werden:
Bei dem Tag muss eigentlich nichts gesondert eingestellt werden. Es muss nur noch eine Regel (Trigger) festgelegt werden, wann der Tag feuern soll. Am besten wäre es, die Web Vitals immer zu erfassen. Deshalb raten wir den All Pages Trigger anzuwenden:
Wenn diese Änderungen nun veröffentlicht würden, würde noch gar nichts erfasst werden. Durch diesen Custom Template Tag werden lediglich Web Vitals Daten in den dataLayer (die Datenschichtvariable) geschrieben:
Um diese Daten in GA4 zu bekommen, müssen sie aufgefangen werden. Dies kann man mittels Trigger und zusätzlichem GTM Tag erreichen:
Trigger
Bevor der GA4 Tag angelegt wird, müssten noch die Datenschichtvariablen im GTM angelegt werden. Diese werden dann die Daten zur Laufzeit vom Custom Template in den GA4 Tag übermitteln.
Es können folgende Variablen angelegt werden:
| Name der GTM Variable | Datenschichtvariablen-Name |
|---|---|
| dl – webVitalsMeasurement.name | webVitalsMeasurement.name |
| dl – webVitalsMeasurement.id | webVitalsMeasurement.id |
| dl – webVitalsMeasurement.value | webVitalsMeasurement.value |
| dl – webVitalsMeasurement.delta | webVitalsMeasurement.delta |
| dl – webVitalsMeasurement.valueRounded | webVitalsMeasurement.valueRounded |
| dl – webVitalsMeasurement.deltaRounded | webVitalsMeasurement.deltaRounded |
Diese Variablen können dann im GA4 Tag genutzt werden:
GA4 Tag
Wird dieses Setup veröffentlicht, werden die Web Vitals KPI’s an GA4 übermittelt.
Wenn Web Vitals lieber nativ (in den Quellcode der Seite) eingebaut werden soll:
Der folgende Code fügt Web Vitals nativ (also ohne Tag Management System) in Ihre Webseite ein. Voraussetzung für die Funktionalität ist das Einbinden von GA4 über den gtag.
Der Code kann nach dem gtag Code für Google Analytics 4 platziert werden.
Testing
Wenn alles korrekt eingebaut wurde (entweder via GTM oder nativem Einbau), erhält man GA4 HTTPS Streams in der Netzwerkkonsole, die bereits zeigen, dass Web Vitals Daten an Google Analytics 4 übersandt werden:
Bild: Netzwerkkonsole
Die Web Vitals lassen sich in GA4 dann über die folgenden Parameter reporten:
- Event Name: LCP, FID oder CLS
- webvitals_name
- webvitals_id
- webvitals_value
- value
Auswertung und Optimierungsmaßnahmen
Der große Mehrwert beim Übermitteln der Daten in ein Analytics Tool ist, dass man diese Daten mit anderen Informationen verknüpfen kann und somit Segmente bilden und Profile von bestimmten Geräten, Herkunftsländern und Browser/Betriebssystem erstellen kann.
Im folgenden – kurz und knackig – einige Handlungsempfehlungen, wenn man die Web Vitals auswerten möchte.
- Zu hoher LCP: Largest Contentful Paint. Wenn Sie viele Nutzer mit mobilen bzw. technisch schwächeren Geräten oder aus Ländern mit langsamerem Internet besuchen, wäre es bei einem zu hohen LCP ratsam, den oberen Bereich der Webseite anzupassen. Größere Bilder sollten komprimiert oder ersetzt werden.
- Liegt Ihr FID: First Input Delay (Reaktionszeit des Browsers beim Klicken) über 100ms so muss man nach einer möglichen Ursache für diesen Wert suchen. Eine hohe Reaktionszeit kann möglicherweise durch zu viele oder zu komplexe JavaScripts auf der Seite verursacht werden. Zu viele Klick-Listener (Eventlistener) können die Seite ebenfalls verlangsamen, sowie der Einbau von zu vielen geladenen JavaScript Codes. Hier müsste man durch die einzelnen JavaScript Codes auf der Seite durchgehen und gegebenenfalls ein Benchmark bei einigen Codes durchführen. Ein simpler A/B Test (mit einem spezifischen Code und dann ohne) könnte auch aufschlussreich sein.
- Ein zu hoher Wert bei CLS: Cumulative Layout Shift (Content Shift – also wenn Texte verrutschen) könnte auch auf Scripte auf der Webseite hindeuten, die erst spät nachgeladen werden. Dies kann untersucht werden, indem die Browser Entwicklerkonsole herangezogen wird. Zum Beispiel in Chrome, in der Entwicklerkonsole unter “Netzwerk” kann man eine Verzögerung (Throttling) einstellen um zB mit dem Internet von einem 3G Handy zu testen. Dann kann man prüfen, ob Inhalte nach dem vollständigen Laden der Webseite nochmal modifiziert werden.
Fazit:
In der heutigen Zeit und in der Zukunft wird es immer wichtiger, eine schnelle Webseite zu haben. Insbesondere Webshops sollten einen großen Wert darauf legen, Ihren Kunden so wenig Zeit wie möglich zu nehmen, damit diese sich vollständig auf das Angebot konzentrieren können.
Wir helfen Ihnen gerne beim Einbau und auch bei der Auswertung der Web Vitals auf Ihrer Webseite und liefern Ihnen gerne zusätzliche Handlungsempfehlungen zum Optimieren Ihrer Webseite.
