Lighthouse è uno strumento automatico open source per migliorare la qualità delle app web. Puoi installarlo come estensione di Chrome o eseguirlo come strumento della riga di comando Node. Quando fornisci a Lighthouse un URL, viene eseguito un bombardamento di test sulla pagina, che genera un report che spiega il rendimento della pagina e indica le aree di miglioramento.
Oggi siamo lieti di annunciare la release 1.5 di Lighthouse, una release enorme con oltre 128 PR. Lighthouse 1.5 include un gran numero di nuove funzionalità, controlli e le solite correzioni di bug. Puoi installarlo da npm (npm i -g lighthouse) o scaricare l'estensione dal Chrome Web Store.
Nuovi controlli
L'audit dell'utilizzo del CSS indica il numero di regole di stile inutilizzate nella pagina e il risparmio in termini di costi e tempo derivante dalla loro rimozione:
Il controllo delle immagini ottimizzate segnala le immagini non ottimizzate e i risparmi in termini di costi e tempo derivanti dall'ottimizzazione:
Il controllo delle immagini responsive segnala le immagini troppo grandi e il potenziale risparmio in termini di costi/tempo derivante dal ridimensionamento corretto per il dispositivo in questione:
Il controllo di ritiri e interventi elenca gli avvisi della console di Chrome se la tua pagina utilizza API o funzionalità ritirate che hanno interventi:
Segnala modifiche
Come hai visto, ci siamo concentrati su come rendere il report meno visivamente ingombrante aggiungendo dati tabulari, nascondendo il testo di aiuto superfluo e aggiungendo nuove funzionalità per semplificare la navigazione nei 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 creare il report, una richiesta di funzionalità da molto tempo:
Dati di traccia più utili
Le metriche Lighthouse come "Primo paint significativo", "Tempo di interattività" e così via vengono simulate come misurazioni di Tempo di utilizzo e reiniettate nei dati traccia salvati con il flag --save-assets.
Se utilizzi il flag --save-assets, ora puoi inserire la traccia in DevTools o aprirla nel Visualizzatore della cronologia di DevTools.
Potrai visualizzare le metriche principali nel contesto della traccia completa del caricamento della pagina.
Lighthouse Viewer
Nei report HTML, noterai un nuovo pulsante con le opzioni per esportare il 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 potrai condividerlo ulteriormente con gli utenti di GitHub.
Dietro le quinte, lo spettatore ottiene la tua autorizzazione tramite OAuth per creare un gist segreto di GitHub e salvarvi il report. Poiché è stato creato come tuo Gist, mantieni il controllo completo sulla condivisione del report e puoi eliminarlo in qualsiasi momento. Puoi revocare l'autorizzazione dello spettatore a creare gist nelle tue impostazioni di GitHub.
Esperimento sul rendimento
La prima versione del progetto Sperimentale sul rendimento è stata rilasciata nella versione 1.5.0. In questo modo puoi sperimentare il rendimento del caricamento della pagina, 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 risorse di pagina costose. Il
server dell'esperimento esegue di nuovo Lighthouse sulla pagina con le risorse
bloccate.
Scopri di più sulla sperimentazione sul rendimento in Lighthouse.
Nuova documentazione
Infine, abbiamo modernizzato la documentazione all'indirizzo developers.google.com/web/tools/lighthouse/ e abbiamo aggiunto nuovi riferimenti per gli audit.
È tutto per ora.
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 su idee sui contenuti che vorresti vedere in futuro.