Einführung in Lighthouse

Lighthouse ist ein automatisiertes Open-Source-Tool, mit dem Sie die Qualität von Webseiten verbessern können. Sie können es auf jeder Webseite ausführen, unabhängig davon, ob sie öffentlich ist oder eine Authentifizierung erfordert. Es bietet Prüfungen zu Leistung, Barrierefreiheit, progressiven Web-Apps, SEO und mehr.

Sie können Lighthouse in den Chrome-Entwicklertools, über die Befehlszeile oder als Knotenmodul ausführen. Geben Sie Lighthouse eine URL zur Prüfung an. Daraufhin werden eine Reihe von Prüfungen auf der Seite ausgeführt und ein Bericht zur Leistung der Seite erstellt. Verwenden Sie die fehlgeschlagenen Prüfungen als Anhaltspunkte für die Verbesserung der Seite. In einem Referenzdokument wird die Bedeutung der einzelnen Tests aufgeführt und erklärt, wie bestimmte Probleme behoben werden können.

Sie können auch Lighthouse CI verwenden, um Regressionen auf Ihren Websites zu verhindern.

Jetzt starten

Wählen Sie den Lighthouse-Workflow aus, der am besten zu Ihnen passt:

• In den Chrome-Entwicklertools Sie können Seiten prüfen, für die eine Authentifizierung erforderlich ist, und Berichte direkt im Browser in einem nutzerfreundlichen Format lesen.
• Über die Befehlszeile Automatisieren Sie Ihre Lighthouse-Ausführungen mit Shell-Skripts.
• Als Node-Modul Binden Sie Lighthouse in Ihre Systeme für die kontinuierliche Integration ein.
• Über eine Web-UI Führen Sie Lighthouse aus und verknüpfen Sie Berichte damit. Eine Installation ist nicht erforderlich.

Lighthouse in den Chrome-Entwicklertools ausführen

Lighthouse hat einen eigenen Bereich in den Chrome-Entwicklertools. So führen Sie einen Bericht aus:

1. Laden Sie Google Chrome für Computer herunter.
2. Öffnen Sie Chrome und rufen Sie die URL auf, die Sie prüfen möchten. Sie können jede URL im Web prüfen.
3. Öffnen Sie die Chrome-Entwicklertools.

4. Klicken Sie auf den Tab Lighthouse.

   

5. Klicken Sie auf Seitenaufbau analysieren. In den DevTools wird eine Liste der Analysekategorien angezeigt. Lassen Sie alle aktiviert.

6. Klicken Sie auf Analyse ausführen. Nach 30 bis 60 Sekunden wird auf der Seite ein Lighthouse-Bericht angezeigt.

   

Node-Befehlszeilentool installieren und ausführen

So installieren Sie das Node-Modul:

1. Laden Sie Google Chrome für Computer herunter.
2. Installieren Sie die aktuelle LTS-Version (Long Term Support) von Node.
3. Installieren Sie Lighthouse. Das Flag -g installiert es als globales Modul.

npm install -g lighthouse

So führen Sie eine Prüfung aus:

lighthouse <url>

So rufen Sie alle Optionen auf:

lighthouse --help

Node-Modul programmatisch ausführen

Unter Programmatisch verwenden finden Sie ein Beispiel für die programmatische Ausführung von Lighthouse als Knotenmodul.

PageSpeed Insights ausführen

So führen Sie Lighthouse in PageSpeed Insights aus:

1. Rufen Sie PageSpeed Insights auf.
2. Geben Sie die URL einer Webseite ein.

3. Klicken Sie auf Analysieren.

   

Lighthouse als Chrome-Erweiterung ausführen

So installieren Sie die Erweiterung:

1. Laden Sie Google Chrome für Computer herunter.
2. Installieren Sie die Chrome-Erweiterung „Lighthouse“ aus dem Chrome Web Store.

So führen Sie eine Prüfung durch:

1. Rufen Sie in Chrome die Seite auf, die Sie prüfen möchten.

2. Klicken Sie neben der Chrome-Adressleiste oder im Erweiterungsmenü von Chrome auf Lighthouse. Das Lighthouse-Menü wird maximiert.

   

3. Klicken Sie auf Bericht generieren. Lighthouse führt die Prüfungen für die aktuell fokussierte Seite durch und öffnet dann einen neuen Tab mit einem Bericht zu den Ergebnissen.

   

Berichte online freigeben und ansehen

Mit dem Lighthouse Viewer können Sie Berichte online ansehen und freigeben.

Berichte als JSON freigeben

Der Lighthouse Viewer benötigt die JSON-Ausgabe eines Lighthouse-Berichts. So generieren Sie die JSON-Ausgaben:

• Über einen Lighthouse-Bericht Klicken Sie im Menü auf more_vert und dann auf Als JSON speichern.
• Befehlszeile Ausführen: shell lighthouse --output json --output-path <path/for/output.json>

So rufen Sie die Berichtsdaten auf:

1. Öffnen Sie den Lighthouse Viewer.
2. Ziehen Sie die JSON-Datei in den Viewer oder klicken Sie irgendwo im Viewer, um den Dateimanager zu öffnen und die Datei auszuwählen.

Berichte als GitHub-Gists freigeben

Wenn Sie keine JSON-Dateien manuell weitergeben möchten, können Sie Ihre Berichte auch als geheime GitHub-Gists freigeben. Ein Vorteil von Gists ist die kostenlose Versionskontrolle.

So exportieren Sie einen Bericht als Gist:

1. Klicken Sie auf das Dreipunkt-Menü more_vert und dann auf Im Viewer öffnen. Der Bericht befindet sich unter https://googlechrome.github.io/lighthouse/viewer/.
2. Klicken Sie im Viewer auf das Dreistrich-Menü more_vert und dann auf  Als Gist speichern. Wenn Sie das zum ersten Mal tun, werden Sie in einem Pop-up-Fenster um Erlaubnis zum Zugriff auf Ihre grundlegenden GitHub-Daten und zum Lesen und Schreiben in Ihren Gists gebeten.

Wenn Sie einen Bericht aus der Befehlszeilenversion von Lighthouse als Gist exportieren möchten, erstellen Sie manuell ein Gist und fügen Sie die JSON-Ausgabe des Berichts in das Gist ein. Der Name der Gist-Datei mit der JSON-Ausgabe muss auf .lighthouse.report.json enden. Unter Berichte als JSON freigeben finden Sie ein Beispiel dafür, wie Sie JSON-Ausgabe mit dem Befehlszeilentool generieren.

So rufen Sie einen Bericht auf, der als Gist gespeichert wurde:

• Fügen Sie der URL des Viewers ?gist=<ID> hinzu, wobei <ID> die ID des Gists ist. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
• Öffnen Sie den Viewer und fügen Sie die URL eines Gist ein.

Lighthouse-Erweiterbarkeit

Das Ziel von Lighthouse ist es, relevante und umsetzbare Informationen für alle Webentwickler bereitzustellen. Dazu stehen Ihnen zwei Funktionen zur Verfügung, mit denen Sie Lighthouse an Ihre spezifischen Anforderungen anpassen können.

Stapelpakete

Entwickler verwenden viele verschiedene Technologien (Backend, Content-Management-Systeme und JavaScript-Frameworks), um ihre Webseiten zu erstellen. Anstatt allgemeine Empfehlungen zu geben, bietet Lighthouse je nach verwendeten Tools relevante und umsetzbare Ratschläge.

Mit Stack-Paketen kann Lighthouse erkennen, auf welcher Plattform Ihre Website basiert, und spezifische stackbasierte Empfehlungen anzeigen. Diese Empfehlungen werden von Experten aus der Community definiert und zusammengestellt.

Wenn Sie ein Stack-Paket beisteuern möchten, lesen Sie die Richtlinien für Beiträge.

Lighthouse-Plug-ins

Mit Lighthouse-Plug-ins können Domainexperten die Funktionen von Lighthouse auf die spezifischen Anforderungen ihrer Community ausweiten. Sie können die von Lighthouse erhobenen Daten verwenden, um neue Prüfungen zu erstellen. Ein Lighthouse-Plug-in ist im Grunde ein Knotenmodul, das eine Reihe von Prüfungen implementiert, die von Lighthouse ausgeführt und dem Bericht als neue Kategorie hinzugefügt werden.

Weitere Informationen zum Erstellen eines eigenen Plug-ins finden Sie im Plugin Handbook im Lighthouse-GitHub-Repository.

Lighthouse einbinden

Wenn Sie ein Unternehmen oder eine Einzelperson sind, die Lighthouse in Ihre Produkte oder Dienstleistungen einbindet, ist das großartig. Wir möchten, dass Lighthouse von so vielen Nutzern wie möglich verwendet wird.

In den Richtlinien und Marken-Assets für die Integration von Lighthouse erfahren Sie, wie Sie zeigen können, dass Lighthouse verwendet wird, und gleichzeitig unsere Marke schützen.

Zu Lighthouse beitragen

Lighthouse ist Open Source und Beiträge sind willkommen. In der Problemverfolgung des Repositorys finden Sie Fehler, die Sie beheben können, oder Audits, die Sie erstellen oder verbessern können. In den Issues können Sie über Leistungsmesswerte, Ideen für neue Prüfungen oder andere Themen im Zusammenhang mit Lighthouse diskutieren.