Google Lighthouse

Lighthouse ist ein Open Source Tool für das technische Audit einer Webseite.

Das Tool wurde von Google entwickelt und bietet die Analyse folgender Teilbereiche einer URL: Performance, Progressive Web App, SEO, Accessibility und Best Practices. Inzwischen ist Lighthouse in die verschiedenen Performance-Analysen von Google als Framework integriert – dies gilt sowohl für die Analyse via PageSpeed Insights als auch die Browser-basierten Audits über die Entwicklungs-Tools im Chrome Browser.

Was ist Google Lighthouse?

Lighthouse ermöglicht Performance Audits von Websites. Ursprünglich wurde das Tool als Audit-Werkzeug für Progressive Web Apps (PWAs) entwickelt (Lighthouse 1.0) und in der Version 2.0 auch für Performance- und SEO-Analysen für herkömmliche Websites veröffentlicht. Die Version 3.0 erschien Anfang 2018 und bot ein neues Layout sowie eine direkte Integration in die Entwicklungs-Tools im Google Chrome Browser. Dabei ist Lighthouse ein Open-Source-basiertes Analyse-Framework, das auf URL-Ebene arbeitet.

Welche Audits kann Google Lighthouse durchführen?

Es gibt 5 Bereiche, die das Lighthouse Tool durchführen kann: Performance, Best Practices, Accessibility, SEO und Progressive Web Apps.

Diese 5 Audits können zu- und abgeschaltet werden, je nach gewünschtem Analyse-Bereich. Für jeden Bereich ermittelt Lighthouse einen Score, der die Audit-Ergebnisse zusammenfasst:

Performance

In diesem Bereich analysiert Lighthouse, wie schnell eine Webseite oder App lädt und User die Inhalte auch nutzen können. Folgende sechs Kategorien werden von Lighthouse in dieser Kategorie analysiert:

• First Contentful Paint (Erste Inhalte gezeichnet): Diese Information gibt an, wann der erste Text oder das erste Bild gezeichnet wird.
• First Meaningful Paint (Inhalte weitgehend gezeichnet): Diese Information gibt an, wann die Hauptinhalte einer Seite sichtbar sind.
• Speed Index (Geschwindigkeitsindex): Der Geschwindigkeitsindex zeigt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden.
• Time To Interactive (Zeit bis Interaktivität): Die Information gibt den Zeitpunkt an, an dem die Seite voll interaktionsfähig ist.
• First CPU Idle (Erster CPU-Leerlauf): Der Wert in dieser Kategorie gibt den Zeitpunkt an, an dem die Aktivität des Haupt-Threads der Seite das erste Mal gering genug ist, um Eingaben zu verarbeiten.
• Estimated Input Latency (Geschätzte Eingabelatenz): Beim Ergebnis oben handelt es sich um eine Schätzung dessen, wie viele Millisekunden eine App benötigt, um während des 5-s-Fensters mit der stärksten Auslastung beim Seitenaufbau auf User-Eingaben zu reagieren. Wenn die Latenz über 50 ms liegt, empfinden User eine App oder Webseite möglicherweise als langsam.

Zur Performance-Analyse gehören bei Lighthouse auch Verbesserungsvorschläge. Diese Beispiele beinhalten viele Möglichkeiten, Ladezeit einzusparen – etwa durch die Komprimierung von Bildern, JavaScript oder CSS sowie das Auflösen von Ressourcen, die das Rendern einer Website blockieren, etwa JavaScripts, externe Requests oder CSS-Befehle. Auch das korrekte Caching sowie Server-Antwortzeiten oder die Vermeidung von Redirects gehört hierzu. Die weiteren Analysen, die Lighthouse bei einem Performance Audit durchführt, beinhalten Empfehlungen zu den folgenden Punkten:

• Ressourcen beseitigen, die das Rendering blockieren
• Bilder in modernen Formaten bereitstellen
• Textkomprimierung aktivieren
• CSS, das das Rendern der Seite blockiert, nachladen
• Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt
• Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen
• Tiefe kritischer Requests minimieren
• Bilder richtig dimensionieren
• Nicht sichtbare Bilder aufschieben
• CSS komprimieren
• JavaScript komprimieren
• Bilder effizient codieren
• Pre-Connect des Servers ermöglichen
• Niedrige Server-Antwortzeiten ermöglichen (Time To First Byte, TTFB)
• Redirects vermeiden
• Wichtige Requests vorab laden
• Videoformate für animierte Inhalte verwenden
• Website-Datenvolumen klein halten
• Übermäßige DOM-Größe vermeiden
• Markierungen und Messungen für das User Timing
• JavaScript-Ausführungszeit
• Aufwand für den Haupt-Thread minimieren

Best Practices

Die 16 Best Practices vereinen vor allem Sicherheitsaspekte von Websites und moderner Web-Entwicklung. Hier analysiert Lighthouse, ob HTTPS sowie HTTP/ genutzt wird, eingebundene Ressourcen aus sicheren Quellen stammen oder JavaScript-Bibliotheken sicher sind. Ebenfalls geht es um sichere Datenbank-Anbindungen sowie die Vermeidung unsicherer Befehle – wie etwa document.write() – oder die Vermeidung des Einsatzes von älteren APIs.

SEO

Anhand verschiedener Tests prüft Lighthouse, wie gut die Webseite oder App von Suchmaschinen gecrawlt und in den Suchergebnissen darstellbar ist. Diese Lighthouse-Tests zur Suchmaschinenfreundlichkeit sind recht eingeschränkt; falls die getestete Webseite oder App hier nicht die volle Punktzahl bekommt, sollten Seitenbetreibende handeln. Dann gibt es noch Potenzial für die Suchmaschinenoptimierung, das unbedingt berücksichtigt werden sollte.

Die aktuell 13 Audits, die im Bereich der Suchmaschinenoptimierung durch Lighthouse durchgeführt werden, behandeln vor allem die Mobilfreundlichkeit einer Website oder PWA, die korrekte Nutzung von Structured Data und Tags wie Canonicals, Hreflang, Title, Meta Description sowie die Crawlbarkeit durch Suchmaschinen-Bots.

Accessibility

Hier wird geprüft, wie gut die Webseite oder App von Menschen mit Einschränkungen genutzt werden kann. Dazu gehört etwa die Prüfung, ob alle wichtigen Elemente wie Buttons oder Links ausreichend beschrieben sind oder Bilder über ein Alt-Attribut verfügen, so dass der Bild-Inhalt auch von blinden Menschen durch Sprachausgabe erfasst werden könnte.

Progressive Web Apps

Dieser Bereich ist der ursprüngliche Kern von Lighthouse – die Analyse von Progressive Web Apps, kurz: PWAs. Meldet die Webseite einen Service Worker an? Funktioniert sie auch offline ohne Internet-Zugang – und meldet keinen 200er-Fehler? Dieser Analyse-Bereich war der Ursprung von Lighthouse, stellt heute aber nur einen von fünf Kategorien dar – der natürlich nur dann Sinn macht, wenn man eine PWA anbietet.

Wo ist Google Lighthouse abrufbar?

• PageSpeed Insights: Bot das frühere Pagespeed Tool von Google nur einen Score, nutzt dieses Analyse-Tool inzwischen auch die Funktionalitäten von Lighthouse. Hier kann jede URL im Hinblick auf die sechs Performance-Werte analysiert werden und erhält auch Ergebnisse zu zahlreichen Detail-Diagnosen und entsprechenden Empfehlungen. Ebenfalls wird ein übergeordneter Speed Score aus den sechs Performance-Daten gebildet. Hier geht’s zu den PageSpeed Insights .
• Developer Tools im Chrome Browser: Seit April 2018 ist Google Lighthouse auch in den Entwicklungs-Tools im Chrome-Browser verfügbar. Hier können die einzelnen fünf Audit-Kategorien an- und abgewählt werden; ebenso bietet diese Option Wahlmöglichkeiten in Bezug auf das genutzte Device – Mobile oder Desktop – sowie die simulierte Internet-Geschwindigkeit für die Analyse. Wie die Lighthouse Audits in den Chrome Developer Tools erreicht warden, kann hier eingesehen werden.
• Chrome Plugin: Ebenfalls können die vollständigen Lighthouse Audits über das Chrome Plugin durchgeführt werden. Hier geht’s zum Lighthouse Chrome Plugin – wohlgemerkt nur mit dem Chrome Browser.
• Ebenfalls können die Performance Audits auch über das Google web.dev Portal abgerufen werden. Hier gibt es die wichtigsten Audits mit allen Diagnosen und Empfehlungen.