Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

Storicamente, per gli sviluppatori web era sempre difficile misurare la velocità con cui i contenuti principali di una pagina web si caricano 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 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.

Cos'è un buon punteggio LCP?

Per offrire una buona esperienza utente, i siti devono cercare di ottenere Largest Contentful Paint di 2,5 secondi o meno. Per assicurarti di raggiungere questo target per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile dei caricamenti delle pagine, segmentato tra dispositivi mobili e computer.

di Gemini Advanced.

Quali elementi vengono presi in considerazione?

Come attualmente specificato nella sezione Largest Contentful Paint API, i tipi di elementi considerati per il Largest Contentful Paint sono:

• Elementi <img> (la tempo di presentazione del primo frame viene utilizzata per i contenuti animati come GIF o PNG animati)
• <image> elementi all'interno di un elemento <svg>
• <video> (viene utilizzato il tempo di caricamento dell'immagine poster o il tempo di presentazione del primo frame per i video, a seconda del caso)
• Un elemento con un'immagine di sfondo caricata tramite la funzione url() (al contrario di 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 la limitazione degli elementi a questo insieme limitato era intenzionale per semplificare le cose all'inizio. In futuro potrebbero essere aggiunti altri elementi (come il supporto completo di <svg>) man mano che verranno condotte ulteriori ricerche.

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 non sono visibili 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 strategie di euristica per garantire che corrispondano alle 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 valore FCP misura quando qualsiasi contenuto viene visualizzato sullo schermo e LCP quando i contenuti principali vengono visualizzati in modo che l'LCP sia 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 all'esterno dell'area visibile o se uno o più elementi sono ritagliati o presentano overflow non visibile, queste parti non vengono conteggiate ai fini delle dimensioni dell'elemento.

Per gli elementi immagine di cui è stata modificata la dimensione rispetto alle dimensioni intrinseche, vengono registrate le dimensioni visibili o quelle intrinseche, 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 margini, spaziature interne o bordi applicati utilizzando CSS.

Quando viene registrato il valore LCP?

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

Per gestire questo potenziale cambiamento, il browser invia un elemento 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 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 eseguire il rendering solo del testo, a quel punto 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, viene 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". Neanche i nodi di testo che utilizzano 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 al caricamento tardivo di immagini e caratteri, una pagina potrebbe aggiungere nuovi elementi al DOM quando diventano disponibili nuovi contenuti. Se uno di questi nuovi elementi supera le dimensioni del precedente elemento con contenuti più grande, verrà registrato anche un nuovo PerformanceEntry.

Se l'elemento con contenuti più grande viene rimosso dall'area visibile o anche dal DOM, rimane l'elemento con contenuti più grande, 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 scopo di analisi, devi segnalare al tuo servizio di analisi solo l'elemento PerformanceEntry inviato più di recente.

Tempo di caricamento e tempo di rendering

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

Ciò può portare a una situazione apparentemente impossibile in cui le API web segnalano LCP prima di FCP. Non è così, ma sembra che lo sia a causa di questa limitazione di sicurezza.

Se possibile, è sempre consigliabile 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 del rendimento dovuto al calcolo e all'invio di nuove voci di rendimento, le modifiche alle dimensioni 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 che inizialmente vengono visualizzate fuori dallo schermo e poi passano sullo schermo potrebbero non essere segnalate. 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 si verifica Largest Contentful Paint su alcuni siti web popolari:

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 è sempre così. I due esempi successivi mostrano che l'LCP si verifica prima del caricamento completo della pagina.

Nel primo esempio, il logo di Instagram viene caricato in tempi relativamente brevi e rimane l'elemento più grande anche se gli altri contenuti vengono progressivamente mostrati. Nell'esempio della pagina dei risultati della Ricerca Google, l'elemento più grande è un paragrafo di testo che viene visualizzato prima del caricamento di qualsiasi immagine o 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

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

Strumenti del lab

• Chrome DevTools
• Lighthouse
• PageSpeed Insights
• WebPageTest

Misurare 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 precedente, ogni voce largest-contentful-paint registrata rappresenta l'attuale candidato LCP. In generale, 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 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à 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 registra le voci largest-contentful-paint quando la pagina viene ripristinata dalla cache di navigazione avanti/indietro, ma in questi casi la LCP deve essere misurata perché gli utenti le considerano visite a pagine distinte.
• L'API non prende in considerazione gli elementi all'interno degli iframe, ma la metrica fa parte dell'esperienza utente sulla pagina. Nelle pagine con un LCP all'interno di un iframe, ad esempio un'immagine di poster su un video incorporato, questo verrà visualizzato come 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 piccole differenze, gli sviluppatori possono usare la libreria JavaScript di web-vitals per misurare l'LCP, 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 corrispondono all'elemento più grande e gli sviluppatori potrebbero essere più interessati a misurare i tempi di rendering di questi altri elementi. Ciò è possibile utilizzando l'API Element Timing, come descritto nell'articolo sulle metriche personalizzate.

Come migliorare il valore di questa metrica

È disponibile una guida completa all'ottimizzazione della metrica LCP che ti guiderà nel processo di identificazione dei tempi LCP sul campo e nell'utilizzo dei dati di laboratorio per visualizzarli in dettaglio e ottimizzarli.

Risorse aggiuntive

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

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 devono essere apportate delle modifiche che possono apparire come miglioramenti o regressioni nei report e nelle dashboard 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.