Seit der Google I/O arbeiten wir hart daran, Lighthouse zu einem großartigen Begleiter für die Entwicklung großartiger progressiver Web-Apps zu machen:
- 50 neue contributors zum Projekt hinzugefügt
- Versendete 15 Releases
- Ca. 20 zusätzliche Audit-Tests hinzugefügt (insgesamt ca. 50)
Wir freuen uns, Ihnen heute Version 1.3 von Lighthouse vorstellen zu können. Lighthouse 1.3 enthält eine Reihe großer 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, um die Bewertungen übersichtlicher darzustellen und die Prüfungsergebnisse einheitlicher zu gestalten. Wir haben außerdem hilfreiche Informationen zur Fehlerbehebung hinzugefügt, wenn ein Test fehlschlägt, und geben Hinweise auf empfohlene Problemumgehungen.
Neue Best Practices
Bisher konzentrierte sich Lighthouse auf Leistungsmesswerte und die Qualität von PWAs. Ein übergeordnetes Ziel des Projekts ist es jedoch, einen Leitfaden für die gesamte Webentwicklung bereitzustellen. Dazu gehören Hinweise zu allgemeinen Best Practices, Tipps zur Leistung und Barrierefreiheit sowie umfassende Hilfe bei der Erstellung hochwertiger Apps.
„Do Better Web“ ist eine Initiative innerhalb des Lighthouse-Projekts, die Entwicklern dabei helfen soll, das Web zu verbessern. Mit anderen Worten: Unterstützen Sie das Unternehmen bei der Modernisierung und Optimierung seiner Webanwendungen. Oftmals nutzen Webentwickler veraltete Methoden und Anti-Muster oder stoßen auf bekannte Leistungsprobleme, ohne es zu merken. Es ist beispielsweise weit bekannt, dass JS-basierte Animationen mit requestAnimationFrame() statt mit setInterval() ausgeführt werden sollten. Wenn der Entwickler jedoch die neuere API nicht kennt, leidet seine Webanwendung unnötig.
Lighthouse 1.3 enthält mehr als 20 neue Best Practice-Vorschläge, von Tipps zur Modernisierung von CSS- und JavaScript-Funktionen bis hin zu Leistungsempfehlungen wie „Anzahl der Assets reduzieren, die das Rendering blockieren“, „Passive Event-Listener verwenden, um die Scrollleistung zu verbessern.“
Wir fügen im Laufe der Zeit weitere Empfehlungen hinzu. Wenn Sie Vorschläge für Best Practices haben oder uns beim Verfassen eines Audits helfen möchten, können Sie auf GitHub ein Problem melden.
Berichtsanzeige
Außerdem freuen wir uns, einen neuen Web-Viewer für Lighthouse-Ergebnisse ankündigen zu können. Rufen Sie googlechrome.github.io/lighthouse/viewer auf, ziehen Sie die Ausgabe einer Lighthouse-Ausführung per Drag-and-drop (oder klicken Sie, um die Datei hochzuladen) und voilà. Lighthouse-HTML-Bericht „Insta“.
Mit Lighthouse Viewer können Sie Berichte auch mit anderen teilen. Wenn Sie auf das Freigabesymbol klicken, werden Sie in GitHub angemeldet. Wir speichern Berichte als geheimer Schlüssel in Ihrem Konto, sodass Sie einen freigegebenen Bericht einfach löschen oder später aktualisieren können. Wenn Sie GitHub für die Datenspeicherung nutzen, erhalten Sie außerdem eine kostenlose Versionsverwaltung.
Vorhandene Berichte können vom Lighthouse Viewer aktualisiert werden, indem Sie ?gist=GIST_ID in die URL einfügen:
Alle aktuellen Informationen zu Lighthouse finden Sie in den vollständigen Versionshinweisen auf GitHub. Melde dich wie immer an, um Fehler zu melden, Funktionsanfragen zu stellen oder Ideen dazu zu sammeln, was du als Nächstes sehen möchtest.