Web Vitals

Shortcut
Google setzt einen Standard um Webseiten zu messen. Die sogenannten Web Vitals sind Faktoren, welche Auskunft über die Nutzererlebnisse einer Webseite geben. Zurzeit sind die wichtigsten Core Web Vitals Metriken LCP, FID und CLS, welche es zu optimieren gilt. Es gibt verschiedene Methoden um eine Webseite zu analysieren, je nachdem ob man Eigentümer der Seite ist oder nicht. 

Web development
SEO
tablet_notebook_with_charts.jpg

Core Web Vitals

Die Core Web Vitals sind die wichtigsten Faktoren auf welches Google achtet um eine Webseite zu platzieren. Jeder der Core Web Vitals repräsentiert eine bestimmte Facette des Nutzererlebnisses, ist in der Praxis messbar und spiegelt die realen Erfahrungen mit einem wichtigen nutzerzentrierten Ergebnis wider.

Google hält sich vor von Zeit zu Zeit die wichtigsten Core Web Vitals neu zu evaluieren. Laut des aktuellsten Satzes von 2020 konzentriert sie sich auf drei Aspekte des Nutzererlebnisses - Laden, Interaktivität und visuelle Stabilität.

web_vitals_lcp.png

Largest Contentful Paint (LCP)

Misst die Ladeleistung. Um ein gutes Nutzererlebnis zu gewährleisten, sollte LCP innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite erfolgen.

 

web_vitals_fib.png

First Input Delay (FID)

Misst die Interaktivität. Um ein gutes Nutzererlebnis zu bieten, sollten die Seiten eine FID von 100 Millisekunden oder weniger haben.

 

web_vitals_cls.png

Cumulative Layout Shift (CLS)

Misst die visuelle Stabilität. Um ein gutes Nutzererlebnis zu bieten, sollten die Seiten einen CLS von 0,1 oder weniger aufweisen.

Um sicherzustellen, dass die empfohlenen Zielvorgaben für die meisten Nutzer erreicht werden, empfiehlt es sich, für jede der oben genannten Metriken den Schwellenwert von 75%.

 

Was tun, wenn die Werte nicht genügend sind?

 

LCP (Loading)

Beim LCP dreht sich alles um die Ladezeit deiner Seite. Es kann durchaus sein das es sich für den Benutzer so anfühlt als würde die Seite schnell laden und trotzdem kann die Messung des LCP Wertes überraschend ausfallen. Hier einige Punkte auf die du achten solltest um einen besseren Score zu erreichen:

  • Bundle Grösse: Je grösser eine Seite ist desto mehr muss über das Internet transferiert werden und desto länger dauert es bis die Seite vollständig geladen ist. Entferne nicht verwendeten Inhalte wie Codestücke, Plug-Ins oder Libraries. Benutze Hilfsmittel um nicht benutzen Code aufzuspüren und reduziere die Bundle Grösse auf ein Minimum.
  • Cache: Ein schneller Pufferspeicher kann sowohl auf Client als auf Server Seite eine nützliche Technik sein um statischen Content eine gewisse Zeit zwischen zu speichern und somit die Antwortzeit zu steigern.
  • CDN: Ein Content Delivery Network (z.B. Cloudflare) kann helfen, wenn der Webseitenbesucher eine lange Distanz zum Server zurücklegen muss. Besucht ein Kunde im amerikanischen Raum eine Webseite die in Europa gehostet ist, liegt es auf der Hand das die Verbindung länger braucht als wenn ein Kunde von Europa aus zugreift.
  • Web Hosting: Mit einer schnelleren Infrastruktur können Anfragen schneller verarbeitet werden. Zuerst ist es sinnvoll die Webseite zu optimieren und erst in einem zweiten Schritt die Ressourcen des Servers zu erhöhen, dies hält die Fixkosten niedrig und löst in der Regel das Problem bei der Ursache.

Quelle: https://web.dev/optimize-lcp

FID (Interactivity)

Den FID Faktor ist bereits etwas abstrakter als der LCP. Der FID misst die Zeit ab der ersten Interaktion (z.B. Klick auf einen Button) bis zur aktuellen Zeit in welcher der Browser in der Lage ist den Event zu verarbeiten. Eine Webseite macht durchaus mehr als der Benutzer auf den ersten Blick sieht. Der FID prüft ob die Webseite auf die Benutzeraktionen zeitschnell reagieren kann oder ob zu viele Hintergrundaufgaben laufen. Um den FID Score in den Griff zu bekommen achte auf folgende Punkte:

  • Long Tasks: Eines der häufigsten Probleme bei JavaScript Applikationen ist vermutlich das zu lange Tasks den Haupt-Thread blockieren. Alle Aufgaben welche den Haupt-Thread länger als 50ms blockieren werden als Long Tasks charakterisiert
  • Web-Worker: Rechenintensive und lange Task die separiert werden können, sollten in unabhängige Web-Worker abgearbeitet werden.
  • Priorisierung: Platziere 3th-party Tools wie Analytics-Scripts ganz an den Schluss. Als erstes sollten die Elemente geladen werden, welche für die Interaktion mit dem Benutzer notwendig sind.

Quelle: https://web.dev/optimize-fid

CLS (Visual Stability)

Der CLS befasst sich mit dem Inhalt auf der Seite, genauer gesagt wie fest bewegen oder verschieben sich Elemente auf der Seite. Dieser Faktor ist der wohl umstrittenste Messwert. Niemand ausser Google selbst weiss genau wie dieser Wert zustande kommt. Es gibt jedoch einige Hinweise auf was ein Webseitenbetreiber achten sollte:

  • Bilder ohne Masse: Bilder sollten immer die beiden Attribute ‘width’ und ‘height’ enthalten.
  • Ads ohne Masse: Analog zu den Bildern sollten auch Ads und iframes diese Attribute aufweisen.
  • Font: Verhindere FOUT und FOIT beim Laden der Schrift aus dem Internet.
  • Dynamischer Content: Sollte wenn möglich unter bestehenden Content eingefügt werden und nicht oberhalb.

Quelle: https://web.dev/optimize-cls

 

Wie messe ich die Web Vitals?

Es gibt eine ganze Reihe von Tools um die Web Vitals von einer Seite zu bestimmen.

 

web_vitals_tools_overview.jpg

PageSpeed Insights

Die wohl einfachste Möglichkeit um eine Webseite zu messen ist der Speed Test von web.dev.

https://pagespeed.web.dev aufrufen, gewünschte Webseite eintragen und Los geht’s. Nach nur wenigen Sekunden erscheint ein ausführlicher Bericht über die wichtigsten Web Vitals Metriken.

Google Search Console

Wenn du der Inhaber einer Webseite bist kannst du deine Webseite mit der Google Search Console verknüpfen. Nach dem verknüpfen erhältst du Zugriff auf die von Google gesammelten Web Vitals Daten von deiner Seite. Sollte die Webseite erst kürzlich aufgeschaltet worden sein, brauchst du noch etwas länger Geduld bis Google dir Daten anzeigen kann.

Anders als wie beim PageSpeed Insight Test erhältst du Zugang zu Daten in der Vergangenheit. Damit kannst du deine Seite besser analysieren und einfach erkennen welche Seite gut und welche noch Verbesserungspotential aufweist.

Zur Google Search Console: https://search.google.com/search-console

Chrome User Experience Report (CrUX)

CrUX ist der offizielle Datensatz des Web Vitals-Programms. Alle benutzerzentrierten Core Web Vitals Metriken werden im Datensatz dargestellt. CrUX-Daten werden von echten Browsern auf der ganzen Welt gesammelt, basierend auf bestimmten Browseroptionen, die die Benutzerberechtigung bestimmen. Es werden eine Reihe von Dimensionen und Metriken erfasst, anhand derer Websitebesitzer bestimmen können, wie Benutzer ihre Websites erleben.

Google Search Console bezieht seine Daten von CrUX. Um die Daten von CrUX direkt abzurufen gibt es verschiedene Möglichkeiten. Die einfachste ist wohl über das Chrome UX Dashboard im Google Datastudio.

Zum Chrome UX Dashboard: http://g.co/chromeuxdash

 

Weitere Messinstrumente (Bonus)

 

Ist die Seite Mobileoptimiert?

Um herauszufinden ob eine bestimmte Webseite für mobile optimiert ist, bzw. ob Google sieht das eine Seite für mobile Geräte geeignet ist, kann ein simpler Test durchgeführt werden. 

Zum Test: https://search.google.com/test/mobile-friendly

Wie sehen Social-Media-Plattformen eine Webseite?

Wenn ein Link von einer Webseite auf einer Plattform wie Facebook, Instagram, oder WhatsApp geteilt wird, zeigt die entsprechende Plattform jeweils eine Voransicht der Seite an. Open Graph ist ein etablierter Standard um Meta-Daten auf einer Seite bereit zu stellen. Anhand dieser Meta-Daten weiss die Plattform wie sie die Voransicht anzeigen kann. Auf der nachfolgenden Seite kann mit nur einem Klick überprüft werden wie die Plattformen eine Webseite sieht und darstellt.

Zum Test: https://www.opengraph.xyz/

 

 

 

 

  Zurück zur Übersicht