Lighthouse ist ein Tool zur Prüfung von Websites, das Entwickler mit Möglichkeiten und Diagnosen unterstützt, die Nutzererfahrung auf ihren Websites zu verbessern.
Lighthouse 10 ist sofort über die Befehlszeile über npm und in Chrome Canary verfügbar. Sie wird in den kommenden Wochen in Chrome 112 und in PageSpeed Insights verfügbar sein.
Ergebnisänderungen
Der traditionsreiche Messwert Zeit bis Interaktivität wird in Lighthouse 10 entfernt. Damit ist die Einstellung von Lighthouse 8 abgeschlossen. Die Gewichtung der TTI-Punktzahl von 10% verlagert sich zum Cumulative Layout Shift (CLS), der jetzt 25% des Gesamtleistungsfaktors ausmacht.
TTI kennzeichnet einen Zeitpunkt, aber seine Definition macht ihn zu empfindlich auf Ausreißer-Netzwerkanfragen und lange Aufgaben. Largest Contentful Paint (LCP) und Speed Index sind in der Regel bessere Heuristiken dafür, dass der Inhalt einer Seite geladen wird als die Anzahl aktiver Netzwerkanfragen. Mit der Total Blocking Time (TBT) werden lange Aufgaben und die Verfügbarkeit des Hauptthreads robuster verarbeitet. Obwohl es kein direkter Proxy ist, korreliert sie tendenziell besser mit den vor Ort gemessenen Core Web Vitals.
Die erhöhte Gewichtung von CLS ist mit der Entfernung von TTI verbunden, spiegelt jedoch seine Bedeutung als Core Web Vital besser wider und wird idealerweise auf Websites verstärkt, auf denen immer noch unnötige Layoutverschiebungen durchgeführt werden.
Wir gehen davon aus, dass sich dadurch die Leistungsbewertung der meisten Seiten verbessern lässt, da die meisten Seiten bei CLS in der Regel besser abschneiden als mit TTI. Bei einer Analyse der 13 Millionen Seitenladevorgänge beim letzten HTTP-Archivdurchlauf ließen sich für 90% dieser Seiten eine Verbesserung der Lighthouse-Leistungsbewertung erkennen. Für 50% wurde eine Leistungsverbesserung von mehr als 5 Punkten verzeichnet.
Wenn Sie den Lighthouse-TTI-Wert aus irgendeinem Grund weiterhin benötigen (z. B. in einer CI-Assertion), ist er weiterhin unverändert in der Lighthouse-JSON-Ausgabe verfügbar, nur mit der Gewichtung „0“ und im HTML-Bericht ausgeblendet. Jeder Skriptzugriff auf den JSON-Wert sollte auch weiterhin ohne Änderungen funktionieren.
Neue Prüfungen
Lighthouse 10 bietet eine brandneue Leistungsprüfung und erhebliche Änderungen.
Back-Forward-Cache
Der Back-Forward-Cache (bfcache) ist eines der leistungsstärksten Tools, um die Leistung einer Seite für echte Nutzer zu verbessern. Über den normalen Browser-Cache hinaus stellt eine aus dem bfcache geladene Seite das Seitenlayout und den Ausführungsstatus beinahe sofort wieder her. Dabei werden alle Aktivitäten beim Laden von Seiten weitgehend übersprungen und Ihre Seite wird den Nutzern sofort angezeigt, wenn sie im Verlauf vorwärts und rückwärts navigieren.
Es gibt jedoch einige Möglichkeiten, wie eine Seite verhindern kann, dass der Browser eine Seite aus dem bfcache wiederherstellen kann. Bei dieser neuen Lighthouse-Prüfung wird von der Testseite weg und wieder zurück gewechselt, um zu testen, ob sie bfcache-fähig ist, und die Gründe für den Fehlschlag aufgelistet.
Weitere Informationen finden Sie in der Dokumentation zum bfcache-Audit.
Eingefügte Eingaben verhindern
Die Prüfung der alten Best Practices „Ermöglicht Nutzern das Einfügen in Passwortfelder“ wurde erweitert. Jetzt wird geprüft, ob das Einfügen in beliebige (nicht schreibgeschützte) Eingabefelder funktioniert. Für die meisten Websites ist das Verhindern des Einfügens eine negative Nutzererfahrung und verhindert legitime Sicherheits- und Bedienungshilfen-Workflows.
Die neue Prüfung heißt jetzt „Ermöglicht Nutzern das Einfügen in Eingabefelder“ (paste-preventing-inputs).
Knotennutzer
Wenn Sie Lighthouse als Knotenbibliothek verwenden, gibt es in diesem Release einige funktionsgefährdende Änderungen, die Sie möglicherweise berücksichtigen müssen. Weitere Informationen finden Sie im Änderungsprotokoll zu 10.0.
Lighthouse 10 wird auch mit vollständigen TypeScript-Typdeklarationen ausgeliefert. Jetzt sollte alles eingegeben werden, was aus lighthouse importiert wurde. Dies ist besonders hilfreich, wenn Sie Skripts für Lighthouse-Nutzerabläufe erstellen.
Probieren Sie die Typen aus und geben Sie uns Bescheid, wenn Sie Probleme bei der Verwendung haben.
Running Lighthouse
Lighthouse ist verfügbar in den Chrome-Entwicklertools, npm (als Knotenmodul und Befehlszeilentool) und als Browsererweiterung (in Chrome und Firefox). Darüber hinaus wird er auch für verschiedene Google-Dienste wie PageSpeed Insights eingesetzt.
Verwenden Sie die folgenden Befehle, um die Lighthouse Node CLI auszuprobieren:
npm install -g lighthouse
lighthouse https://www.example.com --view
Lighthouse-Team kontaktieren
Wenn du über die neuen Funktionen, Änderungen in Lighthouse 10 oder andere Themen im Zusammenhang mit Lighthouse sprechen möchtest, gehe zu:
- Im Lighthouse GitHub-Problemverfolgung können Sie ein Problem melden oder Feedback geben.
- Stellen Sie Fragen in den Lighthouse-GitHub-Diskussionsforen.
- Sie erreichen das Lighthouse-Team auf Twitter (@____lighthouse).