Sinds Google I/O hebben we hard gewerkt om van Lighthouse een geweldige metgezel te maken voor het bouwen van geweldige Progressive Web Apps :
- Verwelkomde 50 nieuwe bijdragers aan het project
- 15 releases verzonden
- ~20 extra audittests toegevoegd (~50 totaal)
Vandaag kondigen we met trots de 1.3-release van Lighthouse aan. Lighthouse 1.3 bevat een aantal grote nieuwe functies, audits en de gebruikelijke bugfixes. U kunt het installeren vanaf npm ( npm i -g lighthouse ) of de extensie downloaden via de Chrome Web Store.
Dus, wat is er nieuw?
Nieuwe look en feel
Als je een eerdere versie van Lighthouse hebt gebruikt, is het je misschien opgevallen dat het logo nieuw is! Het HTML-rapport en de Chrome-extensie hebben ook een volledige vernieuwing ondergaan, met een duidelijkere presentatie van de scores en meer consistentie tussen de auditresultaten. We hebben ook nuttige foutopsporingsinformatie toegevoegd als u een test niet doorstaat, en verwijzen naar aanbevolen oplossingen.
Nieuwe beste praktijken
Tot nu toe heeft Lighthouse zich geconcentreerd op prestatiestatistieken en de kwaliteit van PWA's. Een overkoepelend doel van het project is echter om een handleiding te bieden voor alle webontwikkeling. Dit omvat onder meer begeleiding bij algemene best practices, tips voor prestaties en toegankelijkheid, en end-to-end hulp bij het maken van kwaliteitsapps.
"Do Better Web" is een poging binnen het Lighthouse-project om ontwikkelaars te helpen beter te presteren op internet. Met andere woorden, help hen hun webapplicaties te moderniseren en optimaliseren. Vaak gebruiken webontwikkelaars verouderde praktijken, antipatronen of lopen ze tegen bekende prestatievalkuilen aan zonder het te beseffen. Het is bijvoorbeeld algemeen bekend dat op JS gebaseerde animaties moeten worden uitgevoerd met requestAnimationFrame() in plaats van setInterval() . Als de ontwikkelaar echter niet op de hoogte is van de nieuwere API, lijdt zijn webapp daar onnodig onder.
Lighthouse 1.3 bevat meer dan 20 nieuwe best practice suggesties, variërend van tips voor het moderniseren van CSS- en JavaScript-functies tot prestatie-aanbevelingen zoals: "Verminder het aantal render-blocking assets", "Gebruik passieve gebeurtenislisteners om de scrollprestaties te verbeteren".
We zullen in de loop van de tijd meer aanbevelingen blijven toevoegen. Als u suggesties heeft voor best practices of ons wilt helpen bij het schrijven van een audit, kunt u een probleem indienen op GitHub.
Rapportviewer
Last but not least kondigen we met trots een nieuwe webviewer voor Lighthouse-resultaten aan. Ga naar googlechrome.github.io/lighthouse/viewer , sleep de uitvoer van een Lighthouse-run (of klik om uw bestand te uploaden) en voila. "Insta" Lighthouse HTML-rapport.
Met Lighthouse Viewer kunt u ook rapporten met anderen delen. Als u op het deelpictogram klikt, meldt u zich aan bij GitHub. We bewaren rapporten als geheime inhoud in uw account, zodat u een gedeeld rapport eenvoudig kunt verwijderen of later kunt bijwerken. Het gebruik van GitHub voor gegevensopslag betekent ook dat u gratis versiebeheer krijgt!
Bestaande rapporten kunnen door Lighthouse Viewer opnieuw worden geladen door ?gist=GIST_ID aan de URL toe te voegen:
Voor alle details over het nieuwste in Lighthouse, zie de volledige release-opmerkingen op GitHub. Zoals altijd kunt u ons bellen om bugs te melden , functieverzoeken in te dienen of te brainstormen over wat u nu graag zou willen zien.