Sie sind hier: Startseite · Artikel · Lighthouse

Lighthouse: Ein Werkzeug zur Optimierung der Qualität von Webseiten

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Die Anzahl von Tools zur Optimierung von Webseiten ist schier unerschöpflich. Neben zahlreichen Werkzeugen zum Testen einzelner Aspekte, z. B. Ladezeit, Barrierefreiheit, SEO gibt es auch echte Allrounder.
Einen dieser Allrounder – Lighthouse von Google – möchte ich hier kurz vorstellen.

Das Tool zeigt die Ergebnisse der ausgewählten Kriterien - hier: Performance, Accessibility, Best Practices, SEO - in Prozenten, sowie zahlreiche Details und ggf. Empfehlungen zu den einzelnen Tests.

Lighthouse geht mit seinen Warnungen, Hinweisen und Empfehlungen tief ins Detail, zum Beispiel

Use video formats for animated content Large GIFs are inefficient for delivering animated content.
Consider using MPEG4/WebM videos for animations instead of GIF to save network bytes.

und verweist auch gleich auf entsprechende Quellen, wo die vorgeschlagene, bessere Vorgehensweise detailliert beschrieben wird.

Obiges Beispiel basiert auf dem Artikel Animated Gifs durch Video ersetzen, Bandbreite sparen

Nachtrag 22.04.2019: Das Tool weist derzeit einen – bereits gemeldeten – Bug auf: Form-Labels, die per CSS nur Screen Readern gezeigt werden, weist Lighthouse als Accessibilty-Fehler aus.

Ein anderes Beispiel, das ganz klar den Grund einer Warnung aufzeigt, und damit dem Webmaster langes Rätselraten erspart:

1 vulnerability detected
Includes front-end JavaScript libraries with known security vulnerabilities
Some third-party scripts may contain known security vulnerabilities that are easily identified and exploited by attackers … jQuery@2.1.4

Fazit:

Lighthouse ist eine Empfehlung für Perfektionisten. (Die 100% zu erreichen kann eine echte Herausforderung sein.)

Nachtrag 24.04.2019

Die neueste Lighthouse-Version 4.2.0, die mit Google Chrome Version 74 ausgeliefert wird, legt die Messlatte teilweise deutlich höher. So wird beispielsweise für klickbare Elemente eine Mindestgröße von 48 x 48 px verlangt. Damit wird praktisch jeder Hyperlink von Lighthouse als Fehler moniert. Es sei denn, die Linienhöhe beträgt mind. 48 px. Ob das realistisch ist? Die Projektseite von Lighthouse scheitert jedenfalls kläglich an dieser und vielen anderen Forderungen. Wasser predigen, und Wein trinken?

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. Katrin schrieb am Donnerstag, 12.10.23 15:28 Uhr:

   Ein spannender Artikel! Weitere Informationen zu SEO:
   [edit: Link entfernt. Spam wird hier nicht geduldet.]