Willkommen zurück im zweiten Teil unserer Serie zum Seitenanalysetool Google Lighthouse. Im ersten Teil haben wir über die verschiedenen Scores im Google Lighthouse Report gesprochen und erklärt, was sich hinter den KPI versteckt. In diesem Teil bieten wir Euch ein Tutorial wie Ihr Google Lighthouse am besten als Tester*in oder Entwickler*in nutzt – auch für eure lokalen Webseiten.

Google Lighthouse mit dem Browser Plug-In für Schnelltester

Google Lighthouse könnt Ihr am einfachsten und schnellsten verwenden, wenn Ihr einfach das Browser Plug-In über euren Extension Manager im Browser installiert. Je nachdem, ob Ihr Chrome, Mozilla Firefox, Opera oder einen anderen Browser verwendet, heißt dieser etwas anders.

1. Bei Chrome findet ihr ihn unter Einstellungen > Weitere Tools > Erweiterungen. Dort sind übrigens auch die Entwicklertools, die Ihr als Web-Developer oder Tester kennen und lieben lernen solltet.
2. Bei Mozilla heißt es Add-Ons, bei Edge heißt es Erweiterung. Für gewöhnlich sind die Erweiterungsmanager aber leicht zu finden.
3. Nachdem Ihr das Plug-In installiert habt, könnt Ihr nun durch das Klicken auf das Icon oben rechts im Browser das Google Lighthouse aktivieren.
4. Nun drückt Ihr einfach auf den Button „Report erzeugen“ / „Generate Report“. In einem weiteren Tab beginnt Google Lighthouse dann die Seite zu testen. Nach ein paar Sekunden erhaltet Ihr das Ergebnis.

Die Lighthouse Plug-Ins in anderen Browser funktionieren genauso oder ähnlich.

Google Lighthouse in den Entwicklertools von Chrome

Wer Chrome hat, benötigt das Plug-In gar nicht mehr. Den Seiteninspektor, oder „Entwicklertools“ wie es inzwischen heißt, ruft Ihr ganz einfach per Shortcut mit der Tastenkombination „Shift + STRG (Apple: ⌥) + i“ oder mit der F12-Taste auf. Bei den Reitern findet Ihr dort ganz rechts auch das Lighthouse. Das Beste daran ist, dass ihr hier vor dem Test zwischen „Mobile“ und „Desktop“ entscheiden könnt.

Wir erinnern uns: Lighthouse überprüft im Plug-In und als Standard den Seitenscore anhand der Simulation eines Mittelklasse-Smartphones mit 3G-Konnektivität. Grund für diese Simulation ist, dass 2G und 3G mehr als 75 Prozent der Internetnutzung weltweit ausmachen. Das Testen bei dieser Download-Geschwindigkeit führt bei vielen Seiten allerdings zu sehr ernüchternden Scores. Die Möglichkeit zwischen „Mobile“ und „Desktop“ zu wählen, änderte bei uns im Test erheblich etwas an den Scores der Seite. So erschien uns diese Variante von Lighthouse präziser als das Browser-Plug-In.

Google Lighthouse über Node.JS CLI ausspielen

Besonders für Entwickler*innen, die gerade ihre neuesten Kreationen testen, ist die Einbettung in Node.JS eine große Hilfe. Hier gibt es zahlreiche Optionen, um die Funktionsweise von Lighthouse auf die eigenen Bedürfnisse anzupassen. Dafür müsst Ihr lediglich Node herunterladen (wenn Ihr es noch nicht getan habt), ein kompatibles Command Line Interface (CLI) haben und darin die Installation von Lighthouse mit folgendem Code veranlassen:

npm install -g lighthouse

Anschließend könnt ihr mit dem folgenden Befehl einen Audit ausführen.

lighthouse <url>

Wer Lighthouse auf seinen speziellen Anwendungsfall anpassen möchte, kann auf Github tiefer in die programmatische Nutzung von Lighthouse eintauchen. Die Möglichkeiten Lighthouse zu konfigurieren, sind umfangreich. Ihr könnt zum Beispiel Performance Score Tests separat von anderen Scores laufen lassen oder nur die Teile der Scores ausgeben zu lassen, die Ihr wirklich benötigt. Ihr erhaltet hier aber auch die Möglichkeit Seiten mit Authentifizierung zu testen oder Seiten mit nicht vertrauenswürdigen Zertifikaten.

Reporte erstellen mit Google Lighthouse

Eine der wichtigsten Funktionen eines Testtools ist das Teilen von Reporten. Dafür müsst Ihr lediglich in der rechten oberen Ecke Eurer Lighthouse Anwendung nach dem Menü suchen (drei kleine Punkte) und daraufklicken. Schon bieten sich die verschiedenen Exportmöglichkeiten:

1. Export als JSON-Datei
2. Export als HTML-Datei
3. Export als Github GIST

Für jede dieser drei Möglichkeiten gibt es verschiedene Installationsanweisungen, die Ihr hier nachlesen könnt. Um die Dateien aufrufen zu können, kopiert Ihr Sie einfach in ein geöffnetes Fenster des Google Lighthouse Viewers.

Google Lighthouse Set Up: Das haben wir gelernt, das erwartet Euch noch

In diesem Artikel konntet Ihr von drei verschiedenen Methoden lesen Google Lighthouse zu installieren und zu nutzen. Dabei ist die Tiefe und Vielfalt, in der Ihr es nutzen könnt mit jeder Methode gestiegen: Die Einbindung in die Entwicklertools bietet mehr Präzision und Optionen als das Browser Plug-In und mit Verknüpfung über ein Node CLI bieten sich Entwickler*innen und Tester*innen zahlreiche Möglichkeiten Lighthouse je nach Anwendungsfall anzupassen.

Das nächste Mal erwartet Euch ein Diskurs zu den Progressive Web Apps und wie diese mit Google Lighthouse konkret getestet und ausgewertet werden können.

Ihr wollt Eure App oder Homepage auf Herz und Nieren testen? Appmatics testet nicht nur nach dem Lighthouse Score, sondern auch mit professionellen Inhouse Testteams auf echten Geräten mit verschiedenen Betriebssystemen in konkreten Nutzungsszenarien. Als Partner und Dienstleister stehen wir Euch jederzeit zur Verfügung, wenn es ums Testen geht.