Lighthouse è uno strumento automatizzato open source per migliorare la qualità delle tue app web. Puoi installarla come estensione di Chrome o eseguirla come strumento a riga di comando dei nodi. Quando assegni un URL a Lighthouse, viene eseguita una raffica di test sulla pagina e viene generato un report che spiega il rendimento della pagina e indica le aree da migliorare.
Oggi siamo lieti di annunciare la release 1.5 di Lighthouse, una versione importante, con oltre 128 PR. Lighthouse 1.5 include una serie di nuove importanti funzionalità, controlli e le solite correzioni di bug. Puoi installarla da npm (npm i -g lighthouse) o scaricare l'estensione dal Chrome Web Store.
Nuovi controlli
Controllo dell'utilizzo dei CSS segnala il numero di regole di stile non utilizzate nella pagina e i risparmi in termini di tempo e costi derivanti dalla loro rimozione:
Il controllo delle immagini ottimizzate segnala le immagini non ottimizzate e i risparmi in termini di tempo e costi connessi con l'ottimizzazione:
Il controllo delle immagini adattabili segnala le immagini troppo grandi e il potenziale risparmio in termini di tempo e costi derivanti dal loro dimensionamento corretto per il dispositivo in questione:
Il controllo delle deprecazioni e degli interventi elenca gli avvisi della console di Chrome se la tua pagina utilizza API deprecate o funzionalità che presentano interventi:
Segnala modifiche
Come abbiamo visto, ci siamo concentrati per rendere il report meno caotico dal punto di vista visivo aggiungendo dati tabulari, nascondendo il testo della guida non pertinente e aggiungendo nuove funzionalità per semplificare la consultazione dei dati.
Impostazioni di emulazione
È facile dimenticare quali impostazioni di limitazione ed emulazione sono state utilizzate per una determinata esecuzione di Lighthouse. I report Lighthouse ora includono le impostazioni di emulazione del runtime utilizzate per crearlo; una richiesta di funzionalità a lungo termine:
Dati di traccia più utili
Le metriche di Lighthouse come "Prima visualizzazione significativa", "Tempo all'interattività" e così via vengono simulate durante le misurazioni del tempo utente e inserite di nuovo nei dati di traccia salvati con il flag --save-assets.
Se utilizzi il flag --save-assets, ora puoi rilasciare la traccia in DevTools o
aprirla nel visualizzatore cronologia di DevTools.
Potrai visualizzare le metriche chiave nel contesto con la traccia completa del caricamento della pagina.
Visualizzatore Lighthouse
Nei report HTML, vedrai un nuovo pulsante con opzioni per esportare i report in diversi formati. Una di queste opzioni è "Apri nel visualizzatore". Se fai clic su questo pulsante, il report verrà inviato al Visualizzatore online, dove puoi condividere ulteriormente il report con gli utenti GitHub.
Dietro le quinte, il visualizzatore ottiene la tua autorizzazione tramite OAuth per creare un gist segreto GitHub e salva il report lì. Poiché il report viene utilizzato come Gist, l'utente mantiene il pieno controllo della condivisione del report e può eliminarlo in qualsiasi momento. Puoi revocare l'autorizzazione del visualizzatore a creare gist nelle impostazioni di GitHub.
Esperimento sul rendimento
La prima versione del progetto Esperimento sul rendimento è arrivata nella versione 1.5.0. Questo ti consente di sperimentare le prestazioni di caricamento delle pagine, testando in modo interattivo gli effetti del blocco o del ritardo degli asset nel percorso critico durante lo sviluppo.
Quando Lighthouse viene eseguito con il flag --interactive, viene generato un report speciale che consente la selezione interattiva delle costose risorse della pagina. Il server dell'esperimento esegue quindi di nuovo Lighthouse sulla pagina con le risorse bloccate.
Scopri di più sull'esperimento sulle prestazioni in Lighthouse.
Nuova documentazione
Infine, ma non per importanza, abbiamo modernizzato la documentazione all'indirizzo developers.google.com/web/tools/lighthouse/ e abbiamo aggiunto nuovi riferimenti per gli audit.
Per il momento è tutto.
Per tutti i dettagli sulle ultime novità di Lighthouse, consulta le note di rilascio complete su GitHub. Come sempre, contattaci per segnalare bug, inviare richieste di funzionalità o fare brainstorming sulle idee su cosa vorresti vedere in seguito.