Performance-Boost (3): Lighthouse vs. PageSpeed Insights

Eines der wohl am häufigsten eingesetzten Tools zur Performancemessung ist das Open-Source-Tool Lighthouse. Du kannst es auf verschiedene Arten verwenden − unter anderem direkt im Chrome-Browser, als Node CLI-Anwendung oder über PageSpeed Insights.
 

Bei der Nutzung innerhalb von Chrome oder als Node CLI-Anwendung hat man eine gute Kontrolle über die Umgebung, mit der getestet wird (Hardware-Leistung, Netzwerkanbindung, Standort etc.). Es können also recht genaue Labordaten erfasst werden. Das ist wichtig, um den Effekt einer Optimierungsmaßnahme mit möglichst wenig Messungenauigkeiten ermitteln zu können. 

Bei PageSpeed Insights schaut das etwas anders aus (dazu später mehr). Der Einfachheit halber schauen wir uns die Chrome-Integration von Lighthouse an. Die gemessenen Metriken sind im Grunde identisch mit der Node-CLI-Variante. Allerdings kann man direkt loslegen, wenn man schon den Chrome-Browser installiert hat (und das solltest du spätestens jetzt tun, denn Chrome liefert noch viele weitere Tools, die ich dir später noch zeige). 

• Öffne in Chrome die Seite, die du analysieren möchtest.
• Öffne die Entwicklertools (bspw. über die F12-Taste) und gehe auf den Lighthouse-Tab. Wähle jetzt die gewünschten Einstellungen. Man kann mit Lighthouse bspw. den Aufruf über ein mobiles Endgerät oder einen Desktop simulieren und verschiedene Tests aktivieren. Aus Performance-Sicht sollte es mindestens der Haken bei Performance sein. Dazu ist auch die Analyse der Best Practices nicht verkehrt. Um möglichst nah an Webseitenbesuchern zu sein, die eine Seite das erste Mal aufrufen, sollte auch Clear Storage ausgewählt sein, damit uns der Browser-Cache nicht dazwischenfunkt. Lighthouse kann zusätzlich auch Tipps zur Barrierefreiheit (Accessibility) geben. Wir fokussieren uns allerdings in diesem Artikel auf die Performance:

• Klicke jetzt auf „Generate Report“ und lass die Finger von Tastatur und Maus. Lighthouse wird nun die Seite aufrufen und du kannst bei der Messung live zuschauen. Wundere dich also nicht, wenn es auf dem Bildschirm jetzt ein wenig rund geht. Wenn du die mobile Performance der Seite misst, siehst du den Aufruf auf einem simulierten Smartphone-Display.
  Damit Lighthouse eine realistische Messung vornehmen kann, sollten übrigens keine „unüblichen“ Prozesse im Hintergrund laufen, die nicht auch ein normaler Seitenbesucher ausführen würde. Ist dein Rechner gerade unter Volllast, weil der Virenscanner einen Fullscan macht oder die Leitung dicht ist, weil du gerade ein Ubuntu-Image ziehst, wird das Ergebnis nicht realistisch sein.
• Am Ende der Messung bekommst du ein Ergebnis angezeigt, dass auf verschiedenen Scores basiert. Das sieht zum Beispiel so aus:

Die maßgeblichen Messwerte im oberen Bereich geben eine Einschätzung zu den Core Web Vitals  ab. Außerdem werden Optimierungspotenziale im Bereich Diagnostics ausgegeben, anhand derer man noch Verbesserungen vornehmen kann. Bei diesem Report wurden zum Beispiel Bilder erkannt, die keine width/height-Angaben haben:

Anhand dieser Tipps könnte man nun die Seite optimieren und anschließend wieder einen Test fahren. 

Wenn man einen Report für die Desktop-Ansicht macht, wird die volle Leistung des verwendeten Geräts genommen. Wählt man hingegen „mobile“ aus, wird schlechtere Hardware simuliert, indem die CPU-Leistung um den Faktor 4 gesenkt wird. Außerdem wird die Bandbreite künstlich begrenzt und eine Latenz eingefügt, um langsames mobiles Internet zu simulieren. Das führt dazu, dass die Messergebnisse nur bedingt über unterschiedliche Hardware hinweg vergleichbar sind. Ein 10 Jahre altes Notebook mit einer schlechten WLAN-Verbindung wird wahrscheinlich ein schlechteres Ergebnis liefern, als ein 5000 Euro-Gaming-PC, der direkt an einem Gigabit-Anschluss hängt. Behalte das im Hinterkopf, wenn du Messergebnisse vergleichst. 

Wer sich für Details dazu interessiert, wie die Punkte in Lighthouse vergeben werden, dem sei dieser Artikel als Einstieg ans Herz gelegt.

Neben der Nutzung von Lighthouse im Browser wird häufig auf Googles PageSpeed Insights zurückgegriffen, um die Performance einer Seite zu messen. Im Hintergrund läuft dort für die Tests ebenfalls Lighthouse. 

Folgende Dinge solltest du dabei beachten: 
 

1. Es könnte eine andere Version von Lighthouse verwendet werden, als es im (aktuellen) Chrome-Browser der Fall ist
2. Es ist nicht transparent, auf welcher Hardware und von welchem Standort aus getestet wird. Abweichungen zu lokalen Messungen sind daher wahrscheinlich!
3. Es werden nicht nur Labordaten angezeigt, sondern auch Felddaten aus dem Chrome UX-Report (CrUX)

Vor allem der letzte Punkt ist hier wichtig! Denn die ersten Werte, die man zu den Web Vitals sieht, sind nicht die des aktuellen Tests! Es handelt sich hier um Felddaten von echten Webseitenbesuchern, wobei die angezeigten Werte dem 75 % Perzentil entsprechen. Das bedeutet: 75 % der Webseitenbesucher haben bei den einzelnen Metriken diesen oder einen besseren Wert erreicht.
 

Konkretes Beispiel:

Der LCP (Largest Contentful Paint) liegt hier bei 75% der Seitenbesucher, die von Chrome / CrUX gemessen wurden, bei 0,7 Sekunden oder weniger. Dieser Wert bezieht sich in der Regel auf die letzten 28 Tage.
 

Das aktuelle Testergebnis hingegen liegt bei 0,6 Sekunden: 

Damit Felddaten angezeigt werden können, muss die Seite natürlich öffentlich erreichbar sein und auch ein gewisses Besucheraufkommen haben.

Da im Hintergrund ebenfalls Lighthouse zum Einsatz kommt, liegt der maßgebliche Informationsvorteil zur Verwendung im Browser in den angezeigten Felddaten. Die konkrete Messung selbst fällt in der Regel anders aus, als im heimischen Browser. Das liegt sowohl an der Hardware, als auch an dem Standort und den (simulierten) Netzwerkeinstellungen. 

Wenn du eine Webseite gerade optimierst und immer wieder Tests fahren möchtest, empfehle ich eher auf Lightouse in Chrome oder als Node-CLI zurückzugreifen. 

Damit lassen sich aufgrund der gleichbleibenden Hardware und Netzwerkumgebung eher vergleichbare Messergebnisse erzeugen.

Was du noch wissen solltest!

Die Performance deiner Webprojekte fängt beim Hosting an. Hoste sie auf dem Agentur-Server und profitiere von maximaler Geschwindigkeit schon beim kleinsten Tarif.