LCP (Largest Contentful Paint)

LCP (Largest Contentful Paint) è una metrica [Core Web Vital](/glossary/core-web-vitals) che misura il tempo dall'inizio del caricamento di una pagina fino al completamento del rendering dell'elemento di contenuto visibile più grande nel [viewport](/glossary/viewport). Questo elemento è tipicamente un'immagine hero, un grande blocco di testo, un poster video o un'immagine di sfondo. Google definisce tre fasce di prestazione: **buono** (2,5 secondi o meno), **da migliorare** (da 2,5 a 4,0 secondi) e **scarso** (oltre 4,0 secondi). L'LCP viene misurato al 75° percentile dei caricamenti pagina, il che significa che il punteggio riflette l'esperienza della maggior parte degli utenti reali, non solo delle connessioni più veloci.

L'LCP è l'indicatore più importante della velocità di caricamento percepita. Mentre altre metriche misurano la prontezza tecnica o la stabilità visiva, l'LCP cattura il momento in cui un visitatore vede il contenuto principale — il momento in cui decide che la pagina si è "caricata". Un LCP lento fa sì che i visitatori fissino una pagina incompleta, aumentando il tasso di rimbalzo e riducendo l'engagement. Google utilizza l'LCP come segnale di ranking nel suo algoritmo di ricerca, il che significa che un punteggio scarso non danneggia solo l'esperienza utente — riduce direttamente la visibilità organica. Per gli editori che dipendono dal traffico di ricerca, ottimizzare l'LCP può fare la differenza tra apparire nella prima pagina ed essere sepolti.

FlipLink ottimizza l'LCP sia per il sito marketing che per i [flipbook](/glossary/flipbook) pubblicati. Il visualizzatore del flipbook prioritizza il rendering della copertina e della prima doppia pagina, assicurando che l'elemento di contenuto visibile più grande appaia prima del caricamento degli asset più pesanti. La [schermata di caricamento personalizzata](/features/custom-loading-screen) fornisce feedback visivo immediato — un segnaposto brandizzato che appare in meno di un secondo — mentre le risorse di rendering [Three.js](/glossary/three-js) si inizializzano in background. Il motore [esperienza e layout pagina](/features/page-experience-and-layout) di FlipLink applica compressione ottimizzata delle immagini, dimensionamento responsive e rendering progressivo per mantenere l'LCP entro la soglia di 2,5 secondi raccomandata da Google sia su desktop che su mobile. Quando i flipbook vengono [incorporati](/glossary/embed) su siti esterni, il [lazy loading](/glossary/lazy-loading) assicura che l'embed non competa con l'elemento LCP della pagina host.

Comprendere l'LCP richiede contesto insieme alle metriche di prestazione correlate: - **LCP buono**: 2,5 secondi o meno. La pagina sembra istantanea. La maggior parte degli utenti vede il contenuto prima di considerare l'uscita. - **Da migliorare**: da 2,5 a 4,0 secondi. Gli utenti notano un ritardo. I tassi di rimbalzo iniziano a salire. - **LCP scarso**: oltre 4,0 secondi. I visitatori probabilmente abbandonano la pagina prima che il contenuto principale appaia. L'elemento LCP cambia a seconda della pagina. Su una pagina prodotto, è solitamente l'immagine del prodotto. Su un articolo blog, potrebbe essere il banner hero o il primo paragrafo di testo. Su una pagina flipbook, è l'immagine di copertina. Identificare quale elemento costituisce l'LCP su ogni pagina è il primo passo verso l'ottimizzazione.

La misurazione dell'LCP segue regole specifiche definite dal Web Performance Working Group. L'elemento più grande viene determinato dalla sua dimensione visibile nel viewport, non dalla dimensione del file. Gli elementi considerati per l'LCP includono elementi `<img>`, `<image>` all'interno di SVG, immagini poster dei video, elementi con `background-image` caricata via CSS e elementi a livello di blocco contenenti testo. Gli elementi che si estendono oltre il viewport vengono misurati solo per la loro porzione visibile. Le cause comuni di LCP lento includono immagini non ottimizzate (servire una foto da 4MB quando basterebbe un WebP da 200KB), CSS e JavaScript che bloccano il rendering, tempi di risposta del server lenti ([TTFB](/glossary/core-web-vitals) superiore a 800ms) e rendering lato client che richiede l'esecuzione di JavaScript prima che appaia qualsiasi contenuto. Le ottimizzazioni pratiche includono: precaricamento dell'immagine LCP con `<link rel="preload">`, utilizzo di formati immagine moderni (WebP, AVIF), utilizzo di CDN per gli asset statici, CSS critico inline, defer del JavaScript non essenziale e impostazione esplicita di `width` e `height` sulle immagini per prevenire spostamenti di layout che possono ritardare l'LCP.

LCP e [FCP](/glossary/core-web-vitals) (First Contentful Paint) sono entrambe metriche temporali, ma misurano momenti diversi. FCP si attiva quando il browser esegue il rendering del primo contenuto DOM — anche se è solo una barra di navigazione, uno spinner di caricamento o una singola riga di testo. LCP si attiva quando l'elemento di contenuto più grande viene renderizzato. In pratica, FCP spesso si attiva uno o due secondi prima di LCP. Una pagina può avere un FCP veloce ma un LCP lento se l'header e la navigazione si caricano rapidamente mentre l'immagine hero impiega diversi secondi per apparire. Per l'esperienza utente, LCP è la metrica più significativa perché riflette quando la pagina sembra completa al visitatore. FCP è utile per diagnosticare se il browser ha iniziato a renderizzare, ma è l'LCP che determina se l'utente resta o se ne va.

L'LCP misura il momento in cui la tua pagina sembra caricata per i visitatori reali. Mantienilo sotto i 2,5 secondi ottimizzando le immagini, minimizzando le risorse che bloccano il rendering e prioritizzando i contenuti above-the-fold — i tuoi ranking di ricerca e l'engagement degli utenti ne dipendono.