UX RANKING: DIE GOOGLE WEBVITALS IN NEOS CMS
Google hat Performance-Kennzahlen festgelegt, die als wichtigste Messgrößen für die Benutzbarkeit einer (beliebigen) Website gelten: https://web.dev/vitals
Kurz darauf kündigten sie an, diese Zahlen auch in ihre Ranking-Bewertung mit aufzunehmen.
Höchste Zeit also, sich damit zu beschäftigen; wie wäre es also, wenn wir diese wichtigen Größen direkt im CMS messen?
WAS SIND DIE WEBVITALS?
Anfang Mai 2020 hat Google in einer Initiative drei entscheidende Kennzahlen festgelegt, die “Core Web Vitals” genannt werden und in einfacher Art und Weise die Nutzbarkeit einer Website darstellen. Wenn sie als wirklicher Verbesserungsfaktor angesehen und verwendet werden, kann jede Website und das Web als ganzes enorm davon profitieren.
Welche Zahlen das sind und was sie bedeuten, haben wir hier zusammengefasst:
1. LCP
Der “Largest Contentful Paint” soll anzeigen, wie schnell eine Seite im Browser sichtbar ist.
Sie misst, wann das größte Element im sichtbaren Bereich des Browsers angezeigt wird.
Hier ein Beispiel: Viele Websites laden große Bilder oder Slider-Elemente sehr weit oben im Browser und oft als größtes sichtbares Element. Muss nun erst viel Javascript-Code laden, damit der Slider angezeigt wird, kann sich diese Kennzahl eher im roten Bereich befinden.
Genaue Erklärung
Möglichkeiten der Verbesserung
2. FID
“First Input Delay” zielt auf Interaktion ab. Wann kann der User die Seite wirklich benutzen? Klickt man beispielsweise auf einen Link, aber der Browser ist noch mit Laden beschäftigt, dann reagiert er auf den Klick erst sehr spät. Das ist für die User Experience genauso schlecht wie eine Seite, die erst sehr spät angezeigt wird.
Genaue Erklärung
Möglichkeiten der Verbesserung
3. CLS
Die dritte Kennzahl heißt “Cumulative Layout Shift” und braucht etwas mehr Erklärung; sie lässt Rückschlüsse darüber zu, ob das Layout stabil aufgebaut ist oder sich oft ändert.
Das obige Beispiel mit dem Slider kann sich für den Besucher folgendermaßen äußern: Er besucht die Seite und beginnt einen sehr interessanten Text zu lesen. Dieser ist aber nur sichtbar, weil er sich auf dem Platz befindet, den eigentlich der Slider einnehmen sollte (welcher aber noch lädt). Wird der Slider nun angezeigt, dann “rutscht” der interessante Text plötzlich nach unten, man muss scrollen, um ihn wiederzufinden. Dasselbe gilt auch für Werbung, die plötzlich erscheint — und wie oft hat man dann schon versehentlich draufgeklickt, obwohl man das eigentlich garnicht vorhatte. Dieses Beispiel zeigt den Einfluss auf die Interaktion, aber auch die Performance leidet. Einfach erklärt verhält es sich im Browser so, dass er erst einmal die Dimensionen der Elemente berechnet, bevor er sie wirklich darstellt. Neuberechnungen der Dimensionen (z.B. durch nachladende Bilder, JavaScript u.a.) führen dazu, dass die Darstellung unterbrochen wird, die Dimensionen neu berechnet werden und dann die Darstellung erst fortgesetzt wird.
Genaue Erklärung
Möglichkeiten der Verbesserung
WEITERE WEBVITALS
Neben den drei genannten wichtigsten Kennzahlen gibt es noch weitere, die für ein optimales Nutzererlebnis relevant sind. Dazu gehören z.B. die “Time to first byte (TTFB)”, welche beschreibt, wie schnell die Seite geladen wird. Oder aber den “First contentful paint (FCP)”, die angibt, wie schnell eine Seite dargestellt wird und die sehr eng mit dem “Largest contentful paint” verwandt ist — aber auch einfacher manipulierbar ist.
WIE KANN MAN SIE MESSEN?
Diese WebVitals lassen sich mit verschiedenen Google-Tools sehr leicht messen. Pagespeed Insights und Lighthouse (Teil der Chrome-Entwicklertools) bieten diese Zahlen direkt an. Auch in der Google Search Console gibt es neuerdings einen entsprechenden Report. Allerdings empfiehlt der Suchmaschinenkonzern, echte Daten von echten Nutzern zu sammeln und auszuwerten (sog. “Real User Monitoring”). Man kann jetzt entgegnen: “Natürlich empfiehlt Google, Daten zu sammeln.” Aber hier geht es nicht um nutzerspezifische Daten oder Tracking von Nutzerverhalten. Es geht um anonymes Tracking von Website-Verhalten.
Und wenn sich das nun in absehbarer Zeit auf das Ranking auswirkt, sollte man beginnen, diese Zahlen ernst zu nehmen.
WIE SIEHT UNSERE LÖSUNG AUS?
Das System unserer Wahl ist Neos CMS — nicht nur weil es gut zu bedienen ist, sondern weil man es dahingehend sehr leicht erweitern kann. Bereits mit der Neos-GoogleAnalytics-Extension lassen sich Analysedaten direkt im Neos Backend für jede Seite anzeigen. Dank des ReactJS Backends lassen sich solche “Views” beliebig individuell programmieren.
Zudem haben wir ein Backend-Modul erstellt, dass eine Gesamtübersicht über die Seite bietet. Auch mit Multi-Site-Setups funktioniert diese Ansicht:
WIE FUNKTIONIERT DAS TRACKING?
Google bietet ein sehr kleines und praktisches JavaScript zum Messen der Daten. Zur Datenerfassung verwenden wir sogenannte Tracking-Pixel. Dies sind winzige, unsichtbare Bilder, die vom Browser eingebunden werden und Daten an den Server liefern. In diesem Fall werden die Daten nicht an dritte gesendet, sondern ganz einfach in Neos gespeichert. Die erfassten Daten sind komplett anonym und messen wie gesagt die Website, nicht das Userverhalten.
WIE FUNKTIONIERT DIE AUSWERTUNG?
Die Auswertung basiert auf dem sog. Real User Monitoring Prinzip. Wir erfassen die Daten der Nutzer und werten sie kumuliert aus. Nicht für jeden User wird jede Metrik erfasst, aber insgesamt kommen in den Bereichen genügend Metriken zustande, um eine gute Aussage treffen zu können, was zur Optimierung wichtig wäre.
Die Installation des Plugins erfolgt ganz einfach über composer:
composer require techdivision/web-vitalsEin entsprechendes Neos Plugin steht unter Github zum Download bereit: https://github.com/techdivision/web-vitals
Autor: Stefan Regniet ist Head of Content Management bei TechDivision. Der Artikel wurde erstmal im TechDivision Blog unter nachfolgendem Link veröffentlicht: https://www.techdivision.com/blog/ux-ranking-die-google-webvitals-in-neos-cms.html
