Cos'è il Largest Contentful Paint
LCP è una metrica chiave dei Core Web Vitals che Google usa come segnale di posizionamento dal 2021. Misura il tempo dall'avvio del caricamento fino al rendering completo dell'elemento visibile più grande nel viewport dell'utente.
LCP riflette la velocità percepita: quando il contenuto principale compare in fretta, l'utente vive la pagina come rapida, anche se il caricamento non è del tutto finito.
Soglie LCP
| Valutazione | Tempo LCP | Azione |
|---|---|---|
| Buono | ≤ 2,5 s | Mantieni: evita regressioni agli update |
| Da migliorare | 2,5–4 s | Dai priorità al caricamento dell'elemento hero |
| Scadente | > 4 s | Critico: serve ottimizzazione completa di immagini, TTFB e rendering |
Quali elementi contano come LCP
- Immagini —
<img>e<image>dentro SVG - Immagini di sfondo CSS — via
background-image: url(...) - Video — con attributo
poster: il browser usa il fotogramma di anteprima - Blocchi di testo — se sono l'elemento più grande del viewport:
<p>,<h1>,<div>con testo
Come migliorare l'LCP
Usa WebP/AVIF, aggiungi fetchpriority="high" all'elemento LCP, rimuovi loading="lazy" dalle immagini above-the-fold.
Ottimizza il tempo di risposta del server, attiva una CDN, configura la cache. Un TTFB oltre 800 ms rende quasi impossibile un buon LCP.
Sposta CSS e JS non critici in fondo, oppure usa defer / async. Inlinea il CSS critico direttamente in <head>.
Aggiungi <link rel="preload" as="image"> per un'immagine LCP, o <link rel="preload" as="font"> se l'LCP è un elemento testuale in un font personalizzato.