Largest Contentful Paint: Cos’è e Come Migliorarlo

Dopo quanto tempo un utente vede il contenuto principale della tua pagina? È quello che misura il Largest Contentful Paint (LCP), uno dei tre Core Web Vitals di Google: il tempo che passa dall’inizio della navigazione alla comparsa dell’elemento più grande visibile nella schermata, di solito l’immagine principale o il titolo. Per offrire una buona esperienza deve restare entro 2,5 secondi.

Cos’è il Largest Contentful Paint?

Il Largest Contentful Paint (LCP) è la metrica dei Core Web Vitals che misura il tempo di rendering dell’immagine, del video o del blocco di testo più grande visibile nella schermata, a partire dal momento in cui l’utente ha avviato la navigazione. Indica quando il contenuto principale della pagina è con buona probabilità caricato.

Metriche più vecchie come l’evento load o DOMContentLoaded misurano momenti che l’utente non percepisce; il First Contentful Paint coglie solo l’inizio del caricamento, anche un’intestazione o un’icona. L’LCP comprende invece tutto il percorso, redirect, connessione e risposta del server inclusi: per questo i valori sul campo possono differire da quelli dei test di laboratorio.

Qual è un Buon Valore di LCP?

Un LCP è buono quando resta entro 2,5 secondi per almeno il 75% delle visite, richiede miglioramenti fino a 4 secondi ed è scadente oltre i 4 secondi. Smartphone e desktop si valutano separatamente, sui dati degli utenti reali degli ultimi 28 giorni.

• Buono: fino a 2,5 secondi.
• Richiede miglioramenti: da 2,5 a 4 secondi.
• Scadente: oltre 4 secondi.

Quali Elementi Vengono Considerati nel Calcolo dell’LCP?

Per l’LCP contano solo cinque tipi di elementi: immagini, immagini dentro un SVG, video, elementi con un’immagine di sfondo caricata con url() e blocchi di testo. Qualche regola aiuta a capire quale diventa l’elemento LCP della tua pagina:

• per le immagini animate, come GIF e PNG animati, conta il primo fotogramma; per i video, l’immagine di anteprima o il primo fotogramma, il primo dei due a comparire;
• sono esclusi gli elementi con opacità 0, quelli che coprono l’intero schermo (trattati come sfondo) e i segnaposto a bassa definizione;
• la dimensione è quella visibile nello schermo; per le immagini ridimensionate conta la minore tra dimensione visibile e dimensione reale, mentre margini, padding e bordi non contano;
• gli SVG scritti direttamente nel codice della pagina non sono candidati, le immagini .svg caricate come immagini sì;
• l’elemento più grande può cambiare durante il caricamento, prima il titolo e poi l’immagine; il browser smette di aggiornare l’LCP alla prima interazione dell’utente, che sia un tocco, uno scroll o un tasto;
• le pagine aperte in una scheda in background non vengono conteggiate dagli strumenti di Google.

Come si Misura il Largest Contentful Paint?

L’LCP si misura sul campo, con i dati degli utenti reali di Chrome mostrati da PageSpeed Insights e dal report Core Web Vitals di Search Console; in laboratorio si usano invece Lighthouse e Chrome DevTools. Per trovare l’elemento LCP di una pagina usa la diagnostica di Lighthouse in PageSpeed Insights oppure il pannello Prestazioni di DevTools, che mostra le metriche dal vivo e la scomposizione dei tempi.

Quando la pagina ha pochi dati propri, PageSpeed Insights mostra quelli dell’intera origine: controlla sempre quale dei due stai leggendo. Se laboratorio e campo non coincidono, i dati di campo descrivono meglio l’esperienza reale; la guida al test dei Core Web Vitals lo spiega strumento per strumento.

Le Quattro Fasi dell’LCP

Ogni LCP si può scomporre in quattro fasi consecutive, senza sovrapposizioni: tempo di risposta del server (TTFB), ritardo prima che inizi il caricamento della risorsa, durata del caricamento e ritardo di rendering dell’elemento.

1. Risposta del server (TTFB): dall’inizio della navigazione all’arrivo del primo byte dell’HTML.
2. Ritardo di caricamento: il tempo tra il primo byte e l’inizio del download della risorsa LCP.
3. Durata del caricamento: il download della risorsa, per esempio l’immagine.
4. Ritardo di rendering: il tempo tra la fine del download e la comparsa dell’elemento sullo schermo.

In una pagina ottimizzata, secondo le indicazioni di web.dev sull’ottimizzazione dell’LCP, il TTFB e la durata del caricamento valgono circa il 40% ciascuno, i due ritardi meno del 10%. Sono linee guida, utili per capire dove intervenire; se l’elemento LCP è un testo con un font di sistema, le due fasi di caricamento valgono zero.

Perché Comprimere le Immagini Spesso Non Basta?

I dati reali raccontano una storia diversa da quella che molti si aspettano. Secondo l’analisi di web.dev sui dati del Chrome UX Report, pubblicata nel 2024, nei siti con LCP scadente il tempo si concentra nella risposta del server e nel ritardo prima che l’immagine inizi a caricare:

La maggior parte di questi siti dedica meno del 10% del proprio LCP al download dell’immagine. Ottimizzare le immagini resta utile, ma conviene cercare prima il tempo perso nel server e nella scoperta della risorsa, come spiega l’articolo di web.dev sugli errori comuni nell’ottimizzare l’LCP con i dati del Chrome UX Report.

Come Migliorare il Largest Contentful Paint?

Per migliorare l’LCP bisogna far partire subito il caricamento della risorsa principale, permetterle di comparire appena scaricata, ridurne il peso e servire l’HTML più in fretta. Ecco gli interventi, nell’ordine in cui di solito rendono di più.

Far Partire Subito l’Immagine Principale

L’immagine principale deve essere nell’HTML iniziale, con src o srcset visibili, così il browser la trova subito mentre legge la pagina. Se è uno sfondo CSS o viene inserita da JavaScript, va precaricata con rel="preload". Due regole valgono sempre:

• mai loading="lazy" sull’immagine LCP: il lazy loading ne ritarda sempre il download;
• fetchpriority="high" su una o due immagini al massimo, altrimenti la priorità perde effetto.

<img src="/immagini/prodotto.webp" alt="Descrizione del prodotto"
     width="1200" height="800" fetchpriority="high">

In un test di laboratorio riportato da web.dev nella guida alla priorità di recupero, su Google Flights impostare la priorità alta sull’immagine di sfondo ha portato l’LCP da 2,6 a 1,9 secondi. Conviene anche servire le risorse critiche dallo stesso dominio dell’HTML, per evitare nuove connessioni.

Eliminare il Ritardo di Rendering

Un’immagine già scaricata può restare invisibile se il browser è bloccato da altro. Riduci il CSS nel <head>, eliminando le regole inutilizzate e rinviando quello non critico; evita gli script sincroni nel <head>, usando defer o async; preferisci il rendering lato server o il prerendering ai contenuti costruiti da JavaScript nel browser. Attenzione anche agli strumenti di A/B test che nascondono la pagina finché non hanno caricato le varianti e alle attività JavaScript lunghe, che peggiorano anche l’Interaction to Next Paint dopo il caricamento.

Ridurre la Durata del Caricamento

Servi immagini della dimensione giusta per ogni schermo, in formati moderni come WebP e AVIF e ben compresse; usa una CDN, anche dedicata alle immagini, insieme a una buona politica di cache. Per i font, riduci il peso dei file ed evita che il testo resti invisibile durante il caricamento. La guida alla SEO per le immagini spiega formati, dimensioni e attributi.

Ridurre il Tempo di Risposta del Server (TTFB)

Il Time to First Byte è il tempo tra l’inizio della navigazione e l’arrivo del primo byte dell’HTML: la guida di web.dev al TTFB lo considera buono entro 0,8 secondi e scadente oltre 1,8 secondi, come indicazione di massima. Le cause tipiche sono redirect multipli, per esempio da link di annunci o accorciati; cache della CDN non sfruttata perché l’URL contiene parametri; server lontani dagli utenti; pagine generate da zero a ogni richiesta. I rimedi sono una cache di pagina, una CDN, meno redirect e un hosting adeguato al traffico.

Perché l’LCP è Peggiore su Smartphone?

Su smartphone l’LCP può essere più alto perché i dispositivi sono meno potenti e le connessioni meno stabili. Google valuta smartphone e desktop separatamente, mentre Lighthouse simula un dispositivo di fascia media su rete mobile. Secondo i dati di web.dev, però, nei siti con LCP scadente il download dell’immagine su smartphone è solo del 20% più lento che su desktop: anche su mobile contano soprattutto server, scoperta della risorsa e rendering. Controlla le immagini responsive con srcset e il peso del JavaScript.

LCP e SEO: Quanto Conta per il Posizionamento?

L’LCP è uno dei tre Core Web Vitals che i sistemi di ranking di Google considerano, ma un buon valore non garantisce le prime posizioni: prima vengono la pertinenza e la qualità del contenuto. È in ogni caso un buon indicatore di quanto aspetta chi apre la tua pagina, che sia una scheda prodotto o la landing page di una campagna.

Prima di Comprimere, Scomporre

Davanti a un LCP scadente il primo pensiero va alle immagini, mentre i dati del Chrome UX Report analizzati da web.dev indicano che nei siti più lenti il tempo si perde soprattutto nella risposta del server e nel ritardo con cui la pagina richiede la risorsa. La scomposizione nelle quattro fasi dice su quale intervenire: TTFB, scoperta della risorsa, download o rendering.

Nel nostro lavoro di ottimizzazione del sito web individuiamo l’elemento LCP di ogni modello di pagina, ne scomponiamo i tempi sui dati reali e consegniamo agli sviluppatori gli interventi in ordine di impatto, verificando poi il risultato sul campo. Se Search Console segnala un LCP fuori soglia, puoi segnalarcelo e capire da quale fase partire.

Domande Frequenti sul Largest Contentful Paint