Webseiten-Performance mit Open Source messen und verbessern Einstieg in Google Lighthouse und Chrome DevTools

Anbieter zum Thema

OutSystems

Mit Google Lighthouse können Entwickler die Leistung von Webseiten sowie die Benutzerfreundlichkeit von Web-Apps messen. Die Testbedingungen lassen sich dabei flexibel anpassen.

Im Fokus von Google Lighthouse stehen Progressive Web Apps (PWA). Doch auch andere Web-Anwendungen können durch die flexiblen Testbedingungen getestet werden. Da sich PWAs auf Webseiten generell so verhalten, wie Apps auf Endgeräten, muss die Leistung natürlich möglichst hoch sein, damit Anwender die App auch nutzen. Hier sollte Lighthouse dabei helfen, Flaschenhälse zu erkennen und zu vermeiden.

Google Lighthouse als Chrome-Erweiterung oder in der CLI nutzen

Google stellt Lighthouse als Open-Source-Tool zum Download zur Verfügung. Der Betrieb von Lighthouse auch kann über Google Chrome als Erweiterung erfolgen, alternativ steht eine Kommandozeilen-Schnittstelle (Command Line Interface, CLI) zur Verfügung. Die Browser-Erweiterung ist im Funktionsumfang etwas eingeschränkt, die CLI-Variante bietet mehr Optionen.

Im produktiven Betrieb sind sicherlich beide Varianten parallel sinnvoll einsetzbar. Für die CLI wird Node.js In Ergänzung zu Lighthouse auf dem Computer benötigt. Die Chrome-Erweiterung funktioniert auch ohne Zusatzsoftware. Auch für Mozilla Firefox steht Google Lighthouse zur Verfügung. Zur Verwendung muss das Add-On installiert werden.

Webseiten und Web-Apps mit Lighthouse testen

Der Test einer Webseite ist mit der Erweiterung verhältnismäßig einfach. Nach dem Laden der Webseite werden mit [Strg]+[Shift]+[i] unter Windows bzw. [CMD]+[Option (alt)]+[i] zunächst die Entwickler-Tools aufgerufen, darin findet sich dann der Reiter „Lighthouse“. Um den Lighthouse-Check anzustoßen, setzt man zunächst die gewünschten Kategorie-Häkchen und klickt auf „Generate report“.

Anschließend misst Google Lighthouse die Seite und zeigt Ergebnisse direkt im Browser an. Im oberen Bereich sind über eine Punkteskala von 1 (schlecht) bis 100 (gut) die Werte für jeden einzelnen Messbereich zu sehen. Unten werden zu den einzelnen Unterpunkten ausführliche Details angezeigt.

Entwickler können die Ergebnisse zur Verbesserung der Leistung in einzelnen Bereichen detailliert auslesen und Leistungsprobleme dadurch sehr schnell erkennen und beheben. Oben im Bericht sind Zusammenfassungen für verschiedene Werte zu sehen. Dazu gehören Progressive Web App, Performance, Accessibility, Best Practices und SEO.

Unten im Bericht sind die Details für die einzelnen Messbereiche zu sehen. Hier ist auch schnell ersichtlich, wo Leistungsprobleme auf einer Webseite verursacht werden. Wichtige Werte dabei sind „First Contentful Paint“ und „Time to Interactive”. Durch diese Werte wird schnell klar, wann die Webseite aufgebaut wurde und wie lange es dauert, bis Anwender interaktiv auf Objekte der Webseite zugreifen können.

Für PWAs gibt es einen eigenen Bereich, der aktiviert wird, wenn auf einer Webseite mindestens eine PWA zum Einsatz kommt. Im Bericht sind auch Empfehlungen zu sehen, wie eine PWA besser genutzt werden kann, ob die Bedienelemente optimal gestaltet sind, und ob die Objekte der PWA richtig konfiguriert sind, zum Beispiel Bilder.

Google Lighthouse für den Profibereich

Wer umfassend Seiten analysieren will, kommt um den Einsatz von Google Lighthouse in der Befehlszeile kaum herum. Das liegt zunächst auch daran, dass über die CLI weitaus mehr Optionen zur Verfügung stehen, als bei der Erweiterung.

Lighthouse nutzt für seine Messung eine Emulation eines Nexus-5x-Smartphones mit Android. Mit der Option --disable-device-emulation wird keine Emulation durchgeführt. Auch die Webseiten-Performance unter Verwendung leistungsstarker Hardware wird über die CLI besser mit der Option --disable-cpu-throttling getestet.

Um Lighthouse auf einem Rechner mit Windows zu betreiben, muss zunächst die aktuelle Version von Node.js installiert werden. Danach wird Lighthouse als globales Modul installiert:

Um nach der Installation eine Webseite zu testen, wird Lighthouse aufgerufen und als Option die Webseite sowie die gewünschten Parameter angegeben, zum Beispiel mit:

Eine ausführlichere Hilfe zeigt das Tool mit „lighthouse --help“ an. Über das Menü mit den drei Punkten bei der Anzeige eines Lighthouse-Berichtes oben rechts stehen verschiedene Optionen zur Verfügung, um Berichte als HTML-Datei zu speichern oder als Gist zu teilen. Hier können Berichte auch ausgedruckt werden. Auch das Speichern als JSON-Datei ist hier möglich.

Berichte können auch als Gists geteilt werden. Dazu wird ein lokal gestarteter Bericht zunächst über „Save as Gist“ im Lighthouse Report Viewer geöffnet. Bei der ersten Verwendung muss der Zugriff noch gestattet werden.

Chrome DevTools und Google Lighthouse

Die meisten Webentwickler arbeiten parallel mit den Chrome DevTools, wenn es um die Optimierung von Webseiten geht. Die Tools sind direkt in den Browser Google Chrome eingebunden und helfen dabei Webseiten zu optimieren. Die DevTools arbeiten mit Lighthouse zusammen, zum Beispiel wenn es darum geht, einen Messbericht zu exportieren und mit anderen Entwicklern zu teilen.

Exportierte Berichte lassen sich mit dem ebenfalls kostenlos verfügbaren Lighthouse Report Viewer betrachten. Die DevTools werden zum Beispiel geladen, wenn auf einer Webseite in Google Chrome über das Kontextmenü der Menüpunkt „Untersuchen“ ausgewählt wird.

Über den Menüpunkt „Elements“ ist der HTML-Code einer Seite zu sehen. Allerdings zeigen die DevTools nicht den Quellcode der Seite an, sondern den Code den Google Chrome interpretiert. Das muss nicht zwingendermaßen der gleiche Code sein. Hier kann auch der CSS-Code einer Seite überprüft werden. Über „Console“ ist es möglich, JavaScript-Elemente zu überprüfen. Über das Menü mit den drei Punkten oben rechts können die DevTools an anderer Stelle positioniert werden.

(ID:47036011)