Largest Contentful Paint (LCP): guida tecnica completa e standard di ottimizzazione

Largest Contentful Paint (LCP) è una delle tre metriche Core Web Vitals di Google, stabilita per misurare la velocità di caricamento della pagina percepita.LCP tiene traccia del tempo trascorso da quando un utente inizia a caricare una pagina Web fino a quando l'immagine più grande, il fotogramma del poster video o il blocco di testo all'interno del viewport visibile iniziale viene completamente dipinto sullo schermo.

Poiché gli utenti giudicano la velocità della pagina web in base alla velocità con cui il contenuto principale diventa visibile e leggibile, LCP è ampiamente considerato il parametro di prestazione di caricamento più importante.Di conseguenza, Google incorpora LCP nei segnali di ranking dell'esperienza di pagina ufficiale per la ricerca organica.

Riepilogo della prima risposta

Largest Contentful Paint (LCP) è una metrica Core Web Vital che misura la velocità di caricamento della pagina percepita cronometrando il momento in cui termina il rendering del blocco di testo o dell'elemento immagine visibile più grande nel viewport.Un punteggio LCP positivo è pari o inferiore a 2,5 secondi per almeno il 75% delle visite di pagina nei dati sul campo dell'utente reale (CrUX).La latenza LCP è composta da quattro sottoparti distinte: Time to First Byte (TTFB), Ritardo caricamento risorse, Durata caricamento risorse e Ritardo rendering elemento.L'ottimizzazione di LCP richiede il precaricamento delle risorse hero, l'implementazione della cache edge, la compressione delle immagini nei formati WebP/AVIF e l'eliminazione di CSS e JavaScript che bloccano il rendering.

Scala di valutazione del punteggio LCP e soglie dei parametri vitali del Web centrale

Per offrire agli utenti un'esperienza rapida e coinvolgente, le pagine web devono soddisfare le soglie Core Web Vitals stabilite da Google per il Largest Contentful Paint:

Tempo di rendering LCP	Valutazione delle prestazioni	Impatto sugli utenti e segnale di posizionamento nella ricerca Google
$\le 2.5\testo{ secondi}$	Buono (Verde)	Caricamento percepito velocemente;soddisfa pienamente la valutazione Core Web Vitals di Google.
$> 2.5\text {s} $ e $\le 4.0\text {s} $	Ha bisogno di miglioramenti (Ambra)	Notevole ritardo nel caricamento;potenziale calo dei tassi di conversione mobile e del ranking di ricerca.
$> 4.0\testo{secondi}$	Povero (Rosso)	Grave ritardo nel caricamento visivo;elevate frequenze di rimbalzo degli utenti e penalità nel ranking di ricerca.

Per ottenere un voto positivo per la valutazione Core Web Vitals, un sito web deve ottenere un punteggio LCP nella categoria Buono ($\le 2,5\text{ secondi}$) per almeno il 75% delle visite alle pagine, valutato su coorti di desktop e dispositivi mobili in dati sul campo reali.

Quali elementi DOM sono idonei per la valutazione LCP?

Secondo la specifica ufficiale W3C Largest Contentful Paint, il browser monitora specifici elementi DOM visibili situati all'interno del viewport iniziale:

Elementi <img> standard (incluse le immagini visualizzate all'interno dei tag <picture> reattivi).
Elementi <image> incorporati in un contenitore vettoriale <svg>.
Immagini poster video (l'attributo poster su un elemento <video>).
Elementi con un'immagine di sfondo CSS caricata tramite la funzione url().
Contenitori HTML a livello di blocco contenenti nodi di testo o elementi secondari di testo in linea (come intestazioni da <h1> a <h6>, paragrafi <p> o blocchi <div>).

Decostruire LCP: le quattro sottoparti

Per diagnosticare e ottimizzare in modo efficace i punteggi lenti di Largest Contentful Paint, gli ingegneri delle prestazioni suddividono la latenza LCP in quattro sottoparti distinte:

Time to First Byte (TTFB): il tempo trascorso da quando l'utente richiede la pagina fino a quando il browser riceve il primo byte della risposta del documento HTML dal server.Obiettivo: $< 800\text {ms} $ ($40%$ del budget LCP).
Ritardo caricamento risorsa: il ritardo tra il momento in cui il documento HTML termina di ricevere i byte di risposta e il momento in cui il browser rileva e inizia a recuperare la risorsa LCP (come un'immagine hero).Obiettivo: $< 200\text {ms} $ ($ 10%$ del budget LCP).
Durata caricamento risorsa: la durata richiesta dal browser per scaricare l'immagine LCP o la risorsa carattere attraverso la rete.Obiettivo: $< 800\text {ms} $ ($40%$ del budget LCP).
Ritardo rendering elemento: il tempo che intercorre tra il completamento del download della risorsa LCP e il momento in cui il browser completa i calcoli del layout e disegna l'elemento sullo schermo.Obiettivo: $< 200\text {ms} $ ($ 10%$ del budget LCP).

Matematicamente, la latenza totale dell'LCP è la somma di queste quattro sottoparti:

$$\text {LCP} = \text {TTFB} + \text{Ritardo caricamento risorsa} + \text{Durata caricamento risorsa} + \text{Ritardo rendering elemento}$$

Tecniche comprovate per ottimizzare LCP

Elimina il ritardo nel caricamento delle risorse: aggiungi <link rel="preload" as="image" href="..."> o fetchpriority="high" al tag dell'immagine hero in modo che il browser avvii immediatamente il download dell'immagine durante l'analisi HTML.
Ottimizza la risposta del server (TTFB): distribuisci la cache edge tramite CDN, ottimizza le prestazioni delle query del database e utilizza il multiplexing push del server HTTP/2 o HTTP/3.
Comprimi e modernizza immagini: offri immagini hero utilizzando i moderni formati WebP o AVIF con dimensioni srcset reattive personalizzate per le dimensioni dello schermo di dispositivi mobili e desktop.
Riduci le risorse di blocco del rendering: incorpora CSS critici nel tag <head> e rinvia JavaScript non critico utilizzando gli attributi di script defer o async.
Ottimizza il caricamento dei caratteri Web: utilizza le regole font-display: swap o font-display: optional nelle regole CSS @font-face per garantire che i blocchi di testo rimangano immediatamente visibili mentre i caratteri Web terminano il download sulla rete.

LCP vs First Contentful Paint (FCP) vs Indice di velocità

Sebbene LCP, FCP e Speed Index misurino tutti le prestazioni di caricamento, catturano diversi aspetti della progressione del caricamento della pagina:

First Contentful Paint (FCP): misura quando il primissimo elemento DOM (come un colore di sfondo, una casella di selezione o un testo di intestazione) termina il rendering sullo schermo.
Largest Contentful Paint (LCP): misura quando l'elemento di contenuto visivo principale (banner eroe o blocco del paragrafo principale) completa il rendering.
Indice di velocità: misura la velocità con cui il contenuto visivo riempie l'area visibile nel tempo durante la registrazione dell'avanzamento visivo.

A LCP viene assegnato il peso più alto tra le metriche di caricamento nell'algoritmo di punteggio Lighthouse di Google (attualmente il 25% del punteggio di prestazione totale) perché si allinea più da vicino con la percezione dell'utente reale del completamento del caricamento della pagina.

Monitoraggio LCP continuo con SimpleOps

SimpleOps automatizza il monitoraggio di Largest Contentful Paint acquisendo audit sintetici di laboratorio Lighthouse e metriche del set di dati sul campo Chrome UX Report (CrUX) in un'unica dashboard di monitoraggio unificata.SimpleOps invia avvisi proattivi istantanei ogni volta che l'LCP del 75° percentile del tuo sito supera il budget prestazionale di 2,5 secondi, consentendo al tuo team di proteggere le conversioni e il posizionamento nelle ricerche.