Creare un Web migliore con Lighthouse

Da Google I/O, ci siamo impegnati a rendere Lighthouse un fantastico compagno per la creazione di ottime app web progressive:

Oggi siamo lieti di annunciare la versione 1.3 di Lighthouse. Lighthouse 1.3 include una serie di nuove funzionalità importanti, controlli e le solite correzioni di bug. Puoi installarlo da npm (npm i -g lighthouse) o scaricare l'estensione dal Chrome Web Store.

Quali sono quindi le novità?

Nuovo design

Se hai utilizzato una versione precedente di Lighthouse, potresti aver notato che il logo è nuovo. Anche il report HTML e l'estensione per Chrome sono stati sottoposti a un aggiornamento completo, con una presentazione più chiara del punteggio e una maggiore coerenza tra i risultati degli audit. Abbiamo anche aggiunto informazioni utili per il debug quando un test non va a buon fine e includiamo indicazioni per le soluzioni alternative consigliate.

Report Lighthouse

Nuove best practice

Finora, Lighthouse si è concentrato sulle metriche sul rendimento e sulla qualità delle PWA. Tuttavia, uno scopo generale del progetto è fornire una guida per tutto lo sviluppo web. Sono incluse indicazioni sulle best practice generali, suggerimenti sul rendimento e sull'accessibilità e assistenza end-to-end per creare app di qualità.

"Fai un web migliore" è un progetto del progetto Lighthouse volto ad aiutare gli sviluppatori a migliorare sul web. In altre parole, aiutali a modernizzare e ottimizzare le loro applicazioni web. Spesso, gli sviluppatori web utilizzano pratiche obsolete, antipattern o si imbattono in noti problemi di prestazioni senza rendersene conto. Ad esempio, è noto che le animazioni basate su JS devono essere realizzate con requestAnimationFrame() anziché con setInterval(). Tuttavia, se lo sviluppatore non è a conoscenza dell'API più recente, la sua app web ne risente inutilmente.

Lighthouse 1.3 include oltre 20 suggerimenti per le nuove best practice, che vanno da suggerimenti per il riammodernamento delle funzionalità CSS e JavaScript a consigli per le prestazioni, come "Riduci il numero di asset che bloccano il rendering" e "Utilizza event listener passivi per migliorare le prestazioni di scorrimento".

Applica le best practice per il web.

Continueremo ad aggiungere altri consigli nel tempo. Se hai suggerimenti per le best practice o vuoi aiutarci a scrivere un audit, segnala un problema su GitHub.

Visualizzatore rapporti

Infine, siamo lieti di annunciare un nuovo visualizzatore web per i risultati di Lighthouse. Visita la pagina googlechrome.github.io/lighthouse/viewer, trascina il risultato di un'esecuzione di Lighthouse (o fai clic per caricare il file) e il gioco è fatto. Report HTML Lighthouse "Insta".

Visualizzatore di report.
Visualizzatore report

Lighthouse Viewer ti consente anche di condividere i report con altri utenti. Se fai clic sull'icona di condivisione, accedi a GitHub. Archiviamo i report come gist segreto nel tuo account in modo che tu possa eliminare facilmente un report condiviso o aggiornarlo in un secondo momento. Se utilizzi GitHub per lo stoccaggio dei dati, hai a disposizione anche il controllo della versione senza costi aggiuntivi.

Architettura del visualizzatore.
Architettura dello spettatore

I report esistenti possono essere ricaricati da Lighthouse Viewer aggiungendo ?gist=GIST_ID all'URL:

Architettura del visualizzatore 2.
Architettura del visualizzatore 2

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 condividere idee su cosa vorresti vedere in futuro.