Lighthouse ist ein Tool zur Prüfung von Websites, das Entwicklern Möglichkeiten und Diagnosemöglichkeiten bietet, um die Nutzerfreundlichkeit ihrer Websites zu verbessern.
Lighthouse 10 ist sofort über die Befehlszeile über npm und in Chrome Canary verfügbar. In den kommenden Wochen wird sie in Chrome 112 auch in der stabilen Chrome-Version und in PageSpeed Insights eingeführt.
Ergebnisänderungen
Der traditionsreiche Messwert Zeit bis Interaktivität (Time To Interactive, TTI) wird in Lighthouse 10 entfernt und damit der Einstellungsprozess von Lighthouse 8 beendet. Die TTI-Bewertung von 10% wird auf den Cumulative Layout Shift (CLS) verlagert, der jetzt 25% der Gesamtleistung ausmacht.
Der TTI markiert einen Zeitpunkt, aber seine Definition macht ihn zu empfindlich auf Ausreißer-Netzwerkanfragen und lange Aufgaben. Der Largest Contentful Paint (LCP) und der Speed Index sind in der Regel eine bessere Heuristik dafür, dass der Inhalt einer Seite geladen ist als die Anzahl der aktiven Netzwerkanfragen. Mit der Total Blocking Time (TBT) werden lange Aufgaben und die Hauptthread-Verfügbarkeit zuverlässiger verarbeitet. Auch wenn es sich nicht um einen direkten Proxy handelt, korreliert sie tendenziell besser mit den Core Web Vitals, wie sie vor Ort gemessen werden.
Die höhere Gewichtung von CLS ist neben der Entfernung von TTI beteiligt, spiegelt jedoch seine Bedeutung als Core Web Vital besser wider und verbessert idealerweise den Fokus für Websites, die immer noch unnötige Layoutänderungen vornehmen.
Wir gehen davon aus, dass sich dadurch da die meisten Seiten beim CLS besser abschneiden als beim TTI. Bei einer Analyse von 13 Millionen Seitenladevorgängen bei der letzten HTTP-Archivausführung ergab sich für 90% dieser Seiten eine Verbesserung der Lighthouse-Leistung. Bei 50% dieser Seiten wurde eine Leistungssteigerung von mehr als 5 Punkten verzeichnet.
Wenn Sie den Lighthouse-TTI-Wert weiterhin benötigen (z. B. in einer CI-Assertion), ist er weiterhin unverändert in der Lighthouse-JSON-Ausgabe verfügbar, nur mit der Punktzahl „0“ und im HTML-Bericht ausgeblendet. Jeder Skriptzugriff auf den JSON-Wert sollte weiterhin ohne Änderungen funktionieren.
Neue Prüfungen
Lighthouse 10 umfasst eine brandneue Leistungsüberprüfung und eine weitere erhebliche Veränderung.
Back-Forward-Cache
Der Back-Forward-Cache (bfcache) ist eines der leistungsstärksten Tools, mit denen sich die Leistung einer Seite für echte Nutzer verbessern lässt. Über den normalen Browser-Cache hinaus werden bei einer aus dem bfcache geladenen Seite das Layout und der Ausführungsstatus der Seite nahezu sofort wiederhergestellt. Dabei werden alle Seitenladeaktivitäten weitgehend übersprungen und Ihre Seite wird den Nutzern sofort angezeigt, wenn sie im Verlauf vor und zurück navigieren.
Es gibt jedoch ein paar Möglichkeiten, wie eine Seite den Browser daran hindern kann, eine Seite aus dem bfcache wiederherzustellen. Bei dieser neuen Lighthouse-Prüfung wird tatsächlich von der Testseite weg und dann wieder zurückgekehrt, um zu testen, ob sie für den bfCache-Speicher geeignet ist. Außerdem werden die Gründe für das Fehlschlagen aufgeführt.
Weitere Informationen finden Sie in der Dokumentation zum bfcache-Audit.
Eingaben verhindern, dass Dateien eingefügt werden
Die alte Best Practices-Prüfung „Nutzern erlauben, Daten in Passwortfelder einzufügen“ wurde erweitert, um zu überprüfen, ob das Einfügen in jedes (nicht schreibgeschützte) Eingabefeld funktioniert. Bei den meisten Websites ist das Verhindern des Einfügens eine negative Nutzererfahrung und verhindert legitime Workflows für Sicherheit und Barrierefreiheit.
Die neue Prüfung lautet jetzt „Ermöglicht Nutzern, Inhalte in Eingabefelder einzufügen“ (paste-preventing-inputs)
Knotennutzer
Wenn Sie Lighthouse als Knotenbibliothek verwenden, müssen Sie in dieser Version möglicherweise einige wichtige Änderungen bei programmatischen Aktualisierungen berücksichtigen. Ausführliche Informationen finden Sie im Änderungsprotokoll für 10.0.
Lighthouse 10 wird auch mit vollständigen TypeScript-Typdeklarationen ausgeliefert. Alle aus lighthouse importierten Daten sollten jetzt eingegeben werden. Dies ist besonders hilfreich, wenn Sie Skripts für Lighthouse-Nutzerflüsse erstellen.
Probieren Sie die verschiedenen Typen aus und informieren Sie uns, falls bei deren Verwendung Probleme auftreten.
Running Lighthouse
Lighthouse ist in den Chrome-Entwicklertools, npm (als Node-Modul und CLI-Tool) sowie als Browsererweiterung (in Chrome und Firefox) verfügbar. Außerdem unterstützt er verschiedene Google-Dienste wie PageSpeed Insights.
Verwenden Sie die folgenden Befehle, um die Lighthouse Node-Befehlszeile auszuprobieren:
npm install -g lighthouse
lighthouse https://www.example.com --view
Lighthouse-Team kontaktieren
Hier geht es um die neuen Funktionen, Änderungen in Lighthouse 10 oder alles andere mit Lighthouse:
- Im Lighthouse GitHub-Issue Tracker können Sie Probleme melden oder Feedback geben.
- Stellen Sie Fragen in den Lighthouse-GitHub-Diskussionsforen.
- Dann wenden Sie sich einfach an das Lighthouse-Team auf Twitter: @____lighthouse.