Home Blogs Controllo punteggio Lighthouse 6,0: Un elenco di controllo per preparare il sito Web
Applications

Controllo punteggio Lighthouse 6,0: Un elenco di controllo per preparare il sito Web

About The Author

Outline

Google Lighthouse è diventato di fatto lo strumento per molti siti Web per misurare le loro prestazioni con un singolo punteggio: Lighthouse Performance Score. Una nuova versione, Lighthouse 6,0, è ora disponibile su npm in Chrome Canary, PageSpeed Insights e GSC Console. Entro metà luglio, Lighthouse 6,0 sarà completamente distribuito agli utenti Chrome in Chrome 84. È il momento giusto per assicurarti che il tuo sito sia pronto per la nuova versione con un controllo del punteggio Lighthouse 6,0.

Lighthouse 6,0 è dotato di nuovi parametri di valutazione e 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 Google Page Experience, sono chiari segni che il gigante della ricerca sta enfatizzando la velocità percepita, la velocità alla quale un utente percepisce una pagina come caricata. Più velocemente gli utenti percepiscono il tuo sito da caricare, più alto è il tuo rango e più conversioni riceverai.

Le sei metriche Lighthouse da ottimizzare

Google si preoccupa del modo in cui gli utenti sperimentano il Web. Due siti Web potrebbero terminare il caricamento contemporaneamente, ma uno potrebbe sembrare più veloce, in base al modo in cui il contenuto viene visualizzato sulla pagina. Mentre entrambi i siti hanno terminato il caricamento simultaneo, Google favorirà quest’ultimo, il sito con prestazioni percepite più velocemente.

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 Large 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 di un utente. Questi includono Total Blocking Time (TBT) e Time to Interactive (TTI). L’ultimo 5% del punteggio si basa su una metrica che misura la stabilità visiva, denominata spostamento cumulativo del layout (CLS, Cumulative Layout Shift).

First Significful Paint (FMP) e First CPU Idle (FCI) dal punteggio Lighthouse 5,7 sono stati sostituiti da metriche migliori per misurare la velocità da una prospettiva incentrata sull’utente. Questi sono i più grandi LCP (Contentful Paint) e TBT (Total Blocking Time) di Lighthouse 6,0.

Faro 5,7 Peso Faro 6,0 Peso
First Contentful Paint (FCP) 20% First Contentful Paint (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 totale di blocco (TBT) 25%
Tempo di interazione (TTI) 33% Tempo di interazione (TTI) 15%
- - Spostamento layout cumulativo (CLS) 5%

Di seguito sono riportate le metriche a sei velocità su cui concentrarsi durante la verifica del sito Web in preparazione per Lighthouse 6,0. Le metriche vengono disposte nell’ordine in cui vengono misurate durante il caricamento della pagina.

Nella parte inferiore di questo articolo è disponibile un elenco di controllo semplificato che copre le velocità che è necessario raggiungere e le tecniche di ottimizzazione per ogni metrica.

First Contentful Paint

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 aveva un peso del 20% in Lighthouse 5,7 ma deteneva solo il 15% di peso rispetto al punteggio Lighthouse 6,0.

Nell’area Provino sopra riportata, l’FCP per il caricamento della prima pagina viene misurato a 0,6 secondi. Questo è quando il contenuto appare per la prima volta sulla homepage per TheTieBar.com, ma noterai che non è quando tutto il contenuto è visibile. Si tratta di una distinzione importante tra la prima e la più grande pittura contentful. L’LCP viene misurato a 0,9 secondi quando viene visualizzato il contenuto sopra la piega.

Durante la verifica del punteggio di Lighthouse 6,0, assicurati che le tue pagine abbiano una media di FCP pari o inferiore a 2 secondi, poiché questa è la soglia del metrico per il 75° percentile ed è considerata veloce da Google. Le CCP comprese tra 2 e 4 secondi sono considerate velocità moderate, mentre quelle superiori a 4 secondi scendono al di sotto del 50° percentile e sono classificate come lente.

Se il caricamento degli FCP è troppo lento, ciò può essere dovuto a uno o più dei seguenti fattori:

  1. Troppe risorse di blocco del rendering
  2. File CSS di grandi dimensioni
  3. Mancanza di connessioni sicure alle origini di terze parti
  4. Lunghi tempi di risposta del server
  5. Reindirizzamenti di più pagine
  6. Risorse statiche non memorizzate nella cache
  7. Dimensioni DOM eccessive

Per ottimizzare il vostro FCP, prendete in considerazione quanto segue:

  1. Inline le risorse critiche, rimandare le risorse non critiche e rimuovere tutto ciò che non è stato utilizzato per ridurre l’impatto degli URL di blocco del rendering.
  2. Rimuovere tutti i caratteri non necessari dal CSS per ridimensionare i file.
  3. Utilizzare Preconnect per stabilire connessioni anticipate a importanti origini di terze parti.
  4. Riducete i tempi di risposta del server ottimizzando la logica delle applicazioni del server o aggiornando l’hardware del server per avere più memoria.
  5. Evitare un reindirizzamento di più di 1 pagina.
  6. Utilizzare la memorizzazione nella cache HTTP per memorizzare nella cache le risorse statiche.
  7. Avere meno di 1.500 nodi in totale, una profondità inferiore a 32 nodi e un nodo padre con meno di 60 nodi figlio per ridurre le dimensioni DOM.

Indice di velocità

Si misura la progressione visiva del caricamento di una pagina e calcola un punteggio complessivo per la velocità con cui il contenuto viene colorato. In Lighthouse 5,7, si ha avuto un peso del 27% rispetto al Performance Score di un sito web. In Lighthouse 6,0, questo fenomeno è parzialmente diminuito, influenzando il 15% del punteggio delle prestazioni di una pagina. Google vede ancora questo come una metrica percettiva chiave, in quanto una pagina con una visualizzazione lenta dell’immagine può essere percepita come bizzarra.

Lighthouse misura l’indice si catturando un filmstrip di una pagina durante il caricamento nel browser e analizzando la progressione visiva fotogramma per fotogramma. Il tempo medio di visualizzazione delle parti visibili della pagina determina il si. Questa metrica varia in base alle dimensioni dello schermo del dispositivo.

Durante la verifica del punteggio di Lighthouse 6,0, puntare a SIS in 4,3 o meno. Questa velocità si colloca al 75° percentile ed è considerata veloce da Google. Le pagine con SIS tra 4,3 e 5,8 secondi sono moderate, mentre SIS più lento di 5,8 secondi scende al di sotto del 50° percentile e sono considerate lente.

I tempi si più lenti tendono a derivare dai seguenti fattori:

  1. I tempi di caricamento sulla filettatura principale superano i 4 secondi
  2. Il tempo di esecuzione di JavaScript supera i 3,5 secondi
  3. I file di caratteri di grandi dimensioni causano un flash di testo invisibile (FOIT).

Per ridurre i tempi si, considerare quanto segue:

  1. 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.
  2. Assicurarsi che il testo rimanga visibile durante il caricamento dei font Web per evitare la visualizzazione FOIT.

Vernice Contentful più grande

LCP è una nuova metrica aggiunta a Lighthouse 6,0 e riceve il 25% di peso nel punteggio delle prestazioni di un sito. LCP sostituisce First Significful Paint (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 contenuti misurati includono elementi a livello di blocco, immagini (comprese le 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 piega.

I siti Web con le migliori prestazioni, come quelli su Layer0 (ora Edgio), offrono LCP in meno di 1 secondo. Gli LCP fino a 2,5 secondi sono considerati veloci e si classificano nel 75° percentile per questa metrica. Gli LCP compresi tra 2,5 e 4 secondi sono considerati moderati, che necessitano di miglioramenti, e gli LCP che superano i 4 secondi scendono al di sotto del 50° percentile e sono considerati lenti da Google.

LCP lenti di solito derivano da uno o più dei seguenti fattori:

  1. Tempi di risposta del server lenti
  2. JavaScript e CSS di blocco del rendering
  3. Lunghi tempi di caricamento delle risorse
  4. Problemi di rendering lato client

Se durante la verifica del punteggio di Lighthouse 6,0 trovate un LCP più lento rispetto a quello desiderato, prendete in considerazione quanto segue:

  1. Ottimizzare i tempi di risposta del server instradando il traffico alla CDN più vicina disponibile, memorizzando nella cache le risorse, distribuendo le pagine HTML prima della cache e stabilendo in anticipo connessioni di terze parti.
  2. Ridurre i CSS rimuovendo i CSS non necessari, rinviare i CSS non critici e i CSS critici in linea. Ridurre i tempi di blocco di JavaScript comprimendo i file JavaScript.
  3. Per ridurre i tempi di caricamento delle risorse, ottimizzare e comprimere i file di immagine e testo e precaricare le risorse importanti.
  4. Ottimizza il rendering lato client utilizzando il rendering lato server e il pre-rendering.

    Pianifica la demo individuale pianifica subito una conversazione consultiva per scoprire come Layer0 (ora Edgio) può aiutarti a caricare pagine in meno di secondi. Fai clic qui!

Tempo totale di blocco

TBT sostituisce FCI da Lighthouse 5,7, che in passato conteneva il 13% di peso. In Lighthouse 6,0, TBT misura la reattività della pagina e rappresenta il 25% di un punteggio delle prestazioni. TBT misura la gravità della non-interattiva di una pagina prima che diventi affidabile e interattiva.

Conosci questi casi dolorosi: Stai aspettando che una pagina venga caricata, e poi, finalmente, sembra pronta. Toccate il prodotto che volete vedere, ma non succede nulla. Tocca di nuovo? Questo periodo di attesa è noto per causare letteralmente stress nei consumatori. Essenzialmente, TBT è il periodo di tempo in cui un consumatore sente questo stress a causa della non interattività di una pagina.

Fonte: web.deV

Questa metrica viene misurata calcolando la somma totale del tempo “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 sopra riportata, nel thread principale sono in corso cinque attività, ma solo tre di esse 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 a un utente di notare e percepire la pagina come lenta, o peggio, inattiva, e di portarla via. Per evitare questo problema, 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 50° percentile e sono considerati lenti.

Le attività lunghe sono in genere causate da uno o più dei seguenti fattori:

  1. Codice di terze parti che blocca il thread principale per 250 ms o più
  2. Il tempo di esecuzione di JavaScript richiede più di 3,5 secondi
  3. Il thread principale è occupato per più di 4 secondi durante il carico
  4. Un volume elevato di richieste di rete e grandi dimensioni di trasferimento

Per migliorare questa metrica, considerare quanto segue:

  1. Caricare in modo efficiente JavaScript di terze parti utilizzando gli attributi asincroni o rinviare i tag di script, stabilire connessioni precoci a importanti origini di terze parti e utilizzare il caricamento pigro.
  2. 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.
  3. Ottimizzare CSS e JavaScript per ridurre il numero di risorse e le dimensioni di trasferimento.

Tempo di interazione

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 al TBT, che misura il tempo necessario a una pagina per diventare affidabile o completamente interattiva. Lighthouse considera una pagina interattiva in modo affidabile quando viene visualizzato il primo elemento di contenuto, i suoi script iniziali (se presenti) sono stati caricati e può rispondere all’input dell’utente entro 50 ms.

Per un utente, TTIs lenti può sembrare che una pagina sia inattiva o rotta. Sebbene una pagina sembri interattiva, in realtà non è perché il thread principale è bloccato (misurato da TBT). Durante il controllo del sito Web per Lighthouse 6,0, mirate 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 incidono sulla volontà dei consumatori di rimanere in loco.

Se la verifica del punteggio Lighthouse 6,0 mostra una velocità TTI scadente, ciò può essere dovuto a uno o più dei seguenti fattori:

  1. Grandi dimensioni di payload e tempi di analisi degli script lunghi
  2. Lunghi tempi di caricamento delle risorse
  3. Il codice di terze parti blocca il thread principale per 250 ms o più
  4. Catene di richieste critiche
  5. Velocità del thread principale ridotta e tempo di esecuzione JavaScript
  6. Elevato numero di risorse o grandi dimensioni di trasferimento

È possibile ridurre il tempo TTI ottimizzando JavaScript. Ciò include:

  1. Ridurre e comprimere i file JavaScript per ridurre le dimensioni del payload e il tempo di analisi degli script.
  2. Precaricare le richieste e/o aggiungere preconnessioni per tempi di caricamento più rapidi.
  3. Caricare in modo efficiente JavaScript di terze parti utilizzando gli attributi asincrono o rinviano sui tag di script e utilizzando il caricamento pigro.
  4. Ridurre l’effetto delle catene di richieste critiche sulle prestazioni riducendo il numero di risorse critiche e ottimizzando l’ordine di caricamento delle risorse rimanenti.
  5. 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.
  6. Ottimizzare CSS e JavaScript per ridurre il numero di risorse e le dimensioni di trasferimento.

Spostamento layout cumulativo

CLS è la terza nuova metrica introdotta in Lighthouse 6,0 ed è l’unica a non sostituire alcuna metrica da Lighthouse 5,7. CLS rappresenta l’ultimo 5% del punteggio Lighthouse 6,0 e misura la stabilità visiva.

Questa metrica misura la frequenza con cui gli utenti subiscono cambiamenti di layout imprevisti. L’hai già sperimentato prima: 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 viste come ingannevoli per un utente.

CLS è misurato dalla somma totale di tutti i punteggi di spostamento del layout individuale per ogni spostamento imprevisto del layout che si verifica durante l’intera durata della pagina. Un buon CLS è inferiore a 0,1 e si posiziona al 75° percentile per le prestazioni. Una CLS tra 0,1 e 0,25 è considerata moderata, e qualsiasi misura superiore a 0,25 scende al di sotto del 50° percentile ed è considerata lenta da Google.

Se durante la verifica del punteggio di Lighthouse 6,0 trovi un CLS scarso, è probabile che ciò sia dovuto a uno dei seguenti fattori:

  1. Un’immagine o un video che si ridimensiona
  2. Carattere caricato in ritardo e visualizzato più grande o più piccolo del previsto

Per migliorare questa metrica, considerare quanto segue:

  1. Includere dimensioni esatte sulle immagini e sugli elementi video
  2. Evita annunci pop-up o banner
  3. Evitare che il font causi FOIT/FOUT

I punteggi Lighthouse 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 dei motori di ricerca. Oltre al SEO, 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 all’anno.

In conclusione

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 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. Puntare a CCP di 2 secondi, a CCP di 2,5 e a 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 totale di blocco e tempo di interattività. Un controllo rapido del punteggio 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 sito come un’impresa inefficiente.

Infine, a nessuno piace il testo o le immagini che saltano dentro e fuori dallo schermo. Cumulative Layout Shift (spostamento layout cumulativo) è la sesta metrica da considerare nell’audit Lighthouse 6,0. Mirate a misurazioni CLS inferiori a 0,1, e riceverete l’intero 5% del peso che detiene nel vostro punteggio delle prestazioni.

Per ricevere un semplice elenco di controllo delle velocità da raggiungere nell’audit del punteggio Lighthouse 6,0, insieme alle tecniche di ottimizzazione per metrica, compilate il modulo sottostante.