Cos'è il Largest Contentful Paint (LCP)?

Il Largest Contentful Paint misura il tempo necessario perché il più grande elemento di contenuto visibile sopra la piega finisca di essere renderizzato. Negli storefront di commerce si tratta quasi sempre dell'immagine hero, di una foto di prodotto su una PDP o del titolo di una landing-page. L'LCP è la più citata tra le Core Web Vitals perché catturà il momento percepito in cui una pagina sembra "pronta".

Definizione

L'LCP registra il tempo di rendering della più grande immagine, poster video o blocco di testo all'interno del viewport al primo paint. Il valore proviene dall'API browser LargestContentfulPaint, riportato al 75° percentile tramite il Chrome User Experience Report. Google considera buoni i valori fino a 2,5 secondi, da migliorare fino a 4 secondi, e scarsi quelli superiori. L'LCP è influenzato dal Time to First Byte dall'origine di rendering, dalla dimensione e priorità della risorsa LCP, da CSS o JS che bloccano il rendering nel percorso critico, e dall'hydration lato client che ritarda il paint quando i framework vengono distribuiti come first-party-JS.

Perché è importante

L'LCP è strettamente correlato alla conversione. Un ritardo di un secondo su una PDP fa scendere in modo misurabile i tassi di add-to-cart e riduce il fatturato per sessione, specialmente su mobile. Poiché gli asset hero dominano la metrica, l'image-optimization e il fetch prioritario diventano interventi ad alto impatto. L'LCP mette anche in luce scelte architetturali: un'API di commerce upstream lenta, un'origine sotto-dimensionata o un bundle React sovradimensionato emergono tutti come regressioni dell'LCP. Come parte del segnale di page-experience, alimenta il search-engine-optimization-seo e si interseca con il lavoro di conversion-rate-optimization-cro.

Casi d'uso

I team headless su Next.js o Astro affrontano tipicamente l'LCP precaricando l'immagine hero, servendo AVIF o WebP da una content-delivery-network-cdn e renderizzando il markup sopra la piega tramite SSR o Edge Rendering su Vercel Edge o Cloudflare Workers. L'ISR viene usato per mantenere calde le PDP e le pagine di categoria così che la risorsa LCP venga servita dalla cache. I team adottano anche fetchpriority="high" sull'immagine LCP, differiscono il first-party-JS non critico e riducono i tag di terze parti caricati tramite il tag manager del content-management-system-cms. Le dashboard LCP segmentate per template e dispositivo guidano le decisioni di release e i business case di headless replatforming.

Correlati

Esplora Performance and Core Web Vitals · Composable Headless Frontend.