Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

Largest Contentful Paint (LCP) è una metrica di Core Web Vitals stabile per misurare la velocità di caricamento percepita. Indica il punto nella sequenza temporale di caricamento della pagina in cui è probabile che i contenuti principali della pagina siano stati caricati. Un LCP veloce rassicura l'utente circa l'utilità della pagina.

Per gli sviluppatori web è sempre 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 continuano a non identificare il momento in cui sono stati caricati i contenuti principali della pagina.

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

Che cos'è la metrica LCP?

La metrica LCP indica il tempo di rendering del blocco di immagine o di testo più grande visibile nell'area visibile, relativo alla prima visita dell'utente alla pagina.

Qual è un buon punteggio LCP?

Per offrire una buona esperienza utente, i siti devono fare in modo di avere una metrica LCP di 2,5 secondi o inferiore. Per assicurarti di raggiungere questo target per la maggior parte dei tuoi utenti, un'ottima soglia da misurare è il 75° percentile di caricamenti pagine, segmentati su dispositivi mobili e computer.

Quali elementi vengono presi in considerazione?

Come 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() (invece di un gradiente CSS)
• Elementi a livello di blocco che contengono nodi di testo o altri elementi di testo secondari a livello in linea.

Limitare gli elementi a questo insieme limitato era intenzionale per ridurre la complessità. In futuro potrebbero essere aggiunti altri elementi (come il supporto completo 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 probabilmente considereranno come "non contenuti". Per i browser basati su Chromium, queste includono:

• Elementi con un'opacità pari a 0, che li rende invisibili all'utente.
• Elementi che coprono l'intera area visibile, che con molta probabilità sono elementi di sfondo.
• Immagini segnaposto o altre immagini con bassa entropia, che probabilmente non riflettono i veri contenuti 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" sono diverse da quelle utilizzate da FCP, che potrebbe prendere in considerazione alcuni di questi elementi, ad esempio immagini segnaposto o immagini a schermo intero, anche se non sono idonee a essere candidati LCP. Nonostante entrambi utilizzino la parola "contentful" nel proprio nome, lo scopo di queste metriche è diverso. FCP misura quando qualsiasi contenuto viene visualizzato sullo schermo, mentre LCP misura quando vengono visualizzati i contenuti principali.

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 alla loro dimensione intrinseca, la dimensione riportata nel report è la dimensione visibile o la dimensione intrinseca, a seconda di quale delle due dimensioni è inferiore.

Per gli elementi di testo, il valore LCP considera 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, l'elemento più grande al suo interno potrebbe cambiare durante il caricamento.

Per gestire questo potenziale di modifica, il browser invia un codice PerformanceEntry di tipo largest-contentful-paint che identifica l'elemento con contenuti più grande non appena il browser ha dipinto il primo frame. Dopo il rendering dei frame successivi, invia 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 e invierà una voce largest-contentful-paint la cui proprietà element fa riferimento a un <p> o <h1>. Al termine del caricamento dell'immagine hero, viene inviata una seconda voce largest-contentful-paint, con una proprietà element che fa riferimento a <img>.

Un elemento può essere considerato l'elemento con contenuti più grande solo dopo essere stato sottoposto a rendering ed essere 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 venga indicato come l'elemento con contenuti più grande l'elemento più piccolo, ma non appena termina il rendering dell'elemento più grande, ne viene creato un altro 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 dell'elemento con contenuti più grande precedente, viene creato un nuovo elemento 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 eseguito il rendering di un elemento più grande.

Il browser smette di segnalare le nuove voci non appena l'utente interagisce con la pagina (tramite tocco, scorrimento o pressione dei tasti), perché l'interazione dell'utente spesso cambia ciò che è visibile all'utente (soprattutto durante lo scorrimento).

A scopo di analisi, segnala solo l'invio più recente di PerformanceEntry 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. Invece, è disponibile solo il tempo di caricamento, già esposto da altre API.

Ciò può portare a una situazione apparentemente impossibile in cui la metrica LCP è riportata dalle API web prima di FCP. Ciò è dovuto solo a questa limitazione di sicurezza e non rappresenta ciò che sta realmente accadendo.

Se possibile, ti consigliamo sempre di impostare l'intestazione Timing-Allow-Origin per rendere le metriche più precise.

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

Per mantenere basso il sovraccarico di prestazioni legato 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 la posizione e le dimensioni iniziali dell'elemento nell'area visibile.

Ciò significa che le immagini visualizzate inizialmente fuori dallo schermo e poi di cui viene eseguita la transizione potrebbero non essere segnalate. Significa anche che gli elementi visualizzati inizialmente nell'area visibile e poi esclusi dalla visualizzazione segnalano comunque le dimensioni iniziali dell'area visibile.

Esempi

Ecco alcuni esempi di come Largest Contentful Paint si verifica su alcuni siti web popolari:

In entrambe le tempistiche, l'elemento più grande (evidenziato in verde) cambia man mano che i contenuti vengono caricati. Nel primo esempio, vengono aggiunti nuovi contenuti al DOM, modificando l'elemento più grande. Nel secondo esempio, il layout cambia, rimuovendo un precedente elemento di contenuti più grande dall'area visibile.

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

Nel primo esempio, il logo di Instagram si carica relativamente presto e rimane l'elemento più grande anche se vengono aggiunti altri contenuti. Nell'esempio della pagina dei risultati della Ricerca Google, l'elemento più grande è un paragrafo di testo che viene visualizzato prima del termine del caricamento di qualsiasi immagine o del logo. Poiché ogni singola immagine è più piccola di questo paragrafo, rimane l'elemento più grande durante 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 Segnali web essenziali)
• Libreria JavaScript di web-vitals

Strumenti di lab

• Chrome DevTools
• Faro
• PageSpeed Insights
• WebPageTest

Misura LCP in JavaScript

Per misurare la LCP in JavaScript, utilizza l'API Largest Contentful Paint. L'esempio seguente mostra come creare un elemento PerformanceObserver che rimane in ascolto delle 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. Tuttavia, non tutte le largest-contentful-paintvoci 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 invia 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 continua a inviare le voci largest-contentful-paint dopo che una pagina è stata in background, ma queste voci devono essere ignorate durante il calcolo della 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 la metrica LCP dovrebbe essere misurata, poiché gli utenti le riscontrano come visite di pagine distinte.
• L'API non considera gli elementi all'interno degli iframe, ma la metrica sì perché 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, viene visualizzata una differenza tra CrUX e RUM. Per misurare correttamente la metrica LCP, devi includere iframe. I frame secondari possono utilizzare l'API per segnalare le proprie voci largest-contentful-paint al frame principale per l'aggregazione.
• L'API misura LCP dall'inizio della navigazione. Per le pagine sottoposte a prerendering, misura il valore LCP a partire dal giorno activationStart, perché corrisponde al tempo di LCP registrato dall'utente.

Invece di memorizzare tutte queste sottili differenze, consigliamo agli sviluppatori di usare la libreria JavaScript web-vitals per misurare l'LCP, che gestisce la maggior parte di queste differenze per conto tuo. (non tratta il problema dell'iframe).

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 corrispondono 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 dell'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, a volte, nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta 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 vengono mostrate in questo log delle modifiche.

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