Largest Contentful Paint (LCP) - Docs di MetricSpot

Cosa controlla questo check

Legge l’LCP da Google PageSpeed Insights (che esegue Lighthouse sul tuo URL). Il valore è il tempo, in secondi, fino a quando finisce di renderizzare il più grande elemento sopra la piega, di solito un’immagine hero, un poster video o un grosso titolo.

Valore LCP	Verdetto
≤ 2,5 s	Buono
2,5–4,0 s	Da migliorare
> 4,0 s	Scarso

Perché è importante

LCP è uno dei tre Core Web Vitals di Google. Un LCP scarso non ti fa solo scendere nel ranking, si ripercuote su ogni funnel di conversione del sito. I dati stessi di Google mostrano che le pagine con LCP sotto i 2,5 s hanno bounce rate ~25% inferiori rispetto a pagine sopra i 4 s.

L’LCP è dominato da quanto velocemente carica l’elemento LCP, non da quanto è veloce il tuo JavaScript. L’elemento LCP è quasi sempre un’immagine. Quindi l’80% dei fix per l’LCP riguarda la consegna delle immagini.

Come risolvere

In ordine di impatto:

1. Fai il preload dell’immagine LCP. Nel tuo <head>:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Così il download dell’immagine inizia prima che il browser abbia finito di analizzare il resto dell’HTML.

2. Servi formati moderni. AVIF o WebP, con fallback JPEG per i browser più vecchi:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="600" fetchpriority="high" />
</picture>

3. Imposta dimensioni esplicite sull’<img> (attributi width + height). I browser riservano lo spazio senza aspettare che l’immagine carichi.

4. Ridimensiona per la viewport. Non servire un’hero da 4000×3000 a una viewport mobile. Usa srcset con risoluzioni multiple.

5. Hosta i font in proprio o usa font-display: swap. Un webfont che blocca il rendering ritarda l’elemento titolo-come-LCP.

6. Togli l’immagine LCP dal lazy-loading. Se la tua libreria di immagini fa lazy-load di tutto, l’hero deve esplicitamente uscire (loading="eager", fetchpriority="high").

Domande frequenti

Il mio elemento LCP è del testo, non un’immagine. Cosa cambia?

Sei già in buona forma: il testo si renderizza in fretta. Il fix di solito riguarda le risorse che bloccano il rendering: rinvia il JS non critico, inlinea il CSS critico, elimina i webfont che bloccano il rendering.

Perché il mio LCP è diverso in PageSpeed rispetto al mio browser?

PageSpeed simula una connessione 4G lenta su un dispositivo Android medio. Il tuo computer di sviluppo è in fibra. Fidati sempre dei dati di campo (CrUX), non dei tuoi DevTools locali.

Un CDN aiuta con l’LCP?

Sì: un CDN riduce il round-trip verso il server di origine, che taglia direttamente il tempo necessario a iniziare il download dell’immagine. Cloudflare, Bunny e Fastly sono scelte comuni.