Largest Contentful paint (LCP): cos’è e come migliorarlo per la SEO

LCP: cos’è quanto conta per l’esperienza utente e perché è importante ottimizzarlo?

Largest Contentful Paint: cos’è e a cosa serve

Largest Contentful Paint (LCP) è una delle tre metriche dei Core Web Vitals di Google e valuta un aspetto particolare dell’esperienza utente sulla pagina:

LCP rileva il tempo che la pagina web impiega per caricare l’elemento visibile più grande nell’area di visualizzazione.

LCP cattura i primi attimi dell’esperienza che l’utente vive sulla pagina e valuta la velocità di caricamento del contenuto principale della pagina:  per esempio un blocco di testo o un’immagine.

In altre parole,

Largest Contentful Paint calcola il tempo che intercorre tra l’inizio del caricamento di una pagina da parte del browser e la comparsa sullo schermo del contenuto più largo dell’area visibile.

Perché è importante ottimizzare LCP

Insieme agli atri due parametri dei Core Web Vitals  (INP e CLS) anche Largest Contentful Paint contribuisce a fornire un resoconto della capacità complessiva della pagina di offrire un’esperienza soddisfacente alle persone.

Esattamente come le altre due metriche, LCP mostra punteggio e valutazione:

• buono
• scadente
• da migliorare

Siti web e blog dovrebbero offrire una buona performance completando il rendering del contenuto visivo più grande della pagina in meno di 2,5 secondi per almeno per il 75 per cento dei caricamenti di pagina, tra dispositivi mobili e desktop.

LCP: i valori ottimali

Avere buoni valori LCP è molto importante per l’ottimizzazione del sito web e per migliorare il ranking.

• Un valore LCP basso (inferiore o pari a 2,5 secondi) mostra che la pagina web offre una buona esperienza perché l’elemento grafico più grande si carica rapidamente;
• un LCP tra i 2,5 secondi e i 4 secondi segnala la necessità di migliorare le prestazioni di caricamento;
• Se il punteggio LCP è elevato (superiore ai 4 secondi) c’è qualche problema che è bene risolvere.

Come monitorare LCP

Esattamente come per gli altri elementi essenziali e per alcune altre metriche relative all’esperienza sulle pagine di Google, è possibile effettuare un’analisi con strumenti gratuiti:

• PageSpeed Insights
• Report sull’esperienza utente di Chrome
• Search Console (report Velocità)

PageSpeed Insights permette di testare Largest Contentful Paint sulla base di dati reali provenienti dal report Chrome UX.

Differenza tra LCP e FCP

Largest contentful paint vs First contentful paint: perché questo confronto?

FCP non è fra i Core Web Vitals, ma è comunque una metrica importante relativa all’esperienza dell’utente legata alla rapidità di visualizzazione dei contenuti.

Mentre LCP misura il tempo di caricamento del contenuto più grande della pagina, FCP rileva il momento in cui l’utente è in grado di vedere qualsiasi elemento sullo schermo: testo, immagini, elementi SVG.

First Contentful Paint (FCP) è una metrica monitorata nella sezione Rendimento del report di Lighthouse ed è anche in Page speed Insight.

Perché LCP è più utile di FCP

LCP è nei Core Web Vitals perché è un indicatore più utile di FCP per misurare l’esperienza utente nella fase iniziale.

Se la pagina fosse in grado di eseguire rapidamente il primo contenuto (qualsiasi contenuto, anche non rilevante) restituirebbe un buon valore FCP (un valore basso). Ma a caricarsi rapidamente potrebbe essere anche un’immagine di minime dimensioni probabilmente poco importante per la resa complessiva della pagina. Ecco quindi che FCP potrebbe risultare fuorviante nel fotografarne le prestazioni.

Al contrario

LCP valuta la rapidità di caricamento del contenuto più grande, presumibilmente quindi un elemento importante per la riuscita globale della pagina.

Cause probabili di un LCP scadente

l punteggio LCP è spesso influenzato negativamente dal tempo necessario al server per rispondere, ma non è l’unico fattore in gioco.

Alcune delle cause più comuni di un valore LCP alto (elevato tempo di attesa per il caricamento del contenuto più grande della pagina) sono:

• Server lento (tempi di risposta troppo lunghi)
• Javascript e CSS che bloccano il rendering
• Tempi di caricamento delle risorse
• Rendering lato client

Server lento

Quando il server impiega troppo tempo per rispondere, il contenuto più grande della schermata viene mostrato in ritardo. Questo può influire negativamente su tutte le metriche della pagina che rilevano i tempi di caricamento.

I problemi di ritardo del server sono sostanzialmente riconducibili a questa problematica: prima che un utente possa vedere il contenuto principale, il browser deve ricevere risposta dal server.

Il tempo di “andata e ritorno” (RTT, round trip time) e il TTFB (time to first byte, il tempo necessario al browser per ricevere il primo byte di risposta dal server) sono fattori chiave per la velocità di caricamento. Secondo le linee guida di Google, il TTFB dovrebbe rappresentare circa il 40% del tempo totale di LCP su una pagina ben ottimizzata: se pesa di più, è un buon indizio che il problema nasce proprio qui.

Come intervenire:

• Scegli un hosting affidabile e performante come Siteground, possibilmente con server vicini geograficamente al pubblico di riferimento.
• Usa una CDN per servire l’HTML e le risorse statiche dai nodi più vicini all’utente, riducendo la distanza (e quindi la latenza) da percorrere.
• Attiva una cache lato server (full-page caching) così le pagine non vengono rigenerate ad ogni richiesta.
• Riduci al minimo i redirect: ogni redirect aggiunge un round trip completo prima che il browser riceva il primo byte utile.
• Evita, dove possibile, URL con parametri unici (es. per tracciamenti) che impediscono alla CDN di servire una versione già in cache della pagina.

Ritardo nel caricamento della risorsa LCP (resource load delay)

Anche se il server risponde velocemente, l’immagine o il testo che costituiscono l’elemento LCP potrebbero iniziare a caricarsi troppo tardi. Questo accade quando il browser non riesce a “scoprire” la risorsa leggendo semplicemente l’HTML iniziale.

Le cause più comuni:

• L’immagine LCP viene inserita dinamicamente via JavaScript, invece di essere presente nel markup HTML iniziale.
• L’immagine è gestita con lazy loading (attributo loading="lazy"): da evitare sempre sull’elemento LCP, perché ne ritarda inevitabilmente il caricamento.
• L’immagine LCP è impostata come sfondo CSS (background-image) anziché come tag <img>, per cui il browser deve prima scaricare ed elaborare il foglio di stile per scoprirla.

Come intervenire:

• Assicurati che l’immagine LCP sia un tag <img> con src (o srcset) già presente nell’HTML, non generata via JavaScript.
• Non applicare mai loading="lazy" all’immagine che rappresenta l’elemento LCP (in genere l’immagine hero above the fold).
• Usa l’attributo fetchpriority="high" sull’immagine LCP per segnalare al browser di scaricarla con priorità massima.
• Se la risorsa LCP è referenziata solo da CSS o JS esterni, usa un preload dedicato:

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

• Se possibile, ospita l’immagine LCP sullo stesso dominio dell’HTML: le richieste verso domini esterni (es. CDN di terze parti) richiedono una connessione aggiuntiva che aggiunge ritardo.

JavaScript e CSS con blocco del rendering (element render delay)

Alcuni elementi come script e fogli di stile possono bloccare il processo di visualizzazione di una pagina HTML e causare un ritardo nella comparsa del contenuto LCP, anche quando la risorsa (immagine o font) ha già finito di scaricarsi.

Le cause più comuni:

• CSS troppo pesante che impiega più tempo a caricarsi della stessa immagine LCP.
• Script sincroni (senza async o defer) inseriti nell’<head> della pagina.
• L’elemento LCP non viene aggiunto al DOM finché non termina l’esecuzione di JavaScript (tipico dei siti fortemente basati su rendering lato client).
• Long task che occupano il thread principale del browser, impedendo il rendering anche a risorsa già stata scaricata.

Come intervenire:

• Rimuovi il CSS inutilizzato e riduci le dimensioni del foglio di stile critico.
• Separa il CSS critico (quello necessario per il rendering iniziale above the fold) da quello non critico, caricando quest’ultimo in modo differito.
• Comprimi e minifica CSS e JS.
• Aggiungi defer o async agli script non essenziali per il primo rendering, così non bloccano il parsing dell’HTML.
• Inserisci solo script davvero piccoli in modo inline nell’<head>; per tutto il resto, caricali in modo asincrono.
• Suddividi i task JavaScript lunghi (code splitting) per liberare periodicamente il thread principale.
• Dove possibile, preferisci il rendering lato server (SSR) o la pre-generazione statica (SSG/prerendering) al rendering lato client: il contenuto è già presente nell’HTML, quindi scopribile e visualizzabile molto prima.

Tempi lunghi di caricamento della risorsa LCP (resource load duration)

Una volta che il browser ha iniziato a scaricare la risorsa LCP, il tempo necessario per completarne il download incide direttamente sul punteggio finale. Le immagini, in particolare, richiedono spesso più tempo per essere caricate rispetto al testo, ed è per questo che una hero image above the fold mal ottimizzata è tra le cause più frequenti di LCP scadente.

Come migliorare questo aspetto:

• Comprimi le immagini e usa formati moderni come WebP o AVIF, molto più leggeri rispetto a JPEG/PNG a parità di qualità visiva.
• Usa srcset e sizes per servire immagini della dimensione realmente necessaria in base al dispositivo: caricare un’immagine da 1920px su uno smartphone da 390px è solo banda sprecata.
• Comprimi i font e valuta l’uso della proprietà font-display (ad esempio swap) per evitare che il testo resti invisibile in attesa del caricamento di un font personalizzato.
• Imposta una cache-control efficiente e a lungo termine sulle risorse statiche: alle visite successive, la risorsa LCP verrà servita dalla cache locale con un tempo di caricamento pressoché nullo.
• Riduci la contesa di banda: se troppe risorse vengono caricate in parallelo con priorità alta, la risorsa LCP fatica a ottenere la banda che le serve. Riserva fetchpriority="high" solo alla vera immagine LCP, non a più elementi contemporaneamente.
• Valuta l’uso di un’image CDN, che riduce automaticamente peso e distanza della risorsa.

Un consiglio pratico

Le quattro cause descritte non vanno affrontate isolatamente: ridurre il peso dell’immagine LCP, ad esempio, non migliora l’LCP se il tempo risparmiato viene semplicemente “spostato” su un ritardo di rendering causato da JavaScript bloccante.

Per un miglioramento reale è necessario intervenire sull’intero percorso di caricamento: dal server, alla scoperta della risorsa, fino al momento effettivo del rendering.

Il tuo sito offre una buona esperienza utente? Vuoi ottimizzarlo per Google?

chiedi ai nostri esperti