Lighthouse ist ein Tool, mit dem du die Leistung einer Seite messen und verbessern kannst. Hier ist der allgemeine Workflow für die Verwendung von Lighthouse:
- Sie legen in Lighthouse fest, welche Seite geprüft werden soll.
- Diese Seite wird von Lighthouse geladen und erfasst, wie lange sie benötigt, um verschiedene Leistungsmeilensteine zu erreichen. Diese Meilensteine werden als metrics bezeichnet.
- In Lighthouse erhalten Sie einen Bericht zur Leistung der Seite. Der Bericht enthält einen Wert für jeden Messwert und eine Liste von Empfehlungen. Wenn Sie sie implementieren, sollte das Laden der Seite beschleunigt werden.
Ihr Ziel ist es, Ihre Messwertwerte im Laufe der Zeit zu verbessern oder zumindest sicherzustellen, dass sie sich nicht verschlechtern. Es gibt jedoch keine Möglichkeit, direkt mit Messwerten zu arbeiten. Stattdessen verfolgen Sie die Möglichkeiten, die Lighthouse bietet. Wenn Sie diese Möglichkeiten nutzen, können Sie Ihre Messwerte verbessern.
Lighthouse über deine Profilseite
Führen Sie Lighthouse über Ihre web.dev-Profilseite aus:
Geben Sie eine beliebige URL an und Lighthouse führt eine Reihe von Prüfungen durch. Dabei wird ein Bericht zur Leistung der Seite erstellt.
Überprüfen Sie den Prüfungsbericht, um herauszufinden, in welchen Bereichen Ihre Seite verbessert werden kann.
Für jede Prüfung erhalten Sie Hinweise und sofortige Maßnahmen, mit denen Sie Ihre Bewertungen verbessern können.
Lighthouse über die Chrome-Entwicklertools ausführen
Chrome-Entwicklertools sind Webentwicklertools, die direkt in den Google Chrome-Browser integriert sind. Du musst nichts herunterladen, um die Entwicklertools nutzen zu können. Wenn Sie Chrome nutzen, 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 + Option + J auf dem 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 in der Liste Audits aus. Lighthouse ist die Engine für den Bereich Audits. Deshalb siehst du das Bild eines Leuchtturms.
- Achten Sie darauf, dass das Optionsfeld Mobil ausgewählt ist. Wenn Lighthouse deine Seite prüft, simuliert es den Darstellungsbereich und den User-Agent-String eines Mobilgeräts.
- Das Kästchen Leistung muss angeklickt sein. Sie können die restlichen Kästchen im Bereich Audits aktivieren oder deaktivieren. Wenn ihr sie aktiviert, werdet ihr eine Reihe von Möglichkeiten zur Verbesserung dieser anderen Aspekte eurer Seite entdecken.
- Achten Sie darauf, dass das Optionsfeld Simulated Fast 3G, 4x CPU Slowdown ausgewählt ist. Ihr Netzwerk oder Ihre CPU wird von Lighthouse nicht gedrosselt, während die Seite geladen wird. Stattdessen wird geprüft, wie lange das Laden der Seite unter normalen Bedingungen gedauert hat, und dann schätzt, wie lange sie in einem schnellen 3G-Netzwerk mit einer CPU, die viermal weniger leistungsstark ist als die Ihres Computers, in Anspruch genommen hätte.
- Achten Sie darauf, dass das Kästchen Speicherinhalt löschen angeklickt ist. Diese Option zwingt Lighthouse, für jede Seitenressource das Netzwerk aufzurufen. Dies gibt an, wie die Seite erstmalig aufgerufen wird.
- Klicken Sie auf Audits ausführen. Nach 5 bis 10 Sekunden sehen Sie in Lighthouse einen Bericht.
Wenn Sie beispielsweise einige Audits mit Simulated Fast 3G, 4x CPU Slowdown-Drosselung aktiviert und dann Audits mit deaktivierter Drosselung ausführen, sind Ihre Messwertwerte deutlich niedriger, wenn Sie die Drosselung aktiviert haben. Vielleicht verbringen Sie viel Zeit damit, herauszufinden, warum Ihre Seite jetzt so viel langsamer ist, aber in Wirklichkeit hat sich nur die Konfiguration geändert.
Bericht auswerten
Oben rechts im Bericht sehen Sie die Gesamtleistung. 100 ist eine perfekte Punktzahl. Unter der Gesamtpunktzahl sind die Messwerte zu sehen. In Lighthouse v3 Bewertungsleitfaden wird erläutert, wie jeder Messwert zur Gesamtpunktzahl beiträgt.
Bewegen Sie den Mauszeiger auf einen Messwert, um mehr darüber zu erfahren. Klicken Sie auf Weitere Informationen, um die entsprechende Dokumentation zu lesen.
Unterhalb der Punktzahlen sehen Sie Screenshots der Seite, während sie geladen wurde.
Unter den Screenshots siehst du Möglichkeiten, die Leistung der Seite zu verbessern.
Klicken Sie auf eine Empfehlung, um mehr darüber zu erfahren.
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 Ihre Seite noch einmal, um zu sehen, wie sich die Änderung auf Ihren Bericht ausgewirkt hat. Ihre Messwerte sollten idealerweise etwas besser sein und Lighthouse sollte diese Chance nicht mehr als Arbeitsgrundlage kennzeichnen.
Wenn Sie Lighthouse selbst ausführen, können Sie stichprobenartige Probleme ermitteln. Am Ende ist es aber sinnvoll, ein kontinuierliches Monitoring einzurichten, damit Ihre Website fehlerfrei bleibt. Wenn Sie den Fortschritt von Lighthouse im Zeitverlauf verfolgen möchten, fügen Sie Ihre Website Ihrem Profil hinzu.