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. Sie geben Lighthouse eine URL zur Prüfung, führt eine Reihe von Prüfungen für die Seite durch und erstellt dann einen Bericht über die Leistung der Seite. Verwenden Sie die fehlgeschlagenen Prüfungen als Anhaltspunkte für die Verbesserung der Seite. Jeder Audit enthält eine Referenz, in der erklärt wird, warum der Audit wichtig ist und wie er behoben wird.

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 Prüfen Sie Seiten, die eine Authentifizierung erfordern, und lesen Sie Ihre Berichte in einem nutzerfreundlichen Format direkt im Browser.
  • Über die Befehlszeile. Automatisieren Sie Ihre Lighthouse-Ausführungen mit Shell-Skripts.
  • Als Node-Modul Binden Sie Lighthouse in Ihre kontinuierlichen Integrationssysteme 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.

    Links ist der Darstellungsbereich der zu prüfenden Webseite zu sehen. Auf der rechten Seite befindet sich der Bereich Lighthouse in den Chrome-Entwicklertools.

  5. Klicken Sie auf Seitenaufbau analysieren. In den Entwicklertools wird eine Liste der Audit-Kategorien angezeigt. Lassen Sie alle aktiviert.

  6. Klicken Sie auf Analyse ausführen. Nach 30 bis 60 Sekunden zeigt Lighthouse einen Bericht auf der Seite an.

    Lighthouse-Bericht in den Chrome-Entwicklertools.

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

Knotenmodul programmatisch ausführen

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

PageSpeed Insights ausführen

So führen Sie Lighthouse auf PageSpeed Insights aus:

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

    Die PageSpeed Insights-Website.

Lighthouse als Chrome-Erweiterung ausführen

So installieren Sie die Erweiterung:

  1. Laden Sie Google Chrome für Computer herunter.
  2. Installieren Sie die Lighthouse-Chrome-Erweiterung 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.

    Sie werden aufgefordert, einen Bericht zu erstellen.

  3. Klicken Sie auf Bericht generieren. Lighthouse prüft die aktuell fokussierte Seite und öffnet dann einen neuen Tab mit einem Bericht der Ergebnisse.

    Ein durch die Erweiterung erstellter Lighthouse-Bericht.

Berichte online freigeben und ansehen

Berichte online mit dem Lighthouse Viewer ansehen und freigeben

Der Lighthouse Viewer

Berichte im JSON-Format freigeben

Der Lighthouse-Betrachter benötigt die JSON-Ausgabe eines Lighthouse-Berichts. Generieren Sie die JSON-Ausgaben so:

  • Aus einem Lighthouse-Bericht Klicken Sie auf , um das Menü zu öffnen, und dann auf  Als JSON speichern.
  • Befehlszeile: Führen Sie folgenden Befehl aus: 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 teilen

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

So exportieren Sie einen Bericht im Wesentlichen aus dem Bericht:

  1. Klicken Sie auf das Dreipunkt-Menü  und dann auf Im Viewer öffnen. Der Bericht befindet sich unter https://googlechrome.github.io/lighthouse/viewer/.
  2. Klicken Sie im Viewer auf das Menü und dann auf Save as Gist. Wenn Sie dies zum ersten Mal tun, werden Sie in einem Pop-up-Fenster um die Berechtigung gebeten, auf Ihre grundlegenden GitHub-Daten zuzugreifen und in Ihre Schemas zu lesen und zu schreiben.

Wenn Sie einen Bericht als Gist aus der CLI-Version von Lighthouse exportieren möchten, erstellen Sie manuell einen Gist und fügen Sie die JSON-Ausgabe des Berichts in den 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 Gists ein.

Lighthouse-Erweiterbarkeit

Lighthouse soll Webentwicklern relevante und umsetzbare Informationen liefern. Dazu stehen Ihnen zwei Funktionen zur Verfügung, mit denen Sie Lighthouse an Ihre spezifischen Anforderungen anpassen können.

Stapelpakete

Entwickler verwenden zum Erstellen ihrer Webseiten viele verschiedene Technologien (Back-End, Content-Management-Systeme und JavaScript-Frameworks). Anstatt allgemeine Empfehlungen zu geben, bietet Lighthouse je nach verwendeten Tools relevante und umsetzbare Ratschläge.

Mit Stackpacks kann Lighthouse ermitteln, auf welcher Plattform Ihre Website aufgebaut ist, und bestimmte Stack-basierte Empfehlungen anzeigen. Diese Empfehlungen werden von Experten aus der Community definiert und zusammengestellt.

Wenn Sie ein Stackpack beitragen möchten, lesen Sie die Richtlinien für Beiträge.

Lighthouse-Plug-ins

Mit Lighthouse-Plug-ins können Domainexperten die Funktionen von Lighthouse an die spezifischen Anforderungen ihrer Community anpassen. Sie können die von Lighthouse erhobenen Daten nutzen, um neue Audits zu erstellen. Ein Lighthouse-Plug-in ist im Wesentlichen ein Knotenmodul, das eine Reihe von Prüfungen implementiert, die von Lighthouse ausgeführt werden sollen 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.

Beitrag zu Lighthouse leisten

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. Im Bereich „Probleme“ können Sie Leistungsmesswerte, Ideen für neue Audits oder andere Aspekte von Lighthouse besprechen.