Creare un Web migliore con Lighthouse

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

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

Quali sono 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 di Chrome sono stati completamente aggiornati, con una presentazione più chiara dei punteggi e una maggiore coerenza nei risultati di controllo. Abbiamo anche aggiunto informazioni di debug utili quando non superi un test e includiamo suggerimenti alle soluzioni alternative consigliate.

Report Lighthouse

Nuove best practice

A oggi, Lighthouse si è concentrato sulle metriche relative alle prestazioni e sulla qualità delle PWA. Tuttavia, un obiettivo generale del progetto è fornire una guida per tutto lo sviluppo web. Sono incluse indicazioni su best practice generali, suggerimenti su prestazioni e accessibilità e assistenza end-to-end per la creazione di app di qualità.

"Do Better Web" è un'iniziativa all'interno del progetto Lighthouse per aiutare gli sviluppatori a fare meglio sul web. In altre parole, aiutateli a modernizzare e ottimizzare le applicazioni web. Spesso gli sviluppatori web usano pratiche obsolete, anti-pattern o colpiscono insidie di prestazioni note senza rendersene conto. Ad esempio, è ampiamente risaputo che le animazioni basate su JS devono essere eseguite con requestAnimationFrame() anziché setInterval(). Tuttavia, se lo sviluppatore non è a conoscenza della nuova API, la sua app web ne risentirà inutilmente.

Lighthouse 1.3 include più di 20 nuove best practice che vanno da suggerimenti per la modernizzazione delle funzionalità CSS e JavaScript a consigli per le prestazioni come: "Riduci il numero di asset che bloccano la visualizzazione", "Utilizza i Listener di eventi passivi per migliorare le prestazioni dello scorrimento".

Adottare migliori best practice sul web.

Continueremo ad aggiungere altri consigli nel tempo. Se hai suggerimenti per le best practice o vuoi aiutarci a scrivere un controllo, invia una segnalazione 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 l'output di un'esecuzione di Lighthouse (o fai clic per caricare il file) e il gioco è fatto. il report HTML Lighthouse "Insta".

Visualizzatore report.
Visualizzatore report

Il visualizzatore Lighthouse ti consente anche di condividere i report con altri. Fai clic sull'icona di condivisione per accedere a GitHub. Archiviamo i report come valore segreto nel tuo account per consentirti di eliminare o aggiornare facilmente un report condiviso in un secondo momento. L'uso di GitHub per l'archiviazione dei dati ti offre anche il controllo della versione senza costi.

Architettura del visualizzatore.
Architettura degli spettatori

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

Architettura del visualizzatore 2.
Architettura dello spettatore 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 fare brainstorming sulle idee su cosa vorresti vedere in seguito.