Qualitätssicherung im Web: Google Lighthouse im Test
Auf der Suche nach einer Lösung, Webseiten automatisiert auf die Qualität deren technischen Umsetzung hin zu testen, habe ich mir Google Lighthouse angesehen. In diesem Artikel werde ich erklären, was Lighthouse ist, wie man es verwendet, wo dessen Stärken und Schwächen liegen und welche Alternativen es gibt.
Veröffentlicht am: 3.10.2019
Die Software dahinter
Google selbst bezeichnet Lighthouse als:
»an open-source, automated tool for improving the quality of web pages«
Lighthouse ist eine open-source Software, die automatisiert die Qualität von Webseiten testet und auf Verbesserungsmöglichkeiten hinweist. Die Tests, auch Audits genannt, konzentrieren sich auf »User centric performance metrics«. Es wird versucht, das Verhalten von echten User*innen abzubilden, um Auskunft darüber zu erlangen, wie Besucher*innen die Seite empfinden.
Dabei wird in folgende Kategorien unterschieden:
- Leistung
- Barrierefreiheit
- Best Practices
- SEO
- Progressive Web App
Für jede Kategorie kann ein Wert zwischen 0 und 100 erreicht werden. Je höher der Wert, desto mehr Tests waren erfolgreich.
Wie Lighthouse bedient wird
-
Lighthouse kann in den Chrome DevTools direkt über die Kommandozeile oder als eigenständiges Node Modul verwendet werden. Zusätzlich bietet Google auch eine gehostete Web-Version an. Diese setzt allerdings einen Google Account voraus.
-
Man übergibt der Software eine URL, auf der es die Tests (Lighthouse nennt sie »Audits«) durchführen soll. Als Ergebnis wird ein Report generiert, der die erreichte Punktezahl pro Kategorie grafisch hübsch aufbereitet darstellt.
-
Der eigentliche Mehrwert liegt jedoch darin, dass weiterführende Informationen für jeden fehlgeschlagenen Test verlinkt sind, die Entwickler*innen dabei helfen, Probleme zu beheben.
Vorteile
-
Einfach + schnell
Komplexe Themen wie Performance, Barrierefreiheit und SEO werden von Programmierer*innen gerne auf die lange Bank geschoben und, wenn überhaupt, erst am Ende des Projekts beachtet. Da die Erstellung eines Lighthouse Audits nur wenige Sekunden benötigt, ist es ein hilfreiches Tool, um schon während der Umsetzung auf diese Themen zu achten. Die Visualisierung der Ergebnisse mit Ampelfarben bietet eine einfache und übersichtliche Darstellung. Das Punktesystem spornt zusätzlich an, jedes Mal noch einen Tick besser zu sein, als beim letzten Test. -
Maßgeschneiderte Verbesserungsvorschläge
Das geheime Killer-Feature von Lighthouse ist die direkte Verknüpfung von gefundenen Verbesserungen zur entsprechenden Dokumentation. Dadurch erhält man Lösungsvorschläge und Beispielcodes für exakt die Probleme, die auf der aktuellen Seite auftreten. Zudem entfällt eine Suche nach möglichen Lösungen. Eine riesige Zeitersparnis für Programmierer*innen. -
Up to date
Die von Lighthouse durchgeführten Tests werden laufend erweitert und auf dem aktuellen Stand der Technik gehalten. Dies zeigt Entwickler*innen stets neue »Best-Practice« Beispiele auf und hilft, diese zu erlernen und umzusetzen. -
Voll automatisierbar
Durch seine Automatisierbarkeit kann Lighthouse an unterschiedlichen Stellen in den Development-Prozess eingebunden werden. Die Tests können beispielsweise während automatisierter Deployments durchgeführt und eine Veröffentlichung des Codes vom Resultat der Audits abhängig gemacht werden. Auch Monitoring-Lösungen, die Audits regelmäßig ausführen und über einen längeren Zeitraum dokumentieren, sind denkbar. So können Trends erkannt werden und es kann eingegriffen werden, wenn Scores sich verschlechtern.
Nachteile
-
So einfach ist es nicht
Eine Kritik, die sich Lighthouse gefallen lassen muss, ist der Umstand, dass man die Qualität einer Webseite nicht so einfach berechnen und in Zahlen fassen kann. Es fühlt sich zwar gut an, behaupten zu können, mit ein paar Änderungen eine Seite um 20% verbessert zu haben. Die Zusammenhänge bei Themen wie Accessibility und SEO sind im echten Leben jedoch weit komplexer und beinhalten auch Aspekte, die man nur durch Erfahrung oder Trial und Error verbessern kann. -
Labor vs. Realität
Lighthouse testet immer unter Laborbedingungen, die, wie jede Versuchsanordnung, einer Anzahl unzähliger Variablen unterliegen. Sei es die Geschwindigkeit der verwendeten Internetverbindung, oder triviale Dinge wie die Tageszeit. Die Erfahrung, die echte Benutzer*innen machen, wenn sie dieselbe Seite öffnen, kann oft weit davon abweichen. Daher ist es wichtig, auch weiterhin manuell zu testen, um, hinter all den Zahlen, nicht die realen User*innen aus den Augen zu verlieren.
Alternativen: WebHint & Pa11y
Neben Lighthouse gibt es noch eine Vielzahl ähnlicher Tools, die Webseiten automatisiert analysieren. Zum Abschluss stelle ich noch zwei ausgewählte Alternativen vor:
-
WebHint ist ein open-source Tool mit einem ähnlichen Testumfang wie Lighthouse. Der größte Unterschied liegt darin, dass es nicht von einer Firma (wie Google hinter Lighthouse), sondern von der unabhängigen Open JS-Foundation entwickelt wird.
-
Pa11y ist ebenfalls Open-Source und fokussiert sich ausschließlich auf Accessibility.
