Novità di Lighthouse 6.0

Nuove metriche, aggiornamento del punteggio delle prestazioni, nuovi controlli e altro ancora.

Connor Clark

Oggi rilasciamo Lighthouse 6.0.

Lighthouse è uno strumento automatizzato di controllo dei siti web che aiuta gli sviluppatori con opportunità e diagnostica per migliorare l'esperienza utente sui loro siti. È disponibile in Chrome DevTools, npm (come modulo Nodo e interfaccia a riga di comando) o come estensione del browser (in Chrome e Firefox). È alla base di molti servizi Google, tra cui web.dev/measure e PageSpeed Insights.

Lighthouse 6.0 è disponibile immediatamente in npm e in Chrome Canary. Altri servizi Google che utilizzano Lighthouse riceveranno l'aggiornamento entro la fine del mese. Sarà disponibile nella versione stabile di Chrome in Chrome 84 (metà luglio).

Per provare l'interfaccia a riga di comando del nodo Lighthouse, utilizza i seguenti comandi: bash npm install -g lighthouse lighthouse https://www.example.com --view

Questa versione di Lighthouse include un numero elevato di modifiche elencate nel log delle modifiche 6.0. Illustreremo i punti salienti di questo articolo.

• Nuove metriche
• Aggiornamento del punteggio del rendimento
• Nuovi controlli
• IC Lighthouse
• Riquadro Chrome DevTools rinominato
• Emulazione di dispositivi mobili
• Estensione del browser
• Budget
• Link delle località di origine
• All'orizzonte
• Ringraziamento

Nuove metriche

Lighthouse 6.0 introduce tre nuove metriche nel report. Due di queste nuove metriche, Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS), sono implementazioni di lab dei Core Web Vitals.

Largest Contentful Paint (LCP)

La visualizzazione più grande (LCP) è una misurazione dell'esperienza di caricamento percepita. Durante il caricamento della pagina, segna il punto in cui i contenuti principali, o "più grandi", sono stati caricati e sono visibili all'utente. La metrica LCP è un complemento importante di First Contentful Paint (FCP), che cattura solo l'inizio dell'esperienza di caricamento. La metrica LCP segnala agli sviluppatori la velocità con cui un utente riesce a visualizzare i contenuti di una pagina. Un punteggio LCP inferiore a 2,5 secondi è considerato "Buono".

Per ulteriori informazioni, guarda questo approfondimento sulla metrica LCP di Paul Ireland.

Cumulative Layout Shift (CLS)

La metrica Cumulative Layout Shift (CLS) misura la stabilità visiva. Quantifica in che misura i contenuti di una pagina cambiano visivamente. Un punteggio CLS basso indica agli sviluppatori che i loro utenti non stanno notando variazioni eccessive di contenuti; un punteggio CLS inferiore a 0,10 viene considerato "Buono".

La metrica CLS in un ambiente di lab viene misurata fino alla fine del caricamento della pagina. Invece, nel campo puoi misurare il CLS fino alla prima interazione dell'utente o includere tutti gli input utente.

Per ulteriori informazioni, guarda questo approfondimento sul CLS di Annie Sullivan.

Tempo di blocco totale (TBT)

Il tempo di blocco totale (TBT) quantifica la reattività al carico, misurando il tempo totale durante il quale il thread principale è stato bloccato per un tempo sufficiente a impedire la reattività dell'input. TBT misura la quantità totale di tempo tra First Contentful Paint (FCP) e Tempo all'interattività (TTI). È una metrica complementare a TTI e aggiunge più sfumature alla quantificazione dell'attività del thread principale che blocca la capacità di un utente di interagire con la pagina.

Inoltre, TBT è correlata bene alla metrica di campo First Input Delay (FID), che è un Segnale web essenziale.

Aggiornamento del punteggio delle prestazioni

Il punteggio delle prestazioni in Lighthouse viene calcolato da una combinazione ponderata di più metriche per riepilogare la velocità di una pagina. Segue la formula del punteggio rendimento 6,0.

Fase	Nome metrica	Peso metrica
In anticipo (15%)	First Contentful Paint (FCP)	15%
Media (40%)	Indice di velocità (SI)	15%
	Largest Contentful Paint (LCP)	25%
In ritardo (15%)	Tempo all'interattività (TTI)	15%
Thread principale (25%)	Tempo di blocco totale (TBT)	25%
Prevedibilità (5%)	Cumulative Layout Shift (CLS)	5%

Mentre sono state aggiunte tre nuove metriche, sono state rimosse tre metriche precedenti: First Meaningful Paint, First Meaningful Paint, First CPU Idle e Max Potential FID. Le ponderazioni delle metriche rimanenti sono state modificate per enfatizzare l'interattività del thread principale e la prevedibilità del layout.

Per un confronto, ecco il punteggio della versione 5:

Fase	Nome metrica	Peso
In anticipo (23%)	First Contentful Paint (FCP)	23%
Media (34%)	Indice di velocità (SI)	27%
	First Meaningful Paint (FMP)	7%
Finito (46%)	Tempo all'interattività (TTI)	33%
	Prima CPU inattiva (FCI)	13%
Thread principale	FID potenziale massimo	0%

Ecco alcune novità relative alle variazioni di punteggio tra le versioni 5 e 6 di Lighthouse:

• Il peso di TTI è stato ridotto dal 33% al 15%. Questa modifica è stata presa direttamente in risposta al feedback degli utenti sulla variabilità del servizio TTI, nonché sulle incoerenze nell'ottimizzazione delle metriche che hanno portato a miglioramenti nell'esperienza utente. Il TTI è comunque un indicatore utile quando una pagina è completamente interattiva, tuttavia con TBT come complemento, la variabilità è ridotta. Con questa modifica del punteggio, ci auguriamo che gli sviluppatori siano incoraggiati più efficacemente a ottimizzare l'interattività degli utenti.
• Il peso di FCP è stato ridotto dal 23% al 15%. Misurare solo il momento in cui il primo pixel è stato dipinto (FCP) non ci ha fornito un quadro completo. La combinazione con la misurazione del momento in cui gli utenti possono vedere ciò che più probabilmente gli interessa (LCP) riflette meglio l'esperienza di caricamento.
• Il valore FID massimo potenziale è stato ritirato. Non viene più mostrato nel report, ma è ancora disponibile nel formato JSON. Ora ti consigliamo di guardare TBT per quantificare la tua interattività anziché mpFID.
• La funzionalità First Meaningful Paint è stata ritirata. Questa metrica era troppo variante e non aveva un percorso attuabile per la standardizzazione, in quanto l'implementazione è specifica per gli interni di rendering di Chrome. Anche se alcuni team ritengono che le tempistiche FMP siano utili sul proprio sito, la metrica non riceverà ulteriori miglioramenti.
• Il primo periodo di inattività della CPU è stato ritirato perché non è sufficientemente distinto da TTI. TBT e TTI sono oggi le metriche di riferimento per l'interattività.
• Il peso di CLS è relativamente basso, anche se prevediamo di aumentarlo in una versione principale futura.

Variazioni dei punteggi

In che modo queste modifiche influiscono sui punteggi dei siti reali? Abbiamo pubblicato un'analisi delle variazioni dei punteggi utilizzando due set di dati: un insieme generale di siti e un insieme di siti statici creati con Eleventy. Riassumendo, circa il 20% dei siti registra punteggi nettamente più elevati, circa il 30% non presenta alcuna variazione e circa il 50% registra una diminuzione di almeno cinque punti.

Le variazioni del punteggio possono essere suddivise in tre componenti principali:

• punteggio variazioni di peso
• correzioni di bug relativi alle implementazioni delle metriche sottostanti
• variazioni della curva dei punteggi individuali

Le variazioni di peso dei punteggi e l'introduzione di tre nuove metriche hanno portato alla maggior parte delle variazioni complessive dei punteggi. Le nuove metriche che gli sviluppatori devono ancora ottimizzare per avere un peso significativo nel punteggio delle prestazioni della versione 6. Mentre il punteggio medio delle prestazioni del corpus di test nella versione 5 era di circa 50, i punteggi medi nelle nuove metriche Total Block Time e Largest Contentful Paint erano circa 30. Insieme, queste due metriche rappresentano il 50% del peso del punteggio delle prestazioni della versione 6 di Lighthouse, quindi naturalmente una grande percentuale di siti ha registrato una diminuzione.

Le correzioni di bug relative al calcolo delle metriche sottostanti possono comportare punteggi diversi. Questo riguarda pochi siti, ma può avere un impatto considerevole in determinate situazioni. Nel complesso, circa l'8% dei siti ha riscontrato un miglioramento del punteggio a causa di modifiche all'implementazione delle metriche, mentre circa il 4% dei siti ha riscontrato una diminuzione del punteggio a causa di modifiche all'implementazione delle metriche. Circa l'88% dei siti non è stato interessato da queste correzioni.

Anche le variazioni della curva dei punteggi individuali hanno influito sulle variazioni del punteggio complessive, anche se molto leggermente. Garantiamo periodicamente che la curva di punteggio sia in linea con le metriche osservate nel set di dati HTTPArchive. Escludendo i siti interessati da importanti modifiche all'implementazione, piccoli aggiustamenti alla curva dei punteggi per le singole metriche hanno migliorato i punteggi di circa il 3% dei siti e hanno diminuito i punteggi di circa il 4% dei siti. Circa il 93% dei siti non è stato interessato da questa modifica.

Calcolatore dei punteggi

Abbiamo pubblicato un calcolatore dei punteggi per aiutarti a esplorare i punteggi di rendimento. Il calcolatore offre anche un confronto tra i punteggi della versione 5 e 6 di Lighthouse. Quando esegui un controllo con Lighthouse 6.0, il report include un link al calcolatore con i risultati compilati.

Grazie mille a Ana Tudor per l'upgrade del misuratore.

Nuovi controlli

JavaScript inutilizzato

Stiamo sfruttando la copertura del codice di DevTools in un nuovo controllo: Unused JavaScript.

Questo controllo non è completamente nuovo: è stato aggiunto a metà 2017, ma a causa del sovraccarico delle prestazioni, è stato disattivato per impostazione predefinita per mantenere Lighthouse il più veloce possibile. La raccolta di questi dati sulla copertura è molto più efficiente ora, quindi possiamo attivarla per impostazione predefinita.

Controlli dell'accessibilità

Lighthouse sfrutta la meravigliosa libreria axe-core per la categoria di accessibilità. In Lighthouse 6.0 abbiamo aggiunto i seguenti controlli:

• aria-hidden-body
• aria-hidden-focus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• ID-duplicato-attivo
• duplicate-id-aria

Icona mascherabile

Le icone mascherabili sono un nuovo formato di icona che rende l'aspetto delle icone della tua PWA su tutti i tipi di dispositivi. Per migliorare l'aspetto della PWA, abbiamo introdotto un nuovo controllo per verificare se il file manifest.json supporta questo nuovo formato.

Dichiarazione del set di caratteri

L'elemento meta charset dichiara quale codifica dei caratteri deve essere utilizzata per interpretare un documento HTML. Se questo elemento non è presente o se viene dichiarato in ritardo nel documento, i browser utilizzano una serie di euristiche per indovinare quale codifica utilizzare. Se un browser indovina in modo errato e viene rilevato un elemento meta-charset ritardato, il parser in genere elimina tutto il lavoro svolto fino a quel momento e ricomincia da capo, causando un'esperienza utente negativa. Questo nuovo controllo verifica che la pagina abbia una codifica dei caratteri valida e definita all'inizio e all'inizio.

Lighthouse in CI

In occasione del CDS lo scorso novembre, abbiamo annunciato Lighthouse CI, il server e l'interfaccia a riga di comando open source dei nodi che monitora i risultati di Lighthouse su ogni commit nella pipeline di integrazione continua. Abbiamo fatto molta strada dal rilascio della versione alpha. Lighthouse CI ora supporta numerosi provider CI, tra cui Travis, Circle, GitLab e GitHub Actions. Le immagini Docker pronte per il deployment semplificano la configurazione e la riprogettazione completa della dashboard ora rivela le tendenze per ogni categoria e metrica in Lighthouse per un'analisi dettagliata.

Inizia oggi stesso a utilizzare Lighthouse CI sul tuo progetto seguendo la nostra Guida introduttiva.

Riquadro di Chrome DevTools rinominato

Il riquadro Controlli è stato rinominato Lighthouse. Ho detto abbastanza!

A seconda delle dimensioni della finestra DevTools, il riquadro si trova probabilmente dietro il pulsante ». Puoi trascinare la scheda per cambiare l'ordine.

Per visualizzare rapidamente il riquadro con il menu Comando:

1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
2. Premi Control+Shift+P (o Command+Shift+P su Mac) per aprire il menu Comando.
3. Inizia a digitare "Lighthouse".
4. Premi Enter.

Emulazione di dispositivi mobili

Lighthouse ha un approccio incentrato sui dispositivi mobili. I problemi di rendimento sono più evidenti nelle condizioni tipiche dei dispositivi mobili, ma gli sviluppatori spesso non eseguono i test in queste condizioni. Ecco perché la configurazione predefinita in Lighthouse applica l'emulazione mobile. L'emulazione è costituita da:

• Condizioni simulate di rete e CPU lenta (tramite un motore di simulazione chiamato Lantern).
• Emulazione dello schermo del dispositivo (la stessa che si trova in Chrome DevTools).

Fin dall'inizio, Lighthouse ha utilizzato Nexus 5X come dispositivo di riferimento. Negli ultimi anni, la maggior parte degli ingegneri delle prestazioni ha utilizzato il Moto G4 a scopo di test. Ora Lighthouse ha seguito l'esempio e ha cambiato il suo dispositivo di riferimento in Moto G4. In pratica, questa modifica non è molto evidente, ma ecco tutte le modifiche rilevabili da una pagina web:

• Le dimensioni dello schermo vengono modificate da 412 x 660 px a 360 x 640 px.
• La stringa dello user agent è stata leggermente modificata e la parte del dispositivo che in precedenza era Nexus 5 Build/MRA58N ora sarà Moto G (4).

A partire da Chrome 81, Moto G4 è disponibile anche nell'elenco di emulazioni dei dispositivi Chrome DevTools.

Estensione del browser

L'estensione di Chrome per Lighthouse è stata un modo comodo per eseguire Lighthouse in locale. Sfortunatamente, è stato complicato supportare. Abbiamo ritenuto che il pannello Lighthouse di Chrome DevTools fosse un'esperienza migliore (il report si integra con altri riquadri), pertanto abbiamo potuto ridurre i costi di progettazione semplificando l'estensione di Chrome.

Anziché eseguire Lighthouse localmente, l'estensione ora utilizza l'API PageSpeed Insights. Ci rendiamo conto che questa funzionalità non sarà sufficiente per sostituire alcuni dei nostri utenti. Ecco le principali differenze:

• PageSpeed Insights non è in grado di controllare i siti web non pubblici, poiché viene eseguito tramite un server remoto e non la tua istanza di Chrome locale. Se devi controllare un sito web non pubblico, utilizza il riquadro Lighthouse di DevTools o l'interfaccia a riga di comando di Node.
• L'utilizzo della release Lighthouse più recente non è garantito da PageSpeed Insights. Se vuoi usare la release più recente, usa l'interfaccia a riga di comando di Node. L'estensione del browser riceverà l'aggiornamento circa 1-2 settimane dopo il rilascio.
• PageSpeed Insights è un'API di Google e il suo utilizzo implica l'accettazione dei Termini di servizio dell'API di Google. Se non vuoi o non vuoi accettare i Termini di servizio, utilizza il riquadro Lighthouse di DevTools o l'interfaccia a riga di comando di Node.

La buona notizia è che la semplificazione della storia del prodotto ci ha permesso di concentrarci su altri problemi tecnici. Pertanto, abbiamo rilasciato l'estensione Lighthouse per Firefox.

Budget

Lighthouse 5.0 ha introdotto budget delle prestazioni che supportavano l'aggiunta di soglie per la quantità di ogni tipo di risorsa (ad esempio script, immagini o CSS) che una pagina può pubblicare.

Lighthouse 6.0 aggiunge il supporto per le metriche di budget, quindi ora puoi impostare soglie per metriche specifiche come FCP. Al momento, i budget sono disponibili solo per l'interfaccia a riga di comando di Node e Lighthouse.

Link delle località di origine

Alcuni dei problemi rilevati da Lighthouse su una pagina possono essere ricondotti a una riga specifica del codice sorgente e il report riporterà esattamente il file e la riga pertinenti. Per semplificare l'esplorazione in DevTools, fai clic sulle posizioni specificate nel report per aprire i file pertinenti nel riquadro Origini.

DevTools rivela la riga di codice esatta che causa il problema.

Orizzonte

Lighthouse ha iniziato a sperimentare la raccolta di mappe di origine per potenziare nuove funzionalità, come:

• Rilevamento di moduli duplicati nei bundle JavaScript.
• Rilevare un numero eccessivo di polyfill o trasformazioni nel codice inviato ai browser moderni.
• Miglioramento del controllo di JavaScript inutilizzato per fornire una granularità a livello di modulo.
• Visualizzazioni a mappa ad albero che evidenziano i moduli che richiedono un'azione.
• Visualizzazione del codice sorgente originale per gli elementi del report con "posizione di origine".

Il controllo di JavaScript inutilizzato che utilizza le mappe di origine per mostrare il codice inutilizzato in moduli in bundle specifici.

Queste funzionalità verranno attivate per impostazione predefinita in una versione futura di Lighthouse. Per ora, puoi visualizzare i controlli sperimentali di Lighthouse con il seguente flag dell'interfaccia a riga di comando:

lighthouse https://web.dev --view --preset experimental

Grazie!

Ti ringraziamo per aver scelto Lighthouse e aver fornito il tuo feedback. Il tuo feedback ci aiuta a migliorare Lighthouse e speriamo che Lighthouse 6.0 ti aiuti a migliorare le prestazioni dei tuoi siti web.

Come puoi procedere

• Apri Chrome Canary e prova il riquadro Lighthouse.
• Utilizza l'interfaccia a riga di comando del nodo: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Esegui Lighthouse CI con il tuo progetto.
• Consulta la documentazione relativa ai controlli di Lighthouse.
• Divertiti a migliorare il web.

Ci piace il web e ci piace collaborare con la community degli sviluppatori per creare strumenti che contribuiscano a migliorare il web. Lighthouse è un progetto open source e lo ringraziamo enormemente a tutti i collaboratori che hanno dato il loro contributo per qualsiasi cosa, dalle correzioni degli errori ortografici al refactoring della documentazione, fino ai nuovi controlli. Vuoi contribuire? Passa al repository GitHub di Lighthouse.