Il Largest Contentful Paint, spesso abbreviato con l’acronimo LCP, è una metrica di prestazione web introdotta da Google per misurare la velocità con cui un utente percepisce il caricamento del contenuto principale di una pagina. In termini pratici, indica il momento in cui l’elemento visivo più grande all’interno dell’area visibile del browser viene completamente renderizzato. Questo elemento può essere un’immagine, un blocco di testo, un video o un elemento grafico di grandi dimensioni.
Il valore del Largest Contentful Paint è espresso in secondi e si misura sia sul campo, con i dati degli utenti reali, sia in laboratorio con strumenti come Lighthouse. Riflette ciò che la persona vede effettivamente sullo schermo. Insieme all’Interaction to Next Paint e al Cumulative Layout Shift, contribuisce a definire le Core Web Vitals, l’insieme di indicatori che Google usa per valutare l’esperienza di pagina. L’INP ha sostituito il First Input Delay a marzo 2024.
Cosa misura il Largest Contentful Paint
Il Largest Contentful Paint misura il tempo che intercorre tra l’inizio del caricamento della pagina e il momento in cui l’elemento più grande visibile nella finestra del browser termina di essere disegnato. Non si tratta quindi del primo elemento che appare, ma di quello con l’area maggiore, che di norma cattura l’attenzione dell’utente. Questa distinzione è importante perché un titolo o un’immagine principale possono dominare la scena anche se compaiono dopo altri contenuti minori.
La metrica viene aggiornata dinamicamente: se durante il caricamento emerge un elemento ancora più grande, il valore del Largest Contentful Paint viene ricalcolato. Il dato finale corrisponde all’ultimo elemento di grandi dimensioni renderizzato prima che l’utente interagisca con la pagina, ad esempio con uno scorrimento o un clic.
Come si individua l’elemento più grande
Il calcolo si basa sull’osservazione degli elementi candidati all’interno dell’area visibile. Il browser confronta le dimensioni di ciascun elemento e registra il tempo di renderizzazione del più esteso. Sono considerati candidati elementi come immagini, video, immagini di sfondo caricate tramite CSS e blocchi di testo.
Quali elementi entrano nel calcolo
Non tutti gli elementi della pagina concorrono al Largest Contentful Paint. Vengono esclusi, ad esempio, i contenuti fuori dalla finestra visibile, le immagini con dimensioni nulle e gli elementi nascosti. Il confronto avviene solo tra ciò che l’utente può effettivamente vedere al momento del caricamento.
In cosa si distingue dal First Contentful Paint
A differenza di metriche come il First Contentful Paint, che segnala la comparsa del primo contenuto, il Largest Contentful Paint si concentra sull’elemento più significativo. Questo lo rende più vicino alla percezione reale della velocità di caricamento da parte dell’utente.
LCP, posizionamento ed esperienza di navigazione
Le Core Web Vitals rientrano nei segnali di esperienza di pagina che Google considera nel posizionamento, senza dichiararne un peso: la pertinenza del contenuto conta di più. Un LCP lento incide soprattutto sull’esperienza: chi vede il contenuto principale in ritardo può abbandonare la pagina prima di leggerla.
Migliorare questa metrica significa rendere la pagina più rapida nella parte che conta di più. Per un sito di e-commerce, ad esempio, l’elemento più grande potrebbe essere l’immagine del prodotto in evidenza; per un blog, potrebbe essere il titolo dell’articolo o un’immagine di copertina.
Le tre fasce di prestazione e i valori di riferimento
Google classifica il Largest Contentful Paint in tre fasce di prestazione, basate sul valore misurato per il settantacinquesimo percentile delle visite. Queste soglie aiutano a interpretare rapidamente la qualità dell’esperienza offerta.
| Fascia | Valore LCP | Giudizio di Google |
|---|---|---|
| Buona | Fino a 2,5 secondi | Caricamento rapido |
| Da migliorare | Tra 2,5 e 4 secondi | Da ottimizzare |
| Scarsa | Oltre 4 secondi | Insufficiente |
Le soglie sono le stesse per mobile e desktop. Il giudizio si basa sul 75° percentile delle visite, su una finestra di 28 giorni nei dati sul campo.
Le quattro parti dell’LCP
Per capire dove si perde tempo conviene scomporre l’LCP in quattro fasi consecutive:
- Tempo di risposta del server (TTFB): da quando parte la richiesta al primo byte di risposta.
- Ritardo di caricamento della risorsa: il tempo che passa prima che il browser inizi a scaricare l’immagine o il font dell’elemento principale.
- Durata del caricamento: il tempo di scaricamento della risorsa, che dipende da peso, formato e rete.
- Ritardo di resa: il tempo tra la fine del download e il momento in cui l’elemento viene effettivamente disegnato, spesso causato da CSS o JavaScript che bloccano il rendering.
La fase più lunga indica l’intervento prioritario: un server lento non si risolve comprimendo le immagini, e viceversa.
Da dove partire per ridurre i tempi
Ottimizzare questa metrica richiede interventi mirati sulle risorse che compongono l’elemento più grande. Le strategie più efficaci riguardano la riduzione dei tempi di risposta del server, l’eliminazione delle risorse che bloccano il rendering e la prioritizzazione dei contenuti visibili.
Comprimere e servire immagini più leggere
Le immagini rappresentano spesso l’elemento più grande della pagina. Comprimerle, utilizzare formati moderni come WebP o AVIF e specificare le dimensioni corrette aiuta a ridurre i tempi di caricamento. Il caricamento differito (lazy loading) va applicato alle immagini fuori schermo, mai all’immagine principale: sull’elemento LCP ritarda la comparsa e peggiora la metrica. Per l’immagine principale è utile l’attributo fetchpriority=”high”, che chiede al browser di scaricarla per prima.
Testo e font: mostrare subito il contenuto
Quando l’elemento più grande è un blocco di testo, il ritardo può dipendere dal caricamento dei font. Precaricare i caratteri essenziali e utilizzare la visualizzazione di scambio dei font consente di mostrare il testo prima che il font definitivo sia disponibile.
Dove leggere i dati sul campo e in laboratorio
Per rilevare il Largest Contentful Paint si utilizzano strumenti sia sul campo sia in laboratorio. Gli strumenti sul campo raccolgono dati dagli utenti reali, mentre quelli in laboratorio simulano condizioni controllate. Tra i più noti figurano PageSpeed Insights, che combina entrambe le fonti, e la sezione dedicata ai Core Web Vitals nella Search Console. Anche le librerie di monitoraggio delle prestazioni web permettono di raccogliere il valore direttamente dal browser degli utenti.
Buone pratiche operative
- Ridurre i tempi di risposta del server ottimizzando hosting, cache e database.
- Eliminare o rinviare le risorse che bloccano il rendering, come fogli di stile e file di codice non critici.
- Precaricare l’immagine o il contenuto principale che funge da elemento più grande, con priorità alta (fetchpriority=”high”) e senza lazy loading.
- Comprimere e convertire le immagini in formati moderni più leggeri.
- Applicare il caricamento differito a tutto ciò che si trova fuori dalla finestra visibile.
- Ridurre il peso dei font e utilizzare il precaricamento dei caratteri essenziali.
- Monitorare regolarmente la metrica con dati reali e non solo con test sintetici.
- Ottimizzare la consegna dei contenuti tramite reti di distribuzione dei contenuti.
Domande frequenti sul Largest Contentful Paint
Che cosa misura esattamente il Largest Contentful Paint?
Misura il tempo necessario affinché l’elemento visivo più grande nella finestra del browser venga completamente renderizzato, offrendo un’indicazione della velocità percepita di caricamento.
Qual è il valore considerato buono?
Un valore pari o inferiore a 2,5 secondi è considerato buono. Tra 2,5 e 4 secondi la prestazione è da migliorare, mentre oltre 4 secondi risulta scarsa.
Il Largest Contentful Paint influisce sul posizionamento?
Sì, rientra tra le Core Web Vitals, che Google considera tra i segnali di esperienza di pagina. Google non dichiara il peso: conta meno della pertinenza e della qualità dei contenuti.
Quali elementi possono essere l’elemento più grande?
Possono esserlo immagini, video, immagini di sfondo caricate via CSS e blocchi di testo di grandi dimensioni, purché visibili nella finestra del browser.
Come si migliora questa metrica?
Ottimizzando server, immagini, font e risorse che bloccano il rendering, oltre a precaricare il contenuto principale e a differire ciò che non è visibile.
Dove si controlla il valore del Largest Contentful Paint?
Si può verificare tramite PageSpeed Insights, la Search Console e gli strumenti di monitoraggio delle prestazioni che raccolgono dati dagli utenti reali.
Dal glossario al progettoIl tuo sito supera le soglie dei Core Web Vitals?L’ottimizzazione delle prestazioni lavora su velocità di caricamento e Core Web Vitals per una migliore esperienza degli utenti.Scopri l’ottimizzazione dei Core Web Vitals
Voci correlate:
Core Web Vitals Lcp google Cls core web vitals Cumulative Layout Shift