Largest Contentful Paint (LCP)

Da sempre, per gli sviluppatori web è stato difficile misurare la velocità con cui i contenuti principali di una pagina web vengono caricati e sono visibili agli utenti. Le metriche meno recenti come load o DOMContentLoaded non funzionano bene perché non corrispondono necessariamente a ciò che l'utente vede sullo schermo. Inoltre, le nuove metriche sul rendimento incentrate sugli utenti come First Contentful Paint (FCP) catturano solo l'inizio dell'esperienza di caricamento. Se una pagina mostra una schermata iniziale o un indicatore di caricamento, questo momento non è molto pertinente per l'utente.

In passato, abbiamo consigliato metriche sulle prestazioni come First Meaningful Paint (FMP) e Indice di velocità (SI) (entrambi disponibili in Lighthouse) per acquisire una parte maggiore dell'esperienza di caricamento dopo la visualizzazione iniziale. Tuttavia, queste metriche sono complesse, difficili da spiegare e spesso errate, il che significa che non riescono ancora a identificare il momento in cui sono stati caricati i contenuti principali della pagina.

In base alle discussioni del W3C Web Performance Working Group e alle ricerche condotte da Google, abbiamo riscontrato che un modo più preciso per misurare il caricamento dei contenuti principali di una pagina è controllare quando viene visualizzato l'elemento più grande.

Che cos'è la metrica LCP?

Il valore LCP indica il tempo di rendering del blocco di immagine o di testo più grande visibile nell'area visibile, in relazione a quando l'utente ha visitato per la prima volta la pagina.

Qual è un buon punteggio LCP?

Per offrire una buona esperienza utente, i siti devono fare in modo che la metrica Largest Contentful Paint non superi i 2,5 secondi. Per assicurarti di raggiungere questo target per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile di caricamenti pagine, segmentati su dispositivi mobili e computer.

Quali elementi vengono presi in considerazione?

Come attualmente specificato nell'API Largest Contentful Paint, i tipi di elementi presi in considerazione per Largest Contentful Paint sono:

• Elementi <img> (la durata della presentazione del primo frame viene utilizzata per contenuti animati come GIF o PNG animati)
• Elementi <image> all'interno di un elemento <svg>
• Elementi <video> (il tempo di caricamento dell'immagine poster o il tempo di presentazione del primo frame per i video, a seconda dell'evento che si verifica per primo)
• Un elemento con un'immagine di sfondo caricata utilizzando la funzione url() (anziché un gradiente CSS).
• Elementi a livello di blocco che contengono nodi di testo o altri elementi di testo secondari a livello incorporato.

Tieni presente che limitare gli elementi a questo insieme limitato era intenzionale per semplificare le cose all'inizio. In futuro potrebbero essere aggiunti altri elementi (come l'assistenza completa per <svg>) man mano che vengono condotte ulteriori ricerche.

Oltre a considerare solo alcuni elementi, le misurazioni LCP utilizzano l'euristica per escludere determinati elementi che gli utenti potrebbero considerare come "non contenuti". Per i browser basati su Chromium, questi includono:

• Elementi con opacità pari a 0, invisibili all'utente.
• Elementi che coprono l'intera area visibile, che sono probabilmente considerati come sfondo anziché come contenuto
• Immagini segnaposto o altre immagini con bassa entropia, che probabilmente non riflettono i contenuti reali della pagina

È probabile che i browser continueranno a migliorare queste euristiche per assicurarci di soddisfare le aspettative degli utenti in merito all'elemento contentful più grande.

Queste euristiche di "contenuti" possono essere diverse da quelle utilizzate da First Contentful Paint (FCP), che potrebbe prendere in considerazione alcuni di questi elementi, ad esempio immagini segnaposto o immagini dell'area visibile completa, anche se non sono idonei per essere candidati LCP. Nonostante entrambi utilizzino la parola "contenuto" nel nome, l'obiettivo di queste metriche è diverso. FCP misura quando qualsiasi contenuto viene mostrato sullo schermo e LCP quando i contenuti principali vengono visualizzati, in modo che l'LCP sia più selettivo.

Come vengono stabilite le dimensioni di un elemento?

Le dimensioni dell'elemento segnalato per LCP corrispondono in genere a quelle visibili all'utente all'interno dell'area visibile. Se l'elemento si estende al di fuori dell'area visibile oppure se uno qualsiasi dell'elemento è tagliato o presenta overflow non visibile, queste parti non vengono conteggiate ai fini delle dimensioni dell'elemento.

Per gli elementi immagine che sono stati ridimensionati rispetto alle dimensioni intrinseche, la dimensione riportata nel report corrisponde alla dimensione visibile o alla dimensione intrinseca, a seconda di quale delle due opzioni è inferiore.

Per gli elementi di testo, il valore LCP prende in considerazione solo il rettangolo più piccolo che può contenere tutti i nodi di testo.

Per tutti gli elementi, la metrica LCP non considera margini, spaziatura interna o bordi applicati tramite CSS.

Quando viene indicata la metrica LCP?

Le pagine web spesso vengono caricate in fasi e, di conseguenza, è possibile che l'elemento più grande della pagina cambi.

Per gestire questo potenziale di modifica, il browser invia un PerformanceEntry di tipo largest-contentful-paint che identifica l'elemento con contenuti più grande non appena il browser ha dipinto il primo frame. Tuttavia, dopo il rendering dei frame successivi, invierà un altro elemento PerformanceEntry ogni volta che viene modificato l'elemento con contenuti più grande.

Ad esempio, in una pagina con testo e un'immagine hero, il browser potrebbe inizialmente visualizzare solo il testo, dopodiché il browser invierà una voce largest-contentful-paint la cui proprietà element probabilmente farà riferimento a <p> o <h1>. In seguito, al termine del caricamento dell'immagine hero, verrà inviata una seconda voce largest-contentful-paint e la relativa proprietà element farà riferimento a <img>.

Un elemento può essere considerato l'elemento con contenuti più grande solo dopo che è stato visualizzato ed è visibile all'utente. Le immagini non ancora caricate non sono considerate "renderizzate". I nodi di testo non utilizzano nemmeno i caratteri web durante il periodo di blocco dei caratteri. In questi casi, è possibile che l'elemento con contenuti più grande venga segnalato come l'elemento più piccolo, ma non appena termina il rendering dell'elemento più grande, viene creato un altro elemento PerformanceEntry.

Oltre al caricamento tardivo di immagini e caratteri, una pagina potrebbe aggiungere nuovi elementi al DOM non appena diventano disponibili nuovi contenuti. Se uno di questi nuovi elementi è più grande rispetto al precedente elemento con contenuti più grande, verrà segnalato anche un nuovo elemento PerformanceEntry.

Se viene rimosso dall'area visibile o anche dal DOM, l'elemento con contenuti più grande rimane quello più grande, a meno che non venga visualizzato un elemento più grande.

Il browser interromperà la segnalazione di nuove voci non appena l'utente interagisce con la pagina (tramite tocco, scorrimento o pressione di un tasto), in quanto l'interazione dell'utente spesso cambia ciò che è visibile all'utente (il che è particolarmente vero con lo scorrimento).

A scopo di analisi, devi segnalare solo l'ultimo PerformanceEntry inviato al tuo servizio di analisi.

Tempo di caricamento e tempo di rendering

Per motivi di sicurezza, il timestamp di rendering delle immagini non è esposto per le immagini multiorigine prive dell'intestazione Timing-Allow-Origin. Viene invece esposto solo il tempo di caricamento (dal momento che è già esposto attraverso molte altre API web).

Questo può portare a una situazione apparentemente impossibile in cui la metrica LCP è riportata dalle API web prima di FCP. Questo non è il caso, ma viene visualizzato solo a causa di questa limitazione di sicurezza.

Se possibile, ti consigliamo sempre di impostare l'intestazione Timing-Allow-Origin, in modo che le metriche siano più precise.

Come vengono gestite le modifiche al layout e alle dimensioni degli elementi?

Per mantenere basso il sovraccarico di prestazioni per il calcolo e l'invio di nuove voci di rendimento, le modifiche alla dimensione o alla posizione di un elemento non generano nuovi candidati LCP. Vengono prese in considerazione solo le dimensioni e la posizione iniziali dell'elemento nell'area visibile.

Ciò significa che le immagini visualizzate inizialmente fuori dallo schermo e poi trasferite sullo schermo potrebbero non essere segnalate. Significa anche che gli elementi visualizzati inizialmente nell'area visibile e poi spostati verso il basso e fuori dalla visualizzazione continueranno a riportare le dimensioni iniziali dell'area visibile.

Esempi

Ecco alcuni esempi di casi in cui la visualizzazione Largest Contentful Paint si verifica su alcuni siti web molto noti:

In entrambe le sequenze temporali riportate sopra, l'elemento più grande cambia man mano che vengono caricati i contenuti. Nel primo esempio, vengono aggiunti nuovi contenuti al DOM, cambiando l'elemento più grande. Nel secondo esempio, il layout cambia e i contenuti che in precedenza erano di dimensioni maggiori vengono rimossi dall'area visibile.

Sebbene capita spesso che i contenuti caricati in ritardo superino quelli già presenti nella pagina, non è necessariamente così. I due esempi successivi mostrano l'LCP che si verifica prima del caricamento completo della pagina.

Nel primo esempio, il logo di Instagram viene caricato relativamente presto e rimane l'elemento più grande anche se vengono mostrati progressivamente altri contenuti. Nell'esempio della pagina dei risultati della Ricerca Google, l'elemento più grande è un paragrafo di testo visualizzato prima del termine del caricamento dell'immagine o del logo. Poiché tutte le singole immagini sono più piccole di questo paragrafo, rimane l'elemento più grande durante tutto il processo di caricamento.

Come misurare la metrica LCP

La LCP può essere misurata in laboratorio o sul campo ed è disponibile nei seguenti strumenti:

Strumenti da campo

• Report sull'esperienza utente di Chrome
• PageSpeed Insights
• Search Console (report Core Web Vitals)
• Libreria JavaScript di web-vitals

Strumenti di lab

• Chrome DevTools
• Faro
• PageSpeed Insights
• WebPageTest

Misura LCP in JavaScript

Per misurare la metrica LCP in JavaScript, puoi utilizzare l'API Largest Contentful Paint. L'esempio seguente mostra come creare una risorsa PerformanceObserver che ascolti le voci largest-contentful-paint e le registri nella console.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Nell'esempio precedente, ogni voce largest-contentful-paint registrata rappresenta l'attuale candidato LCP. In generale, il valore startTime dell'ultima voce emessa corrisponde al valore LCP, ma non è sempre così. Non tutte le voci largest-contentful-paint sono valide per la misurazione della LCP.

La seguente sezione elenca le differenze tra i report dell'API e il modo in cui viene calcolata la metrica.

Differenze tra la metrica e l'API

• L'API invierà le voci largest-contentful-paint per le pagine caricate in una scheda in background, ma queste pagine devono essere ignorate durante il calcolo della metrica LCP.
• L'API continuerà a inviare le voci largest-contentful-paint dopo che una pagina è stata in background, ma queste voci devono essere ignorate per il calcolo della metrica LCP (gli elementi possono essere presi in considerazione solo se la pagina è rimasta in primo piano per tutto il tempo).
• L'API non segnala le voci largest-contentful-paint quando la pagina viene ripristinata dalla cache back-forward, ma in questi casi dovrebbe essere misurato il valore LCP, poiché gli utenti le visualizzano come visite di pagine distinte.
• L'API non considera gli elementi all'interno degli iframe, ma la metrica fa parte dell'esperienza utente della pagina. Nelle pagine con un LCP all'interno di un iframe, ad esempio un'immagine poster in un video incorporato, questa informazione verrà mostrata come differenza tra CrUX e RUM. Per misurare correttamente la metrica LCP, dovresti prendere in considerazione questi fattori. I frame secondari possono utilizzare l'API per segnalare le voci largest-contentful-paint al frame principale per l'aggregazione.
• L'API misura l'LCP dall'inizio della navigazione, ma per le pagine sottoposte a prerendering l'LCP deve essere misurato a partire dal giorno activationStart, poiché corrisponde al tempo LCP sperimentato dall'utente.

Anziché memorizzare tutte queste sottili differenze, gli sviluppatori possono utilizzare la libreria JavaScript web-vitals per misurare LCP, che le gestisce per te (ove possibile, il problema relativo all'iframe non è coperto):

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

Consulta il codice sorgente di onLCP() per un esempio completo di come misurare la LCP in JavaScript.

Cosa succede se l'elemento più grande non è il più importante?

In alcuni casi, l'elemento (o gli elementi) più importanti della pagina non corrisponde all'elemento più grande e gli sviluppatori potrebbero essere più interessati a misurare i tempi di rendering di questi altri elementi. Questa operazione è possibile utilizzando l'API Element Timing, come descritto nell'articolo sulle metriche personalizzate.

Come migliorare il valore di questa metrica

È disponibile una guida completa sull'ottimizzazione di LCP per guidarti nel processo di identificazione delle tempistiche LCP sul campo e per utilizzare i dati di prova controllati per analizzarle e ottimizzarle.

Risorse aggiuntive

• Lezioni apprese dal monitoraggio delle prestazioni in Chrome di Annie Sullivan su performance.now() (2019)

Log delle modifiche

Occasionalmente, i bug vengono scoperti nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta delle modifiche, che possono apparire come miglioramenti o regressioni nei report e nelle dashboard interni.

Per aiutarti a gestire questa situazione, tutte le modifiche all'implementazione o alla definizione di queste metriche verranno visualizzate in questo log delle modifiche.

Se hai feedback su queste metriche, puoi fornirle nel gruppo Google web-vitals-feedback.