Bereits letztes Jahr waren die von Google als “Core Web Vitals” festgelegten Metriken für die Nutzungserfahrung von Websites ein heißes Thema. Viele haben schon festgestellt: um gute Werte zu erreichen, ist mehr erforderlich als nur ein Caching-Plugin zu installieren. Am 09. Februar 2021 sind wir daher tiefer in die Thematik eingestiegen.
Inhalt
Nutzerfreundlichkeit
Einer der wichtigsten Aspekte bei der Erstellung einer Website ist die Nutzerfreundlichkeit. Jene sorgt nämlich nicht nur für zufriedene Besucher, sondern wird auch zunehmend von Suchmaschinen für das Ranking herangezogen wie bspw. bei Google:
“[…] Die Nutzerfreundlichkeit einer Seite wird zusammen mit Hunderten anderer Signale bei der Generierung von Suchergebnissen ausgewertet.
Google
Dabei ist die Nutzerfreundlichkeit zwar wichtig, dennoch berücksichtigt Google beim Ranking weiterhin vor allem die angebotenen Informationen, auch wenn die Nutzererfahrung in mancher Hinsicht unterdurchschnittlich ausfällt. […] Wenn allerdings viele Seiten ähnlich relevante Inhalte haben, bekommt die Nutzerfreundlichkeit einen wesentlich höheren Stellenwert für die Sichtbarkeit in der Google Suche.”
Wie wir später sehen werden kann man Nutzerfreundlichkeit anhand von diversen Kriterien messen. Indikatoren können bspw.
- Safe Browsing (Bspw. HTTPS)
- Keine störenden Interstitials (Overlay oder PopUps)
- Für Mobilgeräte optimiert (mobile-friendly)
- Core Web Vitals (ab Mai 2021)
sein. Gerade die Optimierung für “mobile” Geräte ist in der letzten Dekade immer wichtiger geworden. Dies lässt sich bspw. an verschiedenen Änderungen an Googles Suchmaschinen und Ranking Algorithmus nachvollziehen:
| Zeitpunkt | Änderung |
|---|---|
| 12 / 2011 | Start Webseiten mit einem Mobile-Bot zu Crawlen |
| 04 / 2015 | “mobile-friendly” Update |
| 04 / 2016 | Start der Mobile-First Indexierung |
| 03 / 2018 | Start der Umstellung auf Mobile-First Index |
| 09 / 2018 | Mobile Speed Update |
| 05 / 2020 | Bekanntgabe der Web Vitals Initiative |
| Mobile-First Index für alle | |
| 05 / 2021 | Core Web Vitals Update |
Selber Testen
Wichtig ist natürlich zunächst die Bestandsaufnahme: Ist meine Website benutzerfreundlich? Kann ich Benutzerfreundlichkeit überhaupt messen? Und falls ja: Was kann ich diesbezüglich besser machen?
Für die Bestandsaufnahme gibt es verschiedene Tools, welche anhand verschiedenster Kriterien eine Aussage über die Benutzerfreundlichkeit einer Website treffen können. Hier wird nach Eingabe der Website URL oder einem Besuch der Website eine Reihe von Tests durchgeführt. Einige dieser Tools haben wir kurz besprochen:
Pagespeed Insights
Vorteile
- Vergleichbare Ergebnisse
- Felddaten echter Nutzer (bei genügend Traffic in den letzten 30 Tagen)
web.dev
Vorteile
- Vergleichbare Ergebnisse
- Weitere Testmetriken
Lighthouse
Vorteile
- Analyse direkt im eigenen Browser
- Individuelle Analyse z.B. in Bezug auf Caching
Browser-erweiterung im Chrome
Vorteile
- Werte per Icon direkt im Zugriff
- Schnelle Kontrolle
- First Input Delay auswertbar
Webpagetest
Vorteile
- Vergleichbare Werte
- Viele Individuelle Einstellungen
- Detaillierte Analyse möglich
Google Search Console
Vorteile
- Passive Analyse
- Historische Veränderung
- Mehrere URLs
Für alle Tools gilt dabei:
- Nicht nur die Startseite testen! Jede URL muss separat getestet werden.
- Bevorzugt auf mobilen Geräten oder mit emulation mobiler Geräte testen.
- Mehrmals testen und mit den Mittelwerten Arbeiten
Core Web Vitals
Wie bereits erwähnt war in der Vergangenheit die Seitenladezeit (Bspw. “load time” oder “Time to first byte (TTFB)”) oder die Optimierung für mobile Endgeräte oft das Hauptmerkmal zur Bewertung einer Website. Diese Aspekte sind natürlich auch weiterhin sehr wichtig, jedoch gibt es weitere Dinge die auf die Benutzerfreundlichkeit einer Website Einfluss haben.
Google startete 2020 daher das Web Vitals Programm. Hier werden drei Schlüsselkennzahlen bzw. Metriken verwendet um die Nutzerfreundlichkeit bzw. den “Zustand” einer Website zu erfassen:
| Name | Abkürzung | Beschreibt |
|---|---|---|
| Largest Contentful Paint | LCP | Seitenladezeit |
| First Input Delay | FID | Interaktivität |
| Cumulative Layout Shift | CLS | Visuelle Stabilität |
Was sich auf den ersten Blick ggf. etwas kryptisch anhört ergibt jedoch bei genauerer Betrachtung schnell Sinn.
Largest Contentful Paint
Diese Kennzahl misst die Renderzeit des größten Elements, das sich innerhalb des sichtbaren Seitenbereichs befindet. Als Idealwert hat Google 2,5 Sekunden oder schneller festgelegt.
First Input Delay
FID bezeichnet die Dauer, bis die Webseite auf den ersten Input, z.B. der klick auf einen Button reagiert. Die Suchmaschine gibt hier einen Wert von 100 Millisekunden oder schneller vor.
Der Wert wird maßgeblich davon beeinflusst, wann der Nutzer seinen ersten Klick macht: Sehr früh (während die Seite noch lädt und beschäftigt ist) oder eher später (wenn die Seite bereits vollständig geladen ist und den Klick sofort verarbeiten kann).
Cumulative Layout Shift
Die Kennzahl CLS misst, wie stabil das Layout einer Webseite ist und ob sich einzelne Layout-Elemente während der Nutzung verschieben. Google gibt dabei als Idealwert 0,1 oder niedriger vor.
Weitere Web Vitals
Der Vollständigkeit halber soll noch erwähnt werden, dass es noch weitere Kennzahlen gibt:
- Time to First Byte (TTFB)
- First Contentful Paint (FCP)
- Total Blocking Time (TBT)
- Time to Interactive (TTI)
Web Vitals messen
Ein Weg die Web Vitals zu messen ist der Weg über Page Speed Insights. Grundlage hierfür sind tatsächliche Nutzungsdaten, sogenannte “Felddaten”. Dieser erhält Google durch den “Chrome User Experience Report”, welcher optional im Browser Google Chrome aktiviert ist. Wenn eure Seite genügend Traffic in den letzten 28 Tagen von solchen Usern hatte, werden euch die Daten im Page Speed Insights angezeigt.
Über web.dev kann unter Eingabe einer URL ebenfalls gemessen werden.
Weitere Wege finden sich bei web.dev.
Tipps zur Optimierung
Abschließend haben wir uns noch zum Thema Optimierung – insb. bei der Verwendung von WordPress – ausgetauscht.
Auch wenn die Web Vitals weit über das Thema “Ladezeit” hinaus gehen, ist eine Optimierung dieser oft ein sehr guter Ansatz. So kann bspw. die Ladezeit Einfluss auf die Faktoren LCP und CLS haben.
Reduktion
Weniger ist oft mehr. Das gilt auch für Websites. Oft kann durch Verzicht auf visuelle Elemente (bspw. große Slider oder “fancy” Menüs) oder deren Optimierung schnell deutliche Verbesserungen erreicht werden:
- Evtl. nur Systemschriftarten verwenden
- Nur wirklich benötigte Schriftschnitte laden
- Display Swap nutzen
- Lokal ablegen
- Smart Font Reducing
- Ggf. Bold und Italic weglassen (Faux Fett und Faux Italic)
WebP
Bei WebP handelt es sich um ein Recht “junges” Bildformat welches speziell für die Verwendung auf Websites entwickelt worden ist. Es bietet mittleres bis hohes Einsparpotenzial und kann neben konventionellen Bildformaten zusätzlich angeboten werden. Es gibt bereits Plugins, welche diese Aufgabe übernehmen können. Bspw.