Was ist Google Lighthouse und wie wird es verwendet?

Als Websitebesitzer ist die Maximierung der Suchmaschinenoptimierung (SEO), der Zugänglichkeit und der Leistung Ihrer Website von größter Bedeutung. Um diese Faktoren jedoch so effizient wie möglich anzugehen, ist es entscheidend, die richtigen Tools und Techniken zu verwenden. Eine der innovativsten Lösungen, die Sie derzeit nutzen können, ist Google Lighthouse.

In diesem Beitrag stellen wir Ihnen Google Lighthouse und seine Funktionsweise vor. Anschließend erklären wir Ihnen, wie Sie damit Ihre Website verbessern können.

Lass uns einspringen!

Was ist Google Lighthouse?

Google Lighthouse ist ein kostenloses Open-Source-Tool die Ihnen helfen können, die Geschwindigkeit, Leistung und das Gesamterlebnis Ihrer Website zu verbessern. Das Generieren von Lighthouse-Berichten erleichtert die Verbesserung der Qualität Ihrer Webseiten.

Es gibt verschiedene Möglichkeiten, das Tool zu verwenden. Sie können es ausführen über:

  • Chrome DevTools
  • Eine Chrome-Erweiterung
  • Ein Knotenmodul
  • Eine Web-Benutzeroberfläche (UI)

Sobald Sie eine URL an das automatisierte Tool senden, führt es mehrere Seiten-Audits aus und erstellt einen Bericht, der die Leistung der Seite detailliert beschreibt. Sie können dann Vorschläge aus den Ergebnissen verwenden, um Ihre Website zu verbessern.

Lighthouse ist nicht nur für Entwickler gedacht. Das Tool ist für jeden Websitebesitzer geeignet, der mehr über die Leistung seiner Website und konkrete Schritte zur Optimierung erfahren möchte.

Wie Lighthouse Audits Seiten

Der Schwerpunkt der Lighthouse-Audits liegt auf den Core Web Vitals von Google. Wenn Sie nicht vertraut sind, dies sind die wesentlichen Metriken, die Google verwendet, um die Geschwindigkeit von Webseiten und die allgemeine Benutzererfahrung (UX) zu messen. Sie bestehen aus Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).

Mit anderen Worten, mit Lighthouse können Sie Ihre Website genauso sehen wie Google. Sie können die umsetzbaren Erkenntnisse verwenden, die es liefert, um Ihre Seiten für bessere Suchergebnisse in Suchmaschinen zu optimieren.

Die Lighthouse-Berichte bestehen aus fünf Kategorien:

  • Leistung
  • Barrierefreiheit
  • SEO
  • Empfohlene Vorgehensweise
  • Progressive Web-App

Es verwendet auch ein Bewertungssystem von 1 bis 100 und testet Websites mit einer simulierten 3G-Verbindung. Die Punktzahlen können jedoch im Laufe der Zeit variieren, da Google seine Ranking-Kriterien häufig aktualisiert. Daher möchten Sie wahrscheinlich über alle Lighthouse-Updates auf dem Laufenden bleiben.

Darüber hinaus ist Lighthouse, obwohl es PageSpeed ​​Insights etwas ähnlich ist, nicht dasselbe. Lighthouse bietet ein ganzheitlicheres Bild als nur die Seitenleistung (wie es PageSpeed ​​Insights tut).

So verwenden Sie Google Lighthouse

Wie bereits erwähnt, können Sie für Lighthouse eine Handvoll Workflows verwenden. Wenn Sie keine Erweiterung installieren oder Befehle ausführen möchten, können Sie web.dev oder DevTools verwenden. Im Folgenden führen wir Sie Schritt für Schritt durch die Anweisungen für jede Option.

So führen Sie Google Lighthouse mit Chrome DevTools aus

Um zu beginnen, müssen Sie zuerst Google Chrome herunterladen (falls noch nicht geschehen). Nach der Installation können Sie in Chrome einen neuen Browser-Tab öffnen und zu der Webseite navigieren, die Sie überprüfen möchten.

Klicken Sie anschließend mit der rechten Maustaste auf die Seite und wählen Sie Prüfen. Sie können auch auf die drei vertikalen Punkte in der oberen rechten Ecke des Browsers klicken und dann zu navigieren Mehr Werkzeuge > Entwicklerwerkzeuge.

Dadurch wird das DevTools-Panel rechts oder oben auf der Seite geöffnet. Klicken Sie in der Symbolleiste (1) auf Leuchtturm:

Die Google Lighthouse-Option in Chrome DevTools.

Beachten Sie, dass Sie möglicherweise auf die beiden Pfeile am Ende klicken müssen, wenn die Option Leuchtturm in der Symbolleiste nicht angezeigt wird. Stellen Sie nach dem Öffnen des Lighthouse-Tools sicher, dass alle fünf Kategorien ausgewählt sind, und wählen Sie dann (2) Bericht generieren.

Sobald Lighthouse die Prüfung abgeschlossen hat, gelangen Sie zum Ergebnisbildschirm. Dieser Bericht sieht in etwa so aus:

Ein Leuchtturmbericht.

Sie finden eine Punktzahl und einen Abschnitt für jede Kategorie. Sie können mehr über jeden erfahren, indem Sie auf die Punktzahlen oben auf der Seite klicken.

Eine gute Punktzahl ist alles zwischen 50 und 89. Eine ausgezeichnete Punktzahl liegt zwischen 90 und 100. Das Ziel ist es, für jede Kategorie irgendwo zwischen 90 und 100 Punkte zu erzielen.

So verwenden Sie Google Lighthouse mit web.dev

Eine weitere schnelle und einfache Möglichkeit, eine Webseite mit Lighthouse zu prüfen, ist die Verwendung von web.dev. Navigieren Sie zu dieser Seite und geben Sie die Seiten-URL ein, die Sie überprüfen möchten:

Die web.dev-Website.

Klicken Sie anschließend auf das Audit ausführen Taste. Nach ein oder zwei Minuten beendet Lighthouse die Analyse der Site und bringt Sie zum Bericht. Hier erfahren Sie mehr über Ihre Punktzahl und Verbesserungsmöglichkeiten in jeder Kategorie:

Der Abschnitt

Sie können auf jeden minimierten Abschnitt klicken, um ihn zu erweitern und mehr zu erfahren. Sie können auch auf detaillierte Informationen zu jeder Kategorie zugreifen, indem Sie den Kategorienamen und die Punktzahl oben im Bericht auswählen.

So verwenden Sie Google Lighthouse mit einer Chrome-Erweiterung

Alternativ können Sie die Chrome-Erweiterung für Lighthouse herunterladen und installieren. Dies könnte eine gute Wahl sein, wenn Sie Lighthouse häufig verwenden möchten.

Auch hier muss der Chrome-Browser installiert sein. Als nächstes können Sie zum Chome Web Store navigieren und Installieren Sie die Lighthouse-Erweiterung:

Die Google Lighthouse Chrome-Erweiterung.

Nachdem das Add-On installiert wurde, starten Sie Ihren Browser neu. Sie sollten nun am Ende Ihrer Adressleiste ein Leuchtturmsymbol sehen. Besuchen Sie die Webseite, die Sie überprüfen möchten, klicken Sie auf das Leuchtturmsymbol und wählen Sie dann Bericht generieren:

Zugriff auf Google Lighthouse über Chrome.

Diese Aktion führt Sie direkt zur Berichtsseite, auf der Sie die Benotungsdetails jeder Kategorie anzeigen können. Beachten Sie, dass es ein oder zwei Minuten dauern kann, bis die Prüfung abgeschlossen ist.

So verwenden Sie Google Lighthouse über Node

Wenn Sie mit Lighthouse nach Konfigurationsflexibilität suchen, können Sie auch ein Node-Modul verwenden. Dies ist eine fortschrittlichere Lösung, die jedoch eine bessere Kontrolle bietet.

Zuerst müssen Sie a . installieren Langfristige Support-Version von Node:

Die Node-Website.

Als nächstes können Sie die Befehlszeile ausführen, um Lighthouse zu installieren:

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

Schließlich können Sie das Audit mit dem folgenden Befehl durchführen:

lighthouse <url>

Natürlich sollten Sie die durch die Webadresse der Webseite ersetzen, die Sie überprüfen möchten. Sie können auf GitHub verweisen auf erfahre mehr über den Quellcode.

Fazit

Die regelmäßige Überprüfung Ihrer WordPress-Website ist unerlässlich, um Besuchern und Suchmaschinen gleichermaßen ein gutes Erlebnis zu bieten. Dank Tools wie Google Lighthouse können Sie die Leistung, SEO und Zugänglichkeit Ihrer Website in wenigen einfachen Schritten schnell beurteilen.

Wie wir in diesem Beitrag besprochen haben, ist Lighthouse ein kostenloses, automatisiertes Tool, mit dem Sie wertvolle Einblicke in die Leistung und das Gesamterlebnis Ihrer Webseiten gewinnen können. Sie können es verwenden, indem Sie eine Chrome-Erweiterung installieren oder DevTools direkt in Ihrem Browser verwenden. Anschließend können Sie die Berichte verwenden, um zu erfahren, wie Sie Ihre Website verbessern können.

Haben Sie Fragen zur Verwendung von Google Lighthouse? Lass es uns im Kommentarbereich unten wissen!

Ausgewähltes Bild über Cienpies Design/shutterstock.com

Published
Categorized as news

By Nguyen Manh Cuong

Nguyen Manh Cuong is the author and founder of the nguyendiep blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.

Leave a comment

Your email address will not be published. Required fields are marked *