Guide

LCP, abbreviazione di Largest Contentful Paint, e una delle metriche Core Web Vitals di Google, gli indicatori con cui Google valuta l'esperienza reale di una pagina. Misura le prestazioni di caricamento: il tempo che intercorre dall'inizio del caricamento della pagina fino al rendering dell'elemento di contenuto piu grande visibile nel viewport. In parole semplici, e il momento in cui il tuo contenuto principale compare effettivamente sullo schermo.

L'elemento a cui guarda LCP e quello piu grande presente nel viewport iniziale mentre la pagina si carica. Nella maggior parte dei casi si tratta dell'immagine hero, di un grande blocco di testo, del fotogramma di anteprima di un video o di una grande immagine di sfondo. Google misura quando quel preciso elemento termina di essere disegnato, perche e il punto in cui la pagina appare caricata a una persona reale, anziche vuota o disegnata a meta.

Le soglie di Google sono chiare. Un LCP di 2,5 secondi o meno e Buono, tra 2,5 e 4 secondi Da migliorare, e oltre 4 secondi e Scarso. Come le altre metriche Core Web Vitals, LCP viene valutato sui field data al 75o percentile dei caricamenti reali di pagina, cosi da riflettere cio che la maggior parte dei tuoi visitatori sperimenta davvero, e non una singola prova di laboratorio su una connessione veloce.

LCP conta perche rispecchia da vicino quanto rapidamente una pagina risulta utilizzabile. Un LCP lento significa che i visitatori fissano uno schermo vuoto o incompleto mentre il contenuto principale arriva lentamente, e questo fa scappare le persone. Fa inoltre parte delle Core Web Vitals che alimentano i segnali di page experience di Google, quindi un LCP scarso puo penalizzare sia gli utenti sia il posizionamento.

Aiuta vedere LCP come quattro parti impilate una dopo l'altra: time to first byte (quanto in fretta risponde il server), ritardo di caricamento della risorsa (quanto tempo passa prima che il browser inizi persino a recuperare l'elemento LCP), tempo di caricamento della risorsa (quanto impiega quell'elemento a scaricarsi) e ritardo di rendering dell'elemento (quanto tempo passa prima che venga effettivamente disegnato). Un LCP lento e quasi sempre dovuto a una o due di queste parti che dominano, percio risolverlo comincia con l'individuare quale parte e il problema.

Il primo segmento, il time to first byte, riguarda il tuo server e la consegna dei contenuti. Un host lento o distante aggiunge ritardo prima che qualsiasi cosa possa caricarsi, percio un host veloce e ben posizionato e una CDN che serve i contenuti da vicino ai tuoi visitatori riducono direttamente questa parte. E la correzione meno appariscente ma spesso la piu incisiva, perche ogni millisecondo qui ritarda tutto cio che viene dopo.

L'elemento LCP stesso, di solito un'immagine, e la leva importante successiva. Servilo in un formato moderno come WebP o AVIF, dimensionalo correttamente per il layout invece di spedire un enorme originale, e comunica al browser che e importante con preload o una fetch priority alta cosi da iniziare a scaricarlo presto. Un errore molto comune e il lazy-loading dell'immagine hero: il lazy-loading e ottimo per le immagini sotto la piega, ma applicarlo all'elemento LCP ritarda esattamente cio su cui vieni misurato.

Le risorse render-blocking sono l'ultimo colpevole frequente. File CSS e JavaScript bloccanti e di grandi dimensioni costringono il browser ad attendere prima di poter disegnare qualsiasi cosa, incluso il tuo elemento piu grande. Eliminare il CSS inutilizzato, rinviare il JavaScript non critico e inserire inline solo gli stili critici permette al browser di arrivare prima al momento del disegno.

Per migliorare un punteggio LCP nella pratica: misuralo con uno strumento a field data per vedere il numero reale al 75o percentile, individua quale delle quattro parti e la piu grande, poi aggredisci quella parte - un host o una CDN piu veloci per un server lento, ottimizzazione delle immagini e preload per una risorsa lenta, e meno codice render-blocking per un disegno lento. Rimisura con dati reali, perche un punteggio di laboratorio su una macchina veloce puo sembrare buono mentre gli utenti reali su connessioni piu lente faticano.

In conclusione: Largest Contentful Paint misura quando il tuo contenuto principale diventa visibile, e Google lo vuole a 2,5 secondi o meno. Arrivaci servendo rapidamente da un buon host e una CDN, ottimizzando e dando priorita all'elemento piu grande invece di applicargli il lazy-loading, e togliendo di mezzo il codice render-blocking. Fai questo e la pagina non solo ottiene un punteggio migliore - risulta genuinamente piu veloce alle persone che la usano.