So analysieren Sie die Website-Leistung mit Lighthouse

Überprüfen Sie die Leistung der Website manuell, programmgesteuert oder automatisch

Lighthouse ist ein Open-Source-Projekt von Google, mit dem Sie die Leistung von Webseiten messen können. Es verfügt über konfigurierbare Einstellungen für die Wiedergabe verschiedener Bedingungen. Sie können beispielsweise den zu simulierenden Netzwerk- und Gerätetyp festlegen.

Sie geben Lighthouse eine URL für die Prüfung, es führt eine Reihe von Prüfungen für die Seite durch und generiert dann einen Bericht darüber, wie gut die Seite funktioniert hat. Verwenden Sie von dort aus die fehlgeschlagenen Audits als Indikatoren für die Verbesserung der Seite. Jedes Audit verfügt über ein Referenzdokument, in dem erläutert wird, warum das Audit wichtig ist und wie es behoben werden kann. Leuchtturm

Es gibt viele Gründe, warum Sie die Leistung messen möchten, aber einer der wichtigsten ist die Auswirkung auf die Suchmaschinenoptimierung. In diesem Artikel werde ich näher darauf eingehen und erläutern, wie bestimmte Metriken behandelt werden.

Lighthouse mit Chrome DevTools ausführen

Sie können Leistungsprüfungen manuell mit der Browsererweiterung Chrome DevTools ausführen. Starten Sie einfach die Erweiterung von der Webseite, die Sie testen möchten, und wählen Sie das Bedienfeld „Audits“ aus.

Unter einer Vielzahl von Audits können Sie „Leistung“ auswählen. Sie können auch den Gerätetyp und die Netzwerkdrosselung simulieren. Einige Informationen speziell zur Drosselung finden Sie im Lighthouse-Projekt Github Repo.

Klicken Sie anschließend auf "Audits ausführen". Nach Abschluss stellt Lighthouse einen Bericht in der Benutzeroberfläche der Erweiterung bereit.

Dieser Bericht bietet einen allgemeinen Überblick über wichtige Kennzahlen, Chancen und die Gesamtleistungsbewertung. Miniaturansichten veranschaulichen den Lebenszyklus des Seitenladens. Was bedeutet das alles? Google bietet eine Vielzahl von Dokumentationen, in denen jede Metrik, ihre Vorgehensweise und die Gesamtleistungsbewertung beschrieben werden.

Oben links im Chrome DevTools-Bereich befindet sich ein Download-Symbol, mit dem Sie den vollständigen Bericht im JSON-Format herunterladen können. Sie können es dann verwenden, um einen PDF-Bericht über Lighthouse Report Viewer zu erstellen.

Aufgrund des hohen Volumens an Faktoren, die den Lebenszyklus des Seitenladens beeinflussen, ist es wichtig, die Ergebnisse in Stapeln zu vergleichen. Wenn Sie beispielsweise durchschnittlich 5 Läufe durchführen, erhalten Sie einen besseren Einblick.

Programmierter Betrieb von Lighthouse

Für unsere Standardsituationen „Run of the Mill“ sollte das oben Genannte ausreichen. Eine andere Möglichkeit, Lighthouse auszuführen, besteht darin, das Open-Source-Paket über NPM zu installieren und die Anweisungen in der CLI-Dokumentation zu befolgen. Dies kann nützlich sein, wenn Sie Audits beispielsweise programmgesteuert in einer Build-Pipeline ausführen möchten.

Ähnlich wie oben können Sie Lighthouse auch im Code ausführen, indem Sie der Dokumentation zur programmgesteuerten Verwendung des Node-Moduls folgen. Sie könnten mit Lighthouse eine vollwertige Node.js-Anwendung erstellen ?!

Leuchtturm im Laufe der Zeit automatisch ausführen

Jetzt, da wir Profis sind, bringen wir dies auf die nächste Stufe. In der Lighthouse-Dokumentation sind viele Integrationen aufgeführt. Schauen wir uns also eine davon an.

Verwenden von „Foo“, um Lighthouse auszuführen und Ergebnisse im Laufe der Zeit zu vergleichen

In einer technischen Umgebung, in der viele Entwickler regelmäßig Anwendungsänderungen bereitstellen, kann es wichtig sein, die Leistung der Website im Laufe der Zeit zu überwachen, um Änderungssätze mit Leistungseinbußen oder -verbesserungen in Verbindung zu bringen. Ein weiteres Beispiel wären Teams, die Initiativen zur Verbesserung der Leistung aus SEO-Rankings oder anderen Gründen haben. In diesen Situationen ist es wichtig, die Leistung der Website über Tage, Wochen, Monate usw. zu überwachen.

Sie können URLs hinzufügen, um sie unter www.foo.software zu verfolgen und Leistungsänderungen zu überwachen. Foo bietet auch E-Mail-, Slack- oder PagerDuty-Benachrichtigungen an, wenn die Leistung unter einen vom Benutzer festgelegten Schwellenwert gefallen ist, wenn sie wieder normal ist und wenn Verbesserungen automatisch erkannt werden!

Das Beste daran ist, dass Sie kostenlos ein Konto erstellen können! Sobald Sie registriert und angemeldet sind, klicken Sie in der oberen Navigation auf den Link "Seiten". Hier können Sie URLs zur Überwachung hinzufügen. Foo speichert die Ergebnisse und zeigt ein Zeitplandiagramm an, das wichtige Metriken visualisiert. Sie können zwischen Tagen, Wochen, Monaten wechseln und detaillierte Berichte erstellen.

Fazit

Lighthouse wird zum Industriestandard für die Messung der Website-Leistung. Es gibt Bücher über Lighthouse, die eine Dokumentation wert sind und Details zu wichtigen Metriken enthalten.