Seit der Google I/O haben wir hart daran gearbeitet, Lighthouse zu einem hervorragenden Tool für die Entwicklung von progressiven Web-Apps zu machen:
- 50 neue Mitwirkende am Projekt
- 15 Releases wurden veröffentlicht
- Etwa 20 zusätzliche Audit-Tests wurden hinzugefügt (insgesamt etwa 50).
Heute freuen wir uns, die Version 1.3 von Lighthouse ankündigen zu können. Lighthouse 1.3 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.
Was ist neu?
Neues Design
Wenn Sie eine frühere Version von Lighthouse verwendet haben, ist Ihnen vielleicht aufgefallen, dass das Logo neu ist. Auch der HTML-Bericht und die Chrome-Erweiterung wurden komplett überarbeitet. Die Bewertung ist jetzt übersichtlicher und die Ergebnisse der Prüfungen sind einheitlicher. Außerdem haben wir hilfreiche Informationen zur Fehlerbehebung hinzugefügt, wenn ein Test fehlschlägt, und Hinweise auf empfohlene Problemumgehungen.
Neue Best Practices
Bisher lag der Schwerpunkt von Lighthouse auf Leistungsmesswerten und der Qualität von PWAs. Ein übergeordnetes Ziel des Projekts besteht jedoch darin, ein Leitfaden für die gesamte Webentwicklung bereitzustellen. Dazu gehören allgemeine Best Practices, Tipps zur Leistung und Barrierefreiheit sowie eine umfassende Anleitung zur Entwicklung hochwertiger Apps.
„Do Better Web“ ist ein Projekt im Rahmen von Lighthouse, das Entwicklern helfen soll, im Web bessere Ergebnisse zu erzielen. Mit anderen Worten: Sie helfen ihnen, ihre Webanwendungen zu modernisieren und zu optimieren. Häufig verwenden Webentwickler veraltete Praktiken, Anti-Muster oder stoßen auf bekannte Leistungsfallen, ohne es zu merken. Es ist beispielsweise weithin bekannt, dass JS-basierte Animationen mit requestAnimationFrame() und nicht mit setInterval() erstellt werden sollten. Wenn der Entwickler jedoch nicht mit der neueren API vertraut ist, leidet seine Webanwendung unnötig.
Lighthouse 1.3 enthält über 20 neue Best Practices, darunter Tipps zur Modernisierung von CSS- und JavaScript-Funktionen sowie Leistungsempfehlungen wie „Reduzieren Sie die Anzahl der renderblockierenden Assets“ und „Verwenden Sie passive Ereignis-Listener, um die Scrollleistung zu verbessern“.
Im Laufe der Zeit werden wir weitere Empfehlungen hinzufügen. Wenn Sie Vorschläge für Best Practices haben oder uns bei der Erstellung einer Analyse helfen möchten, melden Sie ein Problem auf GitHub.
Berichtsanzeige
Zu guter Letzt möchten wir einen neuen Web-Viewer für Lighthouse-Ergebnisse ankündigen. Rufen Sie googlechrome.github.io/lighthouse/viewer auf, ziehen Sie die Ausgabe eines Lighthouse-Laufs per Drag-and-drop hinein (oder klicken Sie, um die Datei hochzuladen), und schon ist das Ergebnis da. „Insta“ Lighthouse-HTML-Bericht
Mit Lighthouse Viewer können Sie Berichte auch für andere freigeben. Wenn Sie auf das Symbol zum Teilen klicken, werden Sie bei GitHub angemeldet. Wir speichern Berichte als geheime Gist-Datei in Ihrem Konto, damit Sie freigegebene Berichte ganz einfach löschen oder später aktualisieren können. Wenn Sie GitHub für die Datenspeicherung verwenden, erhalten Sie außerdem kostenlos eine Versionskontrolle.
Vorhandene Berichte können im Lighthouse Viewer neu geladen werden, indem Sie ?gist=GIST_ID zur URL hinzufügen:
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, Funktionsanfragen zu stellen oder Ideen zu entwickeln, was ihr euch als Nächstes wünschen würdet.