Google Lighthouse è diventato lo strumento di fatto per molti siti Web per misurare le loro prestazioni con un singolo punteggio: Il Lighthouse Performance Score. Una nuova versione, Lighthouse 6,0, è ora disponibile su npm in Chrome Canary, PageSpeed Insights e GSC Console. Entro la metà di luglio, Lighthouse 6,0 sarà completamente disponibile per gli utenti Chrome in Chrome 84. È giunto il momento di assicurarsi che il tuo sito sia pronto per la nuova versione con una verifica del punteggio di Lighthouse 6,0.
Lighthouse 6,0 è dotato di metriche nuove e ammortizzate, nonché di una nuova formula di ponderazione per calcolare i punteggi delle prestazioni. Questa nuova versione, insieme all’annuncio che Core Web Metrics sarà aggiunto all’algoritmo di posizionamento di Google nell’aggiornamento dell’esperienza di Google Page, sono chiari segni che il gigante della ricerca sta enfatizzando la velocità percepita – la velocità con cui un utente percepisce una pagina come caricata. Più velocemente gli utenti percepiscono il caricamento del tuo sito, più alto è il tuo rango e più conversioni riceverai.
Le metriche di Six Lighthouse che dovete ottimizzare
A Google interessa come gli utenti utilizzano il Web. Due siti Web potrebbero terminare il caricamento nello stesso momento, ma uno potrebbe sembrare più veloce, in base alla modalità di visualizzazione dei contenuti nella pagina. Mentre entrambi i siti hanno finito di caricarsi contemporaneamente, Google favorirà quest’ultimo, il sito con una performance percepita più veloce.
I punteggi di Lighthouse 6,0 si basano su una media ponderata di sei metriche di velocità incentrate sugli utenti . First Contentful Paint (FCP), Speed Index (si) e Largest Contentful Paint (LCP) misurano la velocità di carico percepita e mantengono un peso combinato del 55% nel punteggio Lighthouse di un sito web nella versione 6. Un altro 40% del punteggio si basa su metriche che misurano la reattività, un altro aspetto che influisce sulla percezione della velocità da parte dell’utente. Questi includono tempo di blocco totale (TBT) e tempo di interattività (TTI). L’ultimo 5% del punteggio si basa su una metrica che misura la stabilità visiva, chiamata spostamento layout cumulativo (CLS).
First Significful Paint (FMP) e First CPU Idle (FCI) del punteggio Lighthouse 5,7 sono stati sostituiti da metriche migliori per misurare la velocità da una prospettiva incentrata sull’utente. Si tratta del più grande Contentful Paint (LCP) e Total Blocking Time (TBT) di Lighthouse 6,0.
| Faro 5,7 | Peso | Faro 6,0 | Peso |
|---|---|---|---|
| Primo contenuto di vernice (FCP) | 20% | Primo contenuto di vernice (FCP) | 15% |
| Indice di velocità (si) | 27% | Indice di velocità (si) | 15% |
| Prima vernice significativa (FMP) | 7% | LCP (Large Contentful Paint) | 25% |
| Prima CPU inattiva (FCI) | 13% | Tempo di blocco totale (TBT) | 25% |
| Tempo di interattività (TTI) | 33% | Tempo di interattività (TTI) | 15% |
| - | - | Spostamento layout cumulativo (CLS) | 5% |
Di seguito sono riportate le metriche a sei velocità su cui concentrarti durante la verifica del tuo sito Web in preparazione di Lighthouse 6,0. Le metriche sono disposte nell’ordine in cui vengono misurate al caricamento della pagina.
Nella parte inferiore di questo articolo è disponibile un elenco di controllo semplificato che illustra le velocità da raggiungere e le tecniche di ottimizzazione per ogni metrica.
Prima vernice di contorno
FCP segna il primo punto in cui un utente può visualizzare qualsiasi contenuto della pagina sullo schermo. Questo contenuto include testo, immagini, grafica o file SVG. FCP ha avuto un peso del 20% in Lighthouse 5,7, ma ha mantenuto solo il 15% di peso rispetto al punteggio di Lighthouse 6,0.
Nell’area Provino qui sopra, l’FCP per il caricamento della prima pagina viene misurato a 0,6 secondi. Questo è il momento in cui il contenuto appare per la prima volta sulla homepage per TheTieBar.com, ma noterai che non è quando tutto il contenuto è visibile. Questa è una distinzione importante tra la prima e la più grande vernice contenta. L’LCP viene misurato a 0,9 secondi quando viene visualizzato il contenuto superiore alla piega.
Durante il controllo del punteggio di Lighthouse 6,0, assicurati che le tue pagine abbiano un FCP medio di 2 secondi o meno, poiché questa è la soglia della metrica per il 75° percentile ed è considerata veloce da Google. I FCP compresi tra 2 e 4 secondi sono considerati velocità moderate e quelli superiori a 4 secondi scendono al di sotto del 50o percentile e sono classificati come lenti.
Se il caricamento degli FCP è troppo lento, ciò può essere dovuto a uno o più dei seguenti fattori:
- Troppe risorse di blocco del rendering
- File CSS di grandi dimensioni
- Mancanza di connessioni sicure con origini di terze parti
- Tempi di risposta del server lunghi
- Reindirizzamento di più pagine
- Risorse statiche non memorizzate nella cache
- Dimensioni DOM eccessive
Per ottimizzare il vostro FCP, considerate quanto segue:
- Inline risorse critiche, rinviare le risorse non critiche e rimuovere tutto ciò che non è stato utilizzato per ridurre l’impatto degli URL di blocco del rendering.
- Rimuovere tutti i caratteri non necessari dal CSS per ridimensionare i file.
- Utilizzare la preconnessione per stabilire connessioni anticipate con importanti origini di terze parti.
- Riducete i tempi di risposta del server ottimizzando la logica delle applicazioni del server o aggiornando l’hardware del server per avere più memoria.
- Evitare di reindirizzare più di una pagina.
- Utilizzare il caching HTTP per memorizzare nella cache le risorse statiche.
- Hanno meno di 1.500 nodi in totale, una profondità inferiore a 32 nodi e un nodo padre con meno di 60 nodi figlio per diminuire le dimensioni DOM.
Indice di velocità
Si misura la progressione visiva del caricamento di una pagina e calcola un punteggio complessivo per la rapidità con cui il contenuto viene dipinto. In Lighthouse 5,7, si aveva il 27% di peso sul Performance Score di un sito web. In Lighthouse 6,0, questo è semi-diminuito, influenzando il 15% del Performance Score di una pagina. Google continua a considerare questo aspetto come una metrica percettiva chiave, poiché una pagina con una visualizzazione lenta dell’immagine può essere percepita come un problema.
Lighthouse misura l’si catturando una striscia di una pagina mentre viene caricata nel browser e analizzando la progressione visiva fotogramma per fotogramma. Il tempo medio in cui vengono visualizzate le parti visibili della pagina determina l’si. Questa metrica varia in base alle dimensioni dello schermo del dispositivo.
Durante la verifica del punteggio di Lighthouse 6,0, mirate al SIS in 4,3 s o meno. Questa velocità si colloca nel 75° percentile ed è considerata veloce da Google. Le pagine con SIS compreso tra 4,3 e 5,8 secondi sono moderate, mentre il SIS più lento di 5,8 secondi scende al di sotto del 50o percentile e sono considerate lente.
I tempi si più lenti tendono a derivare dai seguenti fattori:
- I tempi di caricamento sulla filettatura principale superano i 4 secondi
- Il tempo di esecuzione di JavaScript supera i 3,5 secondi
- I file di caratteri di grandi dimensioni causano un flash di testo invisibile (FOIT).
Per ridurre i tempi si, considerare quanto segue:
- Implementare la suddivisione del codice, rimuovere il codice inutilizzato e comprimere il codice per ridurre il carico sul thread principale e il tempo di esecuzione di JavaScript.
- Assicurarsi che il testo rimanga visibile durante il caricamento dei font Web per evitare FOIT.
Vernice principale
LCP è una nuova metrica aggiunta a Lighthouse 6,0 e riceve il 25% di peso nel Performance Score di un sito. LCP sostituisce la prima vernice significativa (FMP) di Lighthouse 5,7. Sebbene entrambe le metriche misurino il tempo di visualizzazione dell’elemento di contenuto più grande, FMP è noto per la produzione di risultati incoerenti e può essere standardizzato solo in alcuni browser Web.
LCP misura quando l’elemento di contenuto più grande è completamente visibile sullo schermo. Gli elementi del contenuto misurati includono elementi a livello di blocco, immagini (comprese immagini all’interno di file SVG) e video. Si tratta di una metrica estremamente importante per i siti Web di e-commerce, in quanto segna il momento in cui la maggior parte degli utenti percepisce la pagina come completamente caricata e ha maggiori probabilità di effettuare un acquisto.
Nell’esempio precedente, l’LCP è di 0,9 secondi, quando l’immagine principale è completamente colorata. Questa metrica cattura un momento distinto in cui un utente percepisce una pagina completamente caricata, ma il contenuto potrebbe ancora essere caricato sotto la piegatura.
I siti Web con le migliori prestazioni, come quelli su Layer0 (ora Edgio), forniscono LCP in meno di 1 secondo. I LCP fino a 2,5 secondi sono considerati veloci e si collocano nel 75° percentile per questa metrica. Gli LCP compresi tra 2,5 secondi e 4 secondi sono considerati moderati e necessitano di miglioramenti, mentre gli LCP superiori a 4 secondi scendono al di sotto del 50o percentile e sono considerati lenti da Google.
I LCP lenti di solito derivano da uno o più dei seguenti fattori:
- Tempi di risposta del server lenti
- JavaScript e CSS che bloccano il rendering
- Lunghi tempi di caricamento delle risorse
- Problemi di rendering lato client
Se durante la verifica del punteggio di Lighthouse 6,0 si riscontrano più lenti dei LCP desiderati, considerare quanto segue:
- Ottimizza i tempi di risposta del server instradando il traffico alla CDN più vicina disponibile, memorizzando le risorse nella cache, distribuendo le pagine HTML prima della cache e stabilendo in anticipo connessioni di terze parti.
- Ridurre i CSS rimuovendo i CSS non necessari, rinviando i CSS non critici e i CSS critici in linea. Ridurre i tempi di blocco di JavaScript comprimendo i file JavaScript.
- Per ridurre i tempi di caricamento delle risorse, ottimizzare e comprimere file di testo e immagini e precaricare risorse importanti.
- Ottimizzate il rendering lato client utilizzando il rendering lato server e il pre-rendering.
Tempo di blocco totale
Il TBT sostituisce l’FCI del Lighthouse 5,7, che in passato conteneva il 13% di peso. In Lighthouse 6,0, TBT misura la reattività delle pagine e rappresenta il 25% di un punteggio delle prestazioni. Il TBT misura la gravità di quanto una pagina non sia interattiva prima che diventi interattiva in modo affidabile.
Conosci queste istanze dolorose: Stai aspettando che una pagina venga caricata, e poi finalmente – sembra pronta. Toccare il prodotto che si desidera visualizzare, ma non succede nulla. Tocca di nuovo? Questo periodo di attesa è noto per causare letteralmente stress nei consumatori. Essenzialmente, il TBT è il periodo di tempo in cui un consumatore sente tale stress dovuto alla non interattività di una pagina.
Fonte: web.deV
“Questa metrica viene misurata calcolando la somma del tempo totale “bloccato” (attività che richiedono più di 50 ms) tra il primo elemento di contenuto visualizzato (FCP) e quando un utente può interagire completamente con la pagina (TTI).” Ad esempio, nell’immagine precedente, nel thread principale si svolgono cinque attività, ma solo tre superano i 50 ms. Il primo per 200 ms, il secondo per 40 ms e il terzo per 105 ms. TBT è (200+40+105) 345 ms.
Un’attività che richiede più di 50 ms sarà abbastanza lunga da consentire all’utente di notare e percepire la pagina come lenta o, peggio, inattiva, e di condurla ad andarsene. Per evitare ciò, puntare a un TBT inferiore a 300 ms da considerare veloce. I TBT compresi tra 300 ms e 600 ms sono considerati velocità moderate e necessitano di miglioramenti. I TBT più lenti di 600 ms scendono al di sotto del 50o percentile e sono considerati lenti.
Le attività lunghe sono in genere causate da una o più delle seguenti cause:
- Codice di terze parti che blocca il thread principale per 250 ms o più
- Il tempo di esecuzione di JavaScript richiede più di 3,5 secondi
- Il thread principale è occupato per più di 4 secondi durante il caricamento
- Un elevato volume di richieste di rete e grandi dimensioni di trasferimento
Per migliorare questa metrica, considerare quanto segue:
- Caricare in modo efficiente JavaScript di terze parti utilizzando gli attributi asincroni o rimandare sui tag di script, stabilire connessioni anticipate a importanti origini di terze parti e utilizzare il caricamento lento.
- Per velocizzare l’esecuzione di JavaScript e ridurre il carico sul thread principale, implementare la suddivisione del codice, rimuovere il codice inutilizzato e comprimere il codice.
- Ottimizzare CSS e JavaScript per ridurre il numero di risorse e le dimensioni dei trasferimenti.
Tempo di interattività
TTI è la terza metrica riportata da Lighthouse 5,7, ma Google ha ridotto il suo peso dal 33% al 15% in Lighthouse 6,0. TTI è una metrica complementare a TBT, che misura il tempo necessario per una pagina per diventare affidabile o completamente interattiva. Lighthouse considera una pagina interattiva in modo affidabile quando viene visualizzato il primo elemento del contenuto, i suoi script iniziali (se presenti) sono stati caricati e può rispondere all’input dell’utente entro 50 ms.
Per un utente, le TTI lente possono sembrare inattive o rotte. Anche se una pagina sembra interattiva, non è in realtà perché il thread principale è bloccato (misurato da TBT). Mentre controlli il tuo sito Web per Lighthouse 6,0, miri alle TTI in 5,2 secondi o meno per essere considerate veloci. Le TTI comprese tra 5,2 e 7,3 secondi sono considerate velocità moderate, mentre quelle inferiori a 7,3 secondi sono considerate lente e influenzeranno la disponibilità dei consumatori a rimanere in loco.
Se la verifica del punteggio di Lighthouse 6,0 mostra velocità TTI scarse, ciò può essere dovuto a una o più delle seguenti cause:
- Grandi dimensioni del payload e lunghi tempi di analisi dello script
- Lunghi tempi di caricamento delle risorse
- Il codice di terze parti blocca il thread principale per 250 ms o più
- Catene di richieste critiche
- Velocità del thread principale lenta e tempo di esecuzione JavaScript
- Elevato numero di risorse o grandi dimensioni di trasferimento
È possibile ridurre i tempi TTI ottimizzando JavaScript. Ciò include:
- Ridurre e comprimere i file JavaScript per ridurre le dimensioni del payload e il tempo di analisi degli script.
- Precaricare le richieste e/o aggiungere preconnessioni per tempi di caricamento più rapidi.
- Caricare in modo efficiente JavaScript di terze parti utilizzando gli attributi asincroni o differiti sui tag di script e utilizzando il caricamento lento.
- Ridurre l’effetto delle catene di richieste critiche sulle prestazioni riducendo il numero di risorse critiche e ottimizzando l’ordine in cui vengono caricate le risorse rimanenti.
- Implementare la suddivisione del codice, rimuovere il codice inutilizzato e comprimere il codice per ridurre il carico sul thread principale e il tempo di esecuzione di JavaScript.
- Ottimizzare CSS e JavaScript per ridurre il numero di risorse e le dimensioni dei trasferimenti.
Spostamento layout cumulativo
CLS è la terza nuova metrica introdotta in Lighthouse 6,0, ed è l’unica a non sostituire nessuna metrica del Lighthouse 5,7. CLS rappresenta l’ultimo 5% del tuo punteggio di Lighthouse 6,0 e misura la stabilità visiva.
Questa metrica misura la frequenza con cui gli utenti riscontrano spostamenti di layout imprevisti. Hai già sperimentato questo: Stai per toccare un prodotto, e bam, improvvisamente, tocchi qualcos’altro sulla pagina perché gli elementi si sono spostati. Queste esperienze possono essere piuttosto fastidiose e considerate strane per un utente.
Il CLS viene misurato in base alla somma totale di tutti i punteggi dei singoli turni di layout per ogni spostamento di layout imprevisto che si verifica durante l’intera durata della pagina. Un buon CLS è inferiore a 0,1 e si colloca al 75° percentile per le prestazioni. Un CLS compreso tra 0,1 e 0,25 è considerato moderato, e qualsiasi misurazione superiore a 0,25 scende al di sotto del 50o percentile ed è considerato lento da Google.
Se trovi un CLS scarso durante la verifica del punteggio di Lighthouse 6,0, è probabile che sia dovuto a uno dei seguenti fattori:
- Un’immagine o un video che si ridimensiona automaticamente
- Un carattere che viene caricato in ritardo e visualizzato più grande o più piccolo del previsto
Per migliorare questa metrica, considerare quanto segue:
- Includi le dimensioni esatte sulle immagini e sugli elementi video
- Evita annunci popup o banner
- Evitare che i caratteri causino FOIT/FOUT
I punteggi di Lighthouse ti mostrano cosa pensa Google del tuo sito
Il Lighthouse Performance Score di una pagina indica come Google percepisce la pagina in termini di velocità. Ogni metrica in Lighthouse 6,0 riflette il miglior tentativo di Google di misurare il modo in cui gli utenti percepiscono la velocità. Se un punteggio scende al di sotto degli standard, sarà percepito come lento, non solo dagli utenti, ma dal gigante della ricerca stesso, con un conseguente impatto negativo sui ricavi e sul SEO.
Google classifica i siti sempre più velocemente nella pagina dei risultati del motore di ricerca. Oltre al SEO, è stato rilevato che la velocità del sito ha un impatto significativo sulle conversioni e sui ricavi. Amazon, ad esempio, ha rilevato che un ritardo di 1 secondo nel caricamento delle pagine potrebbe costare all’azienda una perdita di 1,6 miliardi di dollari l’anno.
In sintesi
Quest’ultima versione di Lighthouse dimostra l’enfasi del gigante della ricerca sulle metriche di velocità percettiva. Le metriche di punteggio di Lighthouse 6,0 tentano di misurare la velocità con cui i visitatori percepiscono la tua pagina come completamente caricata (anche se sono ancora in esecuzione processi in background).
Tre metriche, First Contentful Paint, Speed Index e Large Contentful Paint, misurano la velocità di carico percepita e rappresentano il 55% del punteggio delle prestazioni. Mira a FCP di 2 secondi, LCP di 2,5 e SIS di 4,3 secondi o meno.
Un altro 40% di un Performance Score si basa su metriche percettive che misurano la reattività di una pagina. Questi includono tempo di blocco totale e tempo di interattività. Un rapido controllo del punteggio di Lighthouse 6,0 mostrerà un TBT in meno di 300 ms e un TTI in meno di 5,2 secondi, oppure un utente percepirà il tuo sito come un problema.
Infine, a nessuno piace che il testo o le immagini saltino dentro e fuori dallo schermo. Lo spostamento cumulativo del layout è la sesta metrica di cui tenere conto nell’audit Lighthouse 6,0. Mirate a misurazioni CLS inferiori a 0,1 e riceverete l’intero 5% del peso che detiene nel vostro Performance Score.
Per ricevere un semplice elenco di controllo sulle velocità da raggiungere durante la verifica del punteggio di Lighthouse 6,0, insieme alle tecniche di ottimizzazione per metriche, compila il modulo sottostante.
