gtmetrix stellt auf lighthouse um und die core web vitals

Das beliebte PageSpeed-Tool GTmetrix setzt seit 16. November auf Googles Lighthouse Messung. Damit ersetzt GTmetrix die veralteten PageSpeed/YSlow-Empfehlungen durch die Lighthouse-Analyse von Google inklusive der neuen Core Web Vitals, dem Industriestandard für moderne Webseiten-Performance-Messung. GTmetrix hat in deren Blogpost zum Update eingeräumt, dass die bisherigen Noten der tatsächlichen Seitenleistung häufig nicht wirklich entsprochen haben und es daher Zeit für eine Erneuerung war.

 

Inhaltsverzeichnis:

  1. Lighthouse? Web Vitals? Googles Ansätze zur Messung von Performance
  2. Was bedeuten LCP, FID und CLS? Web Vitals aufgeschlüsselt.
  3. Was ändert sich nun am GTmetrix Score?
  4. Nachteile von GTmetrix
  5. Alternative Tools – meine Empfehlung

 

1. Was ist Lighthouse und was sind Web Vitals?

Lighthouse ist ein automatisiertes Open-Source-Werkzeug von Google zur Verbesserung der Qualität von Webseiten. Es verfügt neben dem Modul zu Messung der Geschwindigkeit einer Webseite auch rudimentäre Checks in Sachen Barrierefreiheit, sowie für progressive Webanwendungen und SEO, die man jedoch getrost ignorieren sollte.

Lighthouse kann man direkt in Googles Chrome Browser über die Entwickler-Werkzeuge starten oder auf https://web.dev/measure/ die kostenlose, webbasierte Lösung von Google nutzen.

Das besondere an Lighthouse ist, dass es sich viel stärker auf die Benutzererfahrung konzentriert. Statt irgendwelcher synthetischer Werte, setzt Google seit Anfang 2020 auf die sogenannten Core Web Vitals. Diese Core Web Vitals sind ebenfalls die Basis für Googles Page Experience Update, das laut Google Mitte Juni bis Ende August 2021 ausgerollt werden soll.

Im Unterschied zur bisherigen GTmetrix-Messung mittels PageSpeed/YSlow spiegeln diese Metriken also die Geschwindigkeit der Webseite in der Wahrnehmung des Benutzers wider.

Hier kannst du auch nochmal unser Gespräch zu den Core Web Vitals bei HostPress TV anschauen.

Wir reden über die Core Web Vitals, SEO und erlebte Ladezeiten.

 

2. Was bedeuten die neuen Metriken LCP, FID & CLS?

Die drei neuen Metriken der Core Web Vitals, LCP, FID und CLS beziehen sich auf die Aspekte Geschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität.

Core Web Vitals

„Largest Contentful Paint“ (LCP) misst die Ladegeschwindigkeit

Der LCP-Wert ist eine benutzerzentrierte Metrik zur Messung der wahrgenommenen Ladegeschwindigkeit. Sie markiert den Punkt auf der Zeitachse für das Laden der Seite, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde.

Der LCP gibt die Renderzeit des größten im Viewport sichtbaren Bild- oder Textblocks an.

Um eine gute Benutzerfreundlichkeit zu gewährleisten, sollte der LCP innerhalb von 2,5 Sekunden nach dem ersten Ladevorgang der Seite auftreten. Dies gibt dem Benutzer die Möglichkeit schnell zu erkennen, ob die Seite für ihn auch tatsächlich nützlich ist.

„First Input Delay“ (FID) misst die Interaktivität

Der FID ist eine benutzerzentrierte Metrik zur Messung der Reaktionsgeschwindigkeit der Webseite. Er quantifiziert die Verzögerung, die Benutzer erleben, wenn sie versuchen, mit der ladenden Seite zu interagieren.

Der FID-Wert misst die Eingabeverzögerung der Webseite während des Ladevorgangs. Genauer gesagt die Zeit von der ersten Interaktion eines Benutzers mit der Seite bis zu dem Zeitpunkt, an dem der Browser tatsächlich in der Lage ist, als Reaktion auf diese Interaktion mit der Verarbeitung des Event-Handlers zu beginnen.

Um eine gute Benutzererfahrung zu gewährleisten, sollten Seiten eine FID von weniger als 100 Millisekunden aufweisen. Dies hilft sicherzustellen, dass die Seite während des Ladevorgangs benutzbar ist.

„Cumulative Layout Shift“ (CLS) misst die visuelle Stabilität.

Die CLS ist eine benutzerzentrierte Metrik zur Messung der visuellen Stabilität. Sie hilft zu quantifizieren, wie oft Benutzer unerwartete Layoutverschiebungen erfahren.

Der CLS-Wert misst die Gesamtsumme aller einzelnen Layoutverschiebungswerte für jede unerwartete Layoutverschiebung, die während der gesamten Lebensdauer der Seite auftritt. Eine Layoutverschiebung tritt immer dann auf, wenn ein sichtbares Element seine Position ändert.

Um eine gute Benutzererfahrung zu gewährleisten, sollten Seiten einen CLS von weniger als 0,1 aufweisen. Dies trägt dazu bei, dass die Seite aus Nutzersicht ansprechend ist und sich das Layout konsistent verhält.

Wenn Du noch mehr über Googles Page Experience Update und die Web Vitals erfahren willst, solltest Du Dir unbedingt Folge 2 von HostPressTV anschauen, darin haben wir über Google’s Core Web Vitals, WordPress PageSpeed & SEO 2021 gesprochen.

3. Was bedeutet das für den GTmetrix Score?

Die bisherige Notenskala von GTmetrix von A bis F wird beibehalten, aber auf Grundlage der Lighthouse-Metriken komplett neu festgelegt. Diese setzt sich aus der Leistungs- und der Strukturbewertung zusammen:

GTmetrix Score

Der Performance-Score sagt aus, wie gut die Seite aus Benutzersicht abschneidet. Dabei werden laut GTmetrix folgende sechs Metriken mit den angegebenen Gewichten verrechnet:

  • Loading performance (55%)
    • First Contentful Paint (15%)
    • Speed Index (15%)
    • Largest Contentful Paint (25%)
  • Interactivity (40%)
    • Time to Interactive (15%)
    • Total Blocking Time (25%)
  • Visual Stability (5%)
    • Cumulative Layout Shift (5%)

Der Struktur-Score prüft, wie gut die Seite aus technischer Sicht für eine optimale Leistung aufgebaut ist. Dabei werden die technischen Audits aus Googles Lighthouse mit ein paar eigenen Tests von GTmetrix kombiniert und nach Wichtigkeit (aus Sicht der GTmetrix-Entwickler) miteinander verrechnet.

4. Wieso Du GTmetrix aus meiner Sicht nicht verwenden solltest

Ich finde, ein PageSpeed-Tool sollte ein realistisches Bild der Ladezeit einer Webseite liefern und als Unterstützung für die konkrete Optimierung dienen. In beiden Punkten fällt GTmetrix aus meiner Sicht jedoch leider durch!

Denn: GTmetrix setzt für Nutzer ohne Account immer seinen Testserver in Vancouver in Kanada ein, was die Messewerte für deutsche Webseiten extrem verzerrt. Mit einem kostenlosen Account kann man zwar von London aus seine Webseite benchmarken, für eine echte europäische Anbindung aus Frankfurt oder Amsterdam ist jedoch ein Pro-Account notwendig.

Hier mal ein Bericht meiner Webseite vom Standort London aus:

GTmetrix Report

Wenn ich das mit einem Test auf WebPageTest.org vom Standort Frankfurt (EC2) aus vergleiche, sieht man die Abweichung insbesondere bei der Time-To-First-Byte (212ms vs. 150ms) sowie dem LCP (1,0s vs. 0,482s):

Report von webpagetest.org

Daher lassen sich deutsche Webseiten mit GTmetrix nur in der kostenpflichtigen Version sinnvoll bewerten. Dafür gibt es mit webpagetest.org oder Googles Tool unter web.dev/measure/ jedoch bessere und kostenlose Alternativen.

Der zweite Punkt, der mich an GTmetrix stört ist, dass deren Auswertung wenig hilfreich für die konkrete Verbesserung der Webseite ist. Eine Auswertung auf Basis einfacher Metriken ist schön und gut, allerdings kann man über GTmetrix garnicht wirklich zu den Ursachen für schlechte Werte vordringen.

5. Meine Tool-Empfehlung

1. Analyse und Optimierung

Zur Analyse und Optimierung einer Seite nutzt Du daher am besten den Lighthouse-Report in deinem Chrome-Browser. Darüber kannst Du über den Button mit der Beschriftung „View Original Trace“ direkt zum Reiter „Performance“ und den DevTools wechseln.

Dieser Tab kann auf den ersten Blick ein wenig einschüchternd wirken, denn man wird nahezu von Informationen erschlagen. Für die konkrete Optimierung findet man hier jedoch alle relevanten Hinweise und Analysen. Während der Lighthouse-Test nur darüber Auskunft gibt, ob der CLS gut oder schlecht ist, verstecken sich hinter dem Performance-Tab alle Hinweise welche Elemente für den schlechten CLS verantwortlich sind.

Performance-Tag in den DevTools

2. Monitoring und Überwachung

Darüber hinaus empfehle ich ein Tool für die Überwachung der Ladezeiten einzusetzen. Damit kannst Du sicher stellen, dass die Werte auch nach deiner Optimierung dauerhaft im grünen Bereich bleiben und Du kein Problem mit den Google Rankings oder unzufriedenen Nutzern bekommst.

Hierfür solltest Du am besten die Daten aus der Google Search Console nutzen. Denn diese stammen aus dem Bericht zur Nutzererfahrung des Chrome Browsers. Diese enthalten tatsächliche Nutzungsdaten von echten Besuchern deiner Webseite.

Nur diese Werte sind rankingrelevant für die Suchmaschine!

Bericht zu den Core Web Vitals in der Google Search Console

Es ist aus SEO-Sicht also nicht zielführend auf den allgemeinen PageSpeed-Score oder gar ein Google-fremdes PageSpeed-Tool wie den GTmetrix-Score zu optimieren.

Du willst noch mehr über PageSpeed & Web Vitals wissen?

Online-Seminar PageSpeed und Web VitalsIn meinem Online-Seminar PageSpeed & Web Vitals zeige ich dir, was die Core Web Vitals sind und wie diese in Googles User Experience Update eingesetzt werden. Du lernst zu erkennen ob und wo Handlungsbedarf besteht und wie du die Ladezeiten deiner Webseite signifikant verbessern kannst. Im Mittelpunkt des Seminars steht das Verständnis der Web Vitals sowie die Analyse von Seitenaufbau und Ladezeiten sowie die Ableitung konkreter Verbesserungen und Handlungsempfehlungen.

Das PageSpeed-Seminar richtet sich an alle, die hinter die Kulissen des kommenden User Experience Updates blicken wollen und die Core Web Vitals wirklich verstehen wollen. Es bleibt dabei nicht bei einer oberflächlichen Betrachtung, sondern wir tauchen so tief in die Prinzipien und Technologien von Webseiten ein, dass Du diese wirklich verstehst und entsprechend priorisieren und kommunizieren kannst. Du lernst wie das Browser-Rendering funktioniert und was sich hinter Begriffen wie HTTP, HTML, CSS, JavaScript, LCP, FCP, FID, CLS, TTI, TBT, TTFB und so weiter verbirgt und wie man diese gezielt verbessern kann.