Lighthouse ist ein Tool, mit dem Sie die Leistung einer Seite messen und Möglichkeiten zur Verbesserung finden können. So funktioniert Lighthouse im Allgemeinen:
- Sie geben Lighthouse an, welche Seite geprüft werden soll.
- Lighthouse lädt diese Seite und erfasst, wie lange es dauert, bis die Seite verschiedene Leistungsmeilensteine erreicht. Diese Meilensteine werden als Messwerte bezeichnet.
- Lighthouse liefert Ihnen einen Bericht zur Leistung der Seite. Der Bericht enthält einen Wert für jeden Messwert und eine Liste von Optimierungsvorschlägen, mit denen sich die Ladezeit der Seite verkürzen lässt.
Ihr Ziel sollte es sein, die Bewertungen Ihrer Messwerte im Laufe der Zeit zu verbessern oder zumindest dafür zu sorgen, dass sie nicht schlechter werden. Es gibt jedoch keine Möglichkeit, direkt an Messwerten zu arbeiten. Stattdessen folgen Sie den Empfehlungen von Lighthouse. Wenn Sie diese Verbesserungsmöglichkeiten nutzen, lassen sich Ihre Messwerte in der Regel verbessern.
Lighthouse über die Profilseite ausführen
Lighthouse über die Seite Ihres web.dev-Profils ausführen:
Geben Sie eine beliebige URL an. Lighthouse führt dann eine Reihe von Prüfungen durch und erstellt einen Bericht zur Leistung der Seite.
Sehen Sie sich den Analysebericht an, um Bereiche zu identifizieren, in denen Ihre Seite verbessert werden kann.
Für jede Analyse erhalten Sie Anleitungen und sofort umsetzbare Maßnahmen, mit denen Sie Ihre Bewertung verbessern können.
Lighthouse über die Chrome-Entwicklertools ausführen
Die Chrome-Entwicklertools sind eine Reihe von Webentwicklertools, die direkt in den Google Chrome-Browser integriert sind. Sie müssen nichts herunterladen, um DevTools zu verwenden. Wenn Sie Chrome haben, haben Sie auch die Entwicklertools.
- Rufen Sie in Chrome die Seite auf, die Sie prüfen möchten.
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Audits. Wenn dieser Tab nicht angezeigt wird, klicken Sie auf das »-Symbol und wählen Sie dann Audits aus der Liste aus. Lighthouse ist die Engine, die das Steuerfeld Prüfungen unterstützt. Deshalb sehen Sie ein Bild eines Leuchtturms.
- Das Optionsfeld Mobilgerät muss ausgewählt sein. Bei der Prüfung Ihrer Seite durch Lighthouse werden der Darstellungsbereich und der User-Agent-String eines Mobilgeräts simuliert.
- Das Kästchen Leistung muss aktiviert sein. Sie können die übrigen Kästchen im Bereich Audits aktivieren oder deaktivieren. Wenn Sie sie aktivieren, sehen Sie eine Reihe von Möglichkeiten, diese anderen Aspekte Ihrer Seite zu verbessern.
- Das Optionsfeld Simuliertes schnelles 3G, 4x CPU-Verlangsamung muss ausgewählt sein. Lighthouse drosselt Ihr Netzwerk oder Ihre CPU beim Laden der Seite nicht. Stattdessen wird ermittelt, wie lange das Laden der Seite unter normalen Bedingungen gedauert hat, und dann wird geschätzt, wie lange es in einem schnellen 3G-Netzwerk mit einer CPU gedauert hätte, die viermal weniger leistungsstark ist als die Ihres Computers.
- Das Kästchen Speicherplatz freigeben muss aktiviert sein. Bei dieser Option wird Lighthouse gezwungen, für jede Seitenressource das Netzwerk aufzurufen. So wird die Seite für Erstbesucher dargestellt.
- Klicken Sie auf Audits ausführen. Nach 5 bis 10 Sekunden wird in Lighthouse ein Bericht angezeigt.
Wenn Sie beispielsweise einige Prüfungen mit Simuliertem schnellem 3G und aktivierter 4-fachen CPU-Verlangsamung und andere Prüfungen mit deaktivierter Drosselung ausführen, sind die Messwertbewertungen bei aktivierter Drosselung deutlich niedriger. Sie könnten viel Zeit damit verbringen, herauszufinden, warum Ihre Seite jetzt so viel langsamer ist, obwohl sich in Wirklichkeit nur die Konfiguration geändert hat.
Bericht auswerten
Oben rechts im Bericht sehen Sie Ihre Gesamtbewertung. 100 Punkte sind die Bestnote. Unter der Gesamtpunktzahl finden Sie die Messwertbewertungen. Im Lighthouse v3-Bewertungsleitfaden wird erläutert, wie sich die einzelnen Messwerte auf die Gesamtbewertung auswirken.
Bewegen Sie den Mauszeiger auf einen Messwert, um mehr darüber zu erfahren. Klicken Sie auf Weitere Informationen, um die entsprechende Dokumentation aufzurufen.
Unter den Messwertbewertungen sehen Sie Screenshots, wie die Seite während des Ladevorgangs aussah.
Unter den Screenshots sehen Sie Möglichkeiten zur Leistungssteigerung der Seite.
Klicken Sie auf eine Empfehlung, um weitere Informationen zu erhalten.
Nächste Schritte
Prüfen Sie Ihre Seite mit Lighthouse, entweder über Ihre Profilseite oder über die Chrome-Entwicklertools. Implementieren Sie eine der Empfehlungen und prüfen Sie dann noch einmal Ihre Seite, um zu sehen, wie sich die Änderung auf Ihren Bericht ausgewirkt hat. Die Bewertungen Ihrer Messwerte sollten idealerweise etwas besser sein und Lighthouse sollte diese Verbesserungsmöglichkeit nicht mehr als Aufgabe anzeigen.
Wenn Sie Lighthouse selbst ausführen, können Sie Probleme punktuell prüfen. Sie sollten jedoch ein kontinuierliches Monitoring einrichten, um sicherzustellen, dass Ihre Website fehlerfrei bleibt. Wenn Sie den Fortschritt Ihrer Lighthouse-Optimierung im Zeitverlauf verfolgen möchten, fügen Sie Ihre Website Ihrem Profil hinzu.