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

|
Nachdem ich im letzten Blogartikel erklärt habe, welche wir Metriken für die Performance-Messung heranziehen können, schauen wir als nächstes auf ein paar Tools, die uns die Arbeit erleichtern. Wir beginnen mit Lighthouse und PageSpeed Insights. Beachte dabei bitte, dass in den Beispielen immer nur die Startseite getestet wird. Natürlich kann es auch sein, dass Unterseiten langsam sind und einer Optimierung bedürfen. Um die Performance einer Webseite vollumfänglich zu testen, müssen daher auch alle Unterseiten getestet werden.

Lighthouse − so gelingt die Analyse

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). 

So analysierst du deine Webseite mit Lighthouse

  • Ö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.

Bei der Optimierung einer Seite sollte es nicht darum gehen, einen möglichst hohen Lighthouse-Score zu erreichen! Der Score dient nur dazu, eine Einschätzung zu Optimierungspotenzial zu bekommen. Fokussiere dich bei der Optimierung daher immer auf das Benutzererlebnis und gehe keine Kompromisse dabei ein, nur um noch ein paar Punkte herauszukitzeln! Am Ende des Tages ist es schließlich wichtig, dass deine Seitenbesucher zufrieden sind. Der Lighthouse-Score interessiert sie nicht.

PageSpeed Insights

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.

Ähnliche Artikel:

Hosting

Performance-Boost (2): Web Vitals verstehen

Wenn ihr euch mit den Web Vitals beschäftigt, werden euch viele Begriffe um die Ohren fliegen. Performance Pro Hannes hilft euch, den Überblick zu behalten.

Hosting

Performance-Boost (1): Darum sind deine Seiten bei Mittwald so schnell

Du hast dich schon öfter gefragt, warum wir so viel schneller sind als andere Hoster? Tobi hat die ausführliche Antwort im Blog.

Freelancer Hannes Gesmann im Interview
Hosting

“Performance ist das Zusammenspiel von Frontend, Backend und Hosting” − Freelancer Hannes Gesmann im Gespräch

Das Hosting ist eine der wichtigsten Zutaten für top Pagespeed. Freelancer Hannes Gesmann erzählt im Interview, auf was es ankommt.

Kommentare

Khoa Nguyen am

Danke für die Insights. Beim Thema Ladezeit merke ich immer wieder, dass die Optimierung eher stiefmütterlich behandelt wird. Bei WordPress Seiten sieht man dann gerne 50 aktivierte Plugins, darunter auch solche, die die Ladezeit künstlich beeinflussen sollen. Ein Graus! Es bleibt einem nichts übrig als alle Plugins auf einer Staging zu deaktivieren und die Seite von Grund auf richtig zu optimieren.

Antworten

Kommentar hinzufügen