Qualitätssicherung von Webseiten: Google Lighthouse im Test

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.

Die Software dahinter

Google selbst bezeichnet Lighthouse als:

an open-source, automated tool for improving the quality of web pages

Lighthouse ist 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 Userinnen und Usern abzubilden um Auskunft darüber zu erlangen, wie Besucherinnen und Besucher 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.

Kategorien

Wie Lighthouse bedient wird

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

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

  3. Der eigentliche Mehrwert liegt jedoch darin, dass weiterführende Informationen für jeden fehlgeschlagenen Test verlinkt sind, die Entwicklerinnen und Entwicklern dabei helfen, Probleme zu beheben.

Vorteile

  • Einfach und schnell
    Komplexe Themen wie Performance, Barrierefreiheit und SEO werden von Programmiererinnen und Programmierern 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 Programmiererinnen und Programmierer.

  • Up to date
    Die von Lighthouse durchgeführten Tests werden laufend erweitert und auf dem aktuellen Stand der Technik gehalten. Dies zeigt Entwicklerinnen und Entwicklern 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 Benutzerinnen und Benutzer 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 reale Userin und den realen User 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.

Learnings

Lighthouse ist ein hilfreiches Tool das im Werkzeugkasten von Webentwicklerinnen und -entwicklern nicht fehlen sollte.

Es macht Programmiererinnen und Programmierern auf Probleme aufmerksam und zeigt Lösungsansätze und Verbesserungsmöglichkeiten.

Dadurch können Entwickler mit wenig Aufwand eine Vielzahl an Fehlern in den Bereichen Performance, Barrierefreiheit und SEO vermeiden und dadurch die Qualität ihrer Webseiten verbessern.

Blind sollte man sich jedoch nicht auf die Ergebnisse verlassen sondern immer noch die realen Besucherinnen und Besucher der Seite im Auge behalten.

Veröffentlicht am: 03.10.2019

Bild von Christoph Engelmayer

Autor

Christoph Engelmayer

Head of Development

christoph.engelmayer@verdino.com

mehr Infos über Christoph