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 - 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-vitals
Neos package for WebVitals real user monitoring. Contribute to techdivision/web-vitals development by creating an account on GitHub.

 

Wir freuen uns über jedes Feedback und sind gespannt, auf die Erfahrungen mit unserem Plugin. Zudem hoffen wir, dass wir einen Einblick in das Thema Browser-Performance und seine Wichtigkeit geben konnten. 

 

Verwandte Artikel

Welcome to the Card Family: Neos Card Package

Navigationen und Menüs sind lange schon nicht mehr der wichtigste Weg, sich durch eine Website zu arbeiten. Und "Teaser" sind so 2010. 
Cards sind mittlerweile zum unverzichtbaren Element im Web geworden. Kaum eine Google-Suchanfrage kommt ohne sie aus. 

Jetzt gibt es Cards auch für Neos: Gewohnt intuitiv zu bearbeiten. Schlank und effizient in der Pflege.
Mehr lesen

JobPostings für Neos: 
Alles, was Sie für ein erfolgreiches Online-Recruiting benötigen!

Eine der größten Herausforderungen für Unternehmen ist, die richtigen Mitarbeiter zu finden. Spätestens seit Google seine Job-Suche auch in Deutschland anbietet, sollte man seine Hausaufgaben machen und Jobs auf der Unternehmens-Website richtig darstellen und auszeichnen. Für Neos haben wir dafür jetzt entsprechende Packages gebaut und veröffentlicht.
Mehr lesen

Neueste Posts

Neuer Adobe Report “Die Zukunft des E-Commerce” Magento Commerce 2.4 – Was bietet die neueste Version des führenden Open Source Shopsystems? Magento wird von den Analysten von Gartner zum vierten Mal in Folge als Leader ausgezeichnet Flex Für Mehrspalter: Pimp-MY-NEOS Adobe Commerce Summer Camp für den Mittelstand 

Archiv

September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juni Mai April März Februar Januar
Dezember November Oktober September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juni Mai April Februar Januar
Dezember November Oktober September August Juli Juni März Februar
Oktober September August Juli Juni Mai April März Januar
Dezember November Oktober September August Juli Mai April Februar
November Oktober September April Februar
Dezember September Juni Mai Februar Januar
Juli Mai April März Februar Januar
September August Juli März
Oktober September Juli Juni Mai März Februar
Februar

Kategorien

E-CommerceSAFeAgileNew WorkRemote WorkScrumKanbanTeamsCoachingOrganisationsentwicklungKollaborationUnternehmensmeldungOnline-MarketingMagento CommerceNeosTYPO3SEOSEAUsability Digitale TransformationAgile ProjektentwicklungCorporate WebAnalyticsKünstliche IntelligenzMobile MarketingProduct Imformation Magagement (PIM)Social MediaVeranstaltungenResearch & DevelopmentDesign
 
powered by YouTube: Beim Abspielen des Videos wird eine direkte Verbindung zu einem Server von YouTube aufgebaut. Näheres erfahren Sie in unserer Datenschutzerklärung

Unser Herz schlägt online -
Deins Auch?

 

Wir stellen uns jeden Tag neuen Heraus-forderungen des Online-Business – immer auf der Suche nach spannenden Lösungs-ansätzen und sinnvollen Technologien. Eine Vielzahl namhafter Kunden vertrauen auf das Online Know-how „Made in Kolbermoor / Rosenheim und München“. 

Lust auf TechDivision? Hier geht zu unseren Stellenanzeigen

eStrategy Magazin


Erfahren Sie mehr zu den Themen E-Commerce, Online-Marketing, Mobile, Projektmanagement, Webentwicklung und E-Recht in unserem kostenlosen Online-Magazin.

Jetzt herunterladen!

Whitepaper:
Agiles Projektmanagement


In unserem kostenlosen Whitepaper versuchen wir Basiswissen und Erfahrungen aus vielen Jahren täglicher Projekt- und Unternehmenspraxis zu vermitteln, mit denen Sie die Anforderungen des Arbeitslebens von Heute besser bewältigen können.

Jetzt herunterladen!

Autor

Erfolgreiche Projekte?

bei uns zählt, ob das Ergebnis stimmt

Autor

Stefan RegnietHead of CMS