Lighthouse ist ein automatisiertes Open-Source-Tool zur Verbesserung der Qualität Ihrer Web-Apps. Sie können es als Chrome-Erweiterung installieren oder als Node-Befehlszeilentool ausführen. Wenn Sie Lighthouse eine URL geben, führt das Tool eine Reihe von Tests auf der Seite durch und generiert dann einen Bericht, in dem die Leistung der Seite erläutert und Verbesserungsmöglichkeiten aufgezeigt werden.
Heute freuen wir uns, die Version 1.5 von Lighthouse ankündigen zu können. Diese Version enthält über 128 PRs und ist ein großer Release. Lighthouse 1.5 enthält eine Reihe wichtiger neuer Funktionen, Prüfungen und die üblichen Fehlerkorrekturen. Sie können sie über npm (npm i -g lighthouse) installieren oder die Erweiterung aus dem Chrome Web Store herunterladen.
Neue Audits
Die Analyse der CSS-Nutzung gibt Aufschluss über die Anzahl der nicht verwendeten Stilregeln auf Ihrer Seite und die Kosten- und Zeiteinsparungen, die sich durch deren Entfernung ergeben:
In der Überprüfung optimierter Bilder werden nicht optimierte Bilder und die Kosten- und Zeiteinsparungen durch die Optimierung aufgeführt:
Die Analyse für responsive Bilder meldet zu große Bilder und die potenziellen Kosten- und Zeiteinsparungen, die sich durch die richtige Größe für das jeweilige Gerät ergeben:
In der Prüfung auf eingestellte APIs und Maßnahmen werden Konsolenwarnungen aus Chrome aufgeführt, wenn auf Ihrer Seite eingestellte APIs oder Funktionen verwendet werden, für die Maßnahmen ergriffen wurden:
Änderungen melden
Wie Sie sehen, haben wir uns darauf konzentriert, den Bericht visuell weniger überladen zu gestalten. Dazu haben wir Tabellendaten hinzugefügt, überflüssigen Hilfetext ausgeblendet und neue Funktionen hinzugefügt, die die Navigation durch die Daten erleichtern.
Emulation-Einstellungen
Es ist leicht, zu vergessen, welche Drossel- und Emulationseinstellungen für einen bestimmten Lighthouse-Lauf verwendet wurden. Lighthouse-Berichte enthalten jetzt die Einstellungen für die Laufzeitemulation, die zum Erstellen des Berichts verwendet wurden. Dies ist eine lange erwartete Funktion:
Nützlichere Trace-Daten
Lighthouse-Messwerte wie „First Meaningful Paint“ und „Time to Interactive“ werden als Nutzerzeitmesswerte gemockt und wieder in die mit dem Flag --save-assets gespeicherten Trace-Daten eingefügt.
Wenn Sie das Flag --save-assets verwenden, können Sie den Trace jetzt in den DevTools ablegen oder in der Zeitachsenansicht der DevTools öffnen.
Sie können Ihre wichtigsten Messwerte im Kontext mit dem vollständigen Trace der Seitenladezeit sehen.
Lighthouse-Betrachter
In HTML-Berichten sehen Sie eine neue Schaltfläche mit Optionen zum Exportieren des Berichts in verschiedenen Formaten. Eine dieser Optionen ist „Im Viewer öffnen“. Wenn Sie auf diese Schaltfläche klicken, wird der Bericht an den Online-Viewer gesendet, wo Sie ihn mit GitHub-Nutzern teilen können.
Im Hintergrund erhält der Betrachter über OAuth Ihre Berechtigung, einen geheimen GitHub-Gist zu erstellen und den Bericht dort zu speichern. Da es sich um Ihren Gist handelt, haben Sie die volle Kontrolle über die Freigabe des Berichts und können ihn jederzeit löschen. Sie können die Berechtigung des Betrachters zum Erstellen von Gists in Ihren GitHub-Einstellungen widerrufen.
Leistungstest
Die erste Version des Projekts Performance Experiment ist in 1.5.0 verfügbar. So können Sie die Leistung des Seitenladevorgangs testen und während der Entwicklung interaktiv die Auswirkungen des Blockierens oder Verzögerns von Assets in Ihrem kritischen Pfad testen.
Wenn Lighthouse mit dem Flag --interactive ausgeführt wird, wird ein spezieller Bericht generiert, der die interaktive Auswahl kostenintensiver Seitenressourcen ermöglicht. Der Testserver führt dann Lighthouse auf dieser Seite noch einmal aus, wobei diese Ressourcen blockiert sind.
Neue Dokumentation
Last but not least haben wir die Dokumentation unter developers.google.com/web/tools/lighthouse/ modernisiert und neue Referenzen für Audits hinzugefügt.
Das war's erst einmal.
Alle Details zu den neuesten Funktionen von Lighthouse finden Sie in den vollständigen Versionshinweisen auf GitHub. Wie immer könnt ihr euch an uns wenden, um Fehler zu melden, Ideen zu äußern oder Funktionsanfragen zu stellen.