Largest Contentful Paint (LCP)

Supporto dei browser

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: non supportato.

Origine

In passato, per gli sviluppatori web è stato difficile misurare la velocità con cui i contenuti principali di una pagina web vengono caricati e resi visibili agli utenti. Le metriche precedenti come load o DOMContentLoaded non funzionano bene perché non corrispondono necessariamente a ciò che l'utente vede sullo schermo. Inoltre, le metriche sul rendimento più recenti e incentrate sull'utente, come la First Contentful Paint (FCP), rilevano 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 sul rendimento come First Meaningful Paint (FMP) e Speed Index (SI) (entrambe disponibili in Lighthouse) per aiutare a comprendere meglio l'esperienza di caricamento dopo la visualizzazione iniziale, ma queste metriche sono complesse, difficili da spiegare e spesso sbagliate, il che significa che non identificano ancora quando 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 scoperto che un modo più accurato per misurare il momento in cui vengono caricati i contenuti principali di una pagina è esaminare il momento in cui viene visualizzato l'elemento più grande.

Che cos'è LCP?

LCP indica il tempo necessario per visualizzare l'immagine, il blocco di testo o il video più grande visibile nell'area visibile rispetto al momento in cui l'utente ha visitato per la prima volta la pagina.

Che cos'è un buon punteggio LCP?

Per offrire una buona esperienza utente, i siti dovrebbero fare in modo che il valore Largest Contentful Paint sia pari o inferiore a 2,5 secondi. Per assicurarti di raggiungere questo target per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile dei caricamenti di pagine, segmentati per dispositivi mobili e computer.

I valori LCP buoni sono pari o inferiori a 2,5 secondi, quelli scarsi sono superiori a 4,0 secondi e quelli intermedi richiedono miglioramenti
Un buon valore LCP è pari o inferiore a 2,5 secondi.

Quali elementi vengono presi in considerazione?

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

Tieni presente che la limitazione degli elementi a questo insieme limitato è stata intenzionale per mantenere le cose semplici all'inizio. In futuro, con l'avanzamento della ricerca, potrebbero essere aggiunti elementi aggiuntivi (come il supporto completo di <svg>).

Oltre a prendere in considerazione solo alcuni elementi, le misurazioni LCP utilizzano l'euristica per escludere determinati elementi che gli utenti potrebbero considerare "senza contenuti". Per i browser basati su Chromium, sono inclusi:

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

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

Queste heurismi "con contenuti" possono essere diverse da quelle utilizzate da First Contentful Paint (FCP), che potrebbe prendere in considerazione alcuni di questi elementi, come le immagini segnaposto o le immagini dell'area visibile completa, anche se non sono idonei a essere candidati LCP. Sebbene entrambe contengano il termine "contenuto" nel nome, lo scopo di queste metriche è diverso. Il FCP misura il momento in cui qualsiasi contenuto viene visualizzato sullo schermo, mentre il LCP quando vengono visualizzati i contenuti principali, pertanto il LCP è pensato per essere più selettivo.

Come vengono determinate le dimensioni di un elemento?

Le dimensioni dell'elemento registrate per LCP sono in genere quelle visibili all'utente all'interno dell'area visibile. Se l'elemento si estende oltre l'area visibile o se una parte dell'elemento è ritagliata 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 segnalata è la dimensione visibile o la dimensione intrinseca, a seconda di quale sia la più piccola.

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

Per tutti gli elementi, LCP non prende in considerazione i margini, i padding o i bordi applicati utilizzando il CSS.

Quando viene registrato il valore LCP?

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

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

Ad esempio, in una pagina con testo e un'immagine hero, il browser potrebbe inizialmente visualizzare solo il testo e a quel punto 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 essere stato visualizzato ed è visibile all'utente. Le immagini che non sono ancora state caricate non sono considerate "renderizzate". Né i nodi di testo che utilizzano i caratteri web durante il periodo di blocco dei caratteri. In questi casi, un elemento più piccolo potrebbe essere segnalato come elemento più grande con contenuti, ma non appena il rendering dell'elemento più grande è terminato, viene creato un altro PerformanceEntry.

Oltre a immagini e caratteri con caricamento tardivo, una pagina può aggiungere nuovi elementi al DOM man mano che diventano disponibili nuovi contenuti. Se uno di questi nuovi elementi è più grande dell'elemento con contenuti più grande precedente, verrà segnalato anche un nuovo PerformanceEntry.

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

Il browser smetterà di registrare nuove voci non appena l'utente interagisce con la pagina (tramite un tocco, uno scorrimento o una pressione del tasto), poiché l'interazione dell'utente cambia spesso ciò che è visibile all'utente (il che è particolarmente vero con lo scorrimento).

A fini di analisi, devi segnalare al tuo servizio di analisi solo il PerformanceEntry inviato più di recente.

Tempo di caricamento e tempo di rendering

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

Ciò può portare alla situazione apparentemente impossibile in cui LCP viene segnalato dalle API web come precedente al FCP. Non è così, ma sembra che lo sia a causa di questa limitazione di sicurezza.

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

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

Per mantenere basso l'overhead delle prestazioni legato al calcolo e all'invio di nuove voci relative al 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 inizialmente visualizzate fuori schermo e poi sullo schermo potrebbero non essere registrate. Ciò significa anche che gli elementi inizialmente visualizzati nell'area visibile, che vengono poi spostati verso il basso e non sono più visibili, continueranno a riportare le dimensioni iniziali nell'area visibile.

Esempi

Ecco alcuni esempi di quando la visualizzazione Largest Contentful Paint viene eseguita su alcuni siti web noti:

Cronologia Largest Contentful Paint di cnn.com
Una cronologia LCP di cnn.com.
Cronologia di Largest Contentful Paint da techcrunch.com
Una cronologia LCP di techcrunch.com.

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

Spesso i contenuti caricati in un secondo momento sono più grandi di quelli già presenti nella pagina, ma non è necessariamente così. I due esempi successivi mostrano che l'LCP si verifica prima del caricamento completo della pagina.

Cronologia Largest Contentful Paint di instagram.com
Una sequenza temporale LCP da instagram.com.
Tempistica di Largest Contentful Paint da google.com
Una sequenza temporale LCP da google.com.

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

Come misurare LCP

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

Strumenti sul campo

Strumenti di laboratorio

Misurare l'LCP in JavaScript

Per misurare LCP in JavaScript, puoi utilizzare l'API Largest Contentful Paint. L'esempio seguente mostra come creare un PerformanceObserver che ascolta le voci largest-contentful-paint e le registra 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 riportato sopra, ogni voce largest-contentful-paint registrata rappresenta l'attuale candidato LCP. In genere, il valore startTime dell'ultima voce emessa è il valore LCP, ma non sempre è così. Non tutte le voci largest-contentful-paint sono valide per la misurazione del LCP.

La sezione seguente 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à voci largest-contentful-paint per le pagine caricate in una scheda in background, ma queste pagine devono essere ignorate durante il calcolo del LCP.
  • L'API continuerà a inviare largest-contentful-paint voci dopo che una pagina è stata creata in background, ma queste voci dovrebbero essere ignorate durante il calcolo dell'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 l'LCP deve essere misurato, poiché gli utenti le registrano come visite di pagine distinte.
  • L'API non prende in considerazione gli elementi all'interno degli iframe, ma la metrica lo fa in quanto fanno 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, questo mostrerà una differenza tra CrUX e RUM. Per misurare correttamente LCP, devi tenerli in considerazione. I frame secondari possono utilizzare l'API per segnalare le proprie voci largest-contentful-paint al frame principale per l'aggregazione.
  • L'API misura il LCP dall'inizio della navigazione, ma per le pagine pre-renderizzate il LCP deve essere misurato da activationStart, poiché corrisponde al tempo LCP percepito dall'utente.

Anziché memorizzare tutte queste sottili differenze, gli sviluppatori possono utilizzare la web-vitalslibreria JavaScript per misurare il tempo di caricamento della pagina più lungo, che gestisce queste differenze per te (ove possibile; tieni presente che il problema dell'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 l'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 a quello più grande e gli sviluppatori potrebbero essere più interessati a misurare i tempi di rendering di questi altri elementi. Questo è 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 dell'LCP che ti guida nella procedura di identificazione dei tempi LCP sul campo e nell'utilizzo dei dati di laboratorio per visualizzarli in dettaglio e ottimizzarli.

Risorse aggiuntive

Log delle modifiche

A volte vengono rilevati bug nelle API utilizzate per misurare le metriche e, a volte, nelle definizioni delle metriche stesse. Di conseguenza, a volte è necessario apportare modifiche, che possono essere visualizzate come miglioramenti o regressioni nelle dashboard e nei report interni.

Per aiutarti a gestire questo aspetto, 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 fornirli nel gruppo Google web-vitals-feedback.