L'LCP misura il tempo fino al caricamento del contenuto principale. Il contenuto principale è il blocco di testo o l'immagine più grande della pagina. Per la maggior parte delle pagine l'LCP è la metrica critica, perché decide quando la pagina diventa utile per l'utente.
L'utente arriva sulla pagina. La pagina inizia a caricarsi. Il browser scarica l'HTML. Il browser scarica il CSS. Il browser scarica il JavaScript. L'HTML viene mostrato. Il CSS applica gli stili. Il JavaScript viene eseguito. Compare il contenuto principale. Questo è l'LCP.
Un LCP di un secondo è eccellente. L'utente vede subito il contenuto. Un LCP di tre secondi è lento. L'utente aspetta. Un LCP di cinque secondi è molto lento. L'utente se ne va.
Cosa conta come Largest Contentful Paint
L'elemento più grande della pagina nella parte visibile senza scorrere. Di solito un'immagine o un titolo. Esempio: una home page con immagine principale. L'immagine principale è l'elemento più grande. Il momento in cui compare è l'LCP.
Esempio: un articolo di blog con un titolo. Il titolo è l'elemento più grande. Il momento in cui compare è l'LCP.
Esempio: una pagina prodotto con l'immagine del prodotto. L'immagine del prodotto è l'elemento più grande. Il momento in cui compare è l'LCP.
L'LCP si misura da quando l'utente clicca il link (inizio del caricamento della pagina) a quando compare l'elemento più grande. Include il tempo per scaricare HTML, CSS e JavaScript, scaricare l'immagine e mostrare la pagina.
Ottimizzare l'LCP
Obiettivo di ottimizzazione: LCP sotto i due virgola cinque secondi.
Strategia uno: ottimizza il tempo di risposta del server (TTFB). Un server più veloce fa arrivare l'HTML prima. L'arrivo dell'HTML è un prerequisito per mostrare la pagina. Riduci il TTFB migliorando il server, usando una CDN, riducendo le query al database.
Strategia due: riduci la dimensione del file CSS. Un CSS più piccolo si scarica più in fretta. Il CSS deve essere scaricato prima che la pagina venga mostrata. Riduci il CSS togliendo gli stili inutilizzati, minificandolo, rimandando il CSS non critico.
Strategia tre: riduci la dimensione del file JavaScript. Un JavaScript pesante ritarda l'esecuzione e la visualizzazione. Riduci il JavaScript togliendo il codice inutilizzato, dividendo i file grandi, rimandando il JavaScript non critico.
Strategia quattro: ottimizza le immagini. Spesso le immagini sono gli elementi più grandi (LCP). Riduci il peso delle immagini comprimendole, usando formati moderni (WebP), riducendone le dimensioni.
Strategia cinque: precarica le risorse critiche. Di' al browser di scaricare presto l'immagine o il font critico. L'immagine si scarica in parallelo con HTML e CSS. L'LCP si riduce.
Esempio reale: ottimizzare l'LCP di un articolo di blog
LCP di partenza: due virgola otto secondi.
Analisi: l'immagine principale dell'articolo è l'elemento più grande. L'immagine pesa due megabyte. Ci vogliono uno virgola due secondi per scaricarla. Il download dell'immagine è il collo di bottiglia.
Ottimizzazione
Comprimi l'immagine: da due megabyte a zero virgola cinque megabyte. Il tempo di download ora è zero virgola tre secondi.
Converti in formato WebP: riduci ancora, fino a zero virgola tre megabyte. Il tempo di download ora è zero virgola uno secondi.
Precarica l'immagine: di' al browser di scaricarla presto. L'immagine si scarica in parallelo con l'HTML. Si risparmiano zero virgola due secondi.
Sposta il CSS critico nella parte visibile senza scorrere: riduci il tempo prima che la pagina possa essere mostrata. Si risparmiano zero virgola tre secondi.
Nuovo LCP: uno virgola sette secondi.
Due virgola otto meno uno virgola due (download dell'immagine) più zero virgola uno (download dell'immagine compressa) fa uno virgola sette secondi. Sotto l'obiettivo di due virgola cinque.
LCP e tipi di pagina diversi
Home page
Di solito l'LCP è l'immagine principale. Ottimizza comprimendo l'immagine, usando una CDN, precaricando.
Articolo di blog
L'LCP è il titolo o la prima immagine. Ottimizza riducendo il ritardo di CSS e JavaScript, precaricando i font.
Pagina prodotto
L'LCP è l'immagine del prodotto. Ottimizza comprimendo l'immagine e usando immagini adattive per i diversi dispositivi.
Pagina di pagamento
L'LCP è il modulo o il pulsante. Ottimizza riducendo CSS e JavaScript, precaricando le risorse critiche.
Tipi di pagina diversi hanno strategie di ottimizzazione diverse. Scopri qual è il tuo elemento LCP. Ottimizza quell'elemento.
LCP su mobile e su desktop
Di solito l'LCP su mobile è più lento di quello su desktop. La rete mobile è più lenta. I dispositivi mobili hanno meno potenza di calcolo.
LCP di partenza su desktop: uno virgola cinque secondi. LCP di partenza su mobile: tre secondi.
Il mobile è due volte più lento. Gli utenti mobili sentono la lentezza di più.
Ottimizza prima il mobile. Concentrati sul ridurre il peso delle immagini (la banda mobile è limitata). Riduci il JavaScript (i dispositivi mobili lo elaborano più lentamente). Usa formati adatti al mobile.
Misurare il miglioramento dell'LCP
LCP di partenza
Misura prima dell'ottimizzazione.
Applica l'ottimizzazione
Nuovo LCP
Misura dopo l'ottimizzazione.
Miglioramento
LCP di partenza meno nuovo LCP.
Esempio
Di partenza due virgola otto secondi. Dopo l'ottimizzazione uno virgola sette secondi. Il miglioramento è di uno virgola uno secondi.
Calcola l'impatto
Un miglioramento di uno virgola uno secondi può far crescere il tasso di conversione dell'uno per cento (dipende dalla base di partenza e dal settore). Con cinquantamila visitatori al mese sono cinquecento conversioni in più, con un valore d'ordine di cento dollari. Cinquantamila dollari al mese. Seicentomila dollari all'anno.
Confronta con il costo dell'ottimizzazione. Se il costo è di cinquantamila dollari, si ripaga in un mese. Ottimo ROI.
Domande frequenti
Come scopriamo qual è il nostro elemento LCP?
Usa Google Chrome DevTools. Clic destro sulla pagina. Ispeziona. Scheda Prestazioni. Registra il caricamento della pagina. DevTools mostra l'elemento LCP. Oppure controlla PageSpeed Insights. Lighthouse individua gli elementi LCP. Controlla anche il rapporto Core Web Vitals di Search Console. Mostra gli elementi LCP delle pagine. Con il creatore di siti di WEMASY puoi impostarlo direttamente sul tuo sito.
Dobbiamo ottimizzare l'LCP di tutte le pagine o solo della home page?
Ottimizza tutte le pagine. Ma dai la priorità in base al traffico. La home page è importante, ma lo sono anche le pagine prodotto (per un negozio online) o le pagine degli articoli (per chi pubblica). Misura l'LCP su tutte le pagine importanti. Dai la priorità all'ottimizzazione in base al volume di traffico.
Il precaricamento aiuta sempre l'LCP?
Non sempre. Il precaricamento consuma banda. Se precarichi una risorsa poco importante, usi la banda che servirebbe a scaricare una risorsa importante. Precarica solo le risorse critiche (immagine principale, font critico). Non precaricare le risorse non critiche.
Come ottimizziamo l'LCP quando il contenuto principale è dinamico (caricato da un'API)?
Il ritardo della chiamata API si somma all'LCP. Riduci il tempo di risposta dell'API ottimizzando il database, mettendo in cache le risposte, usando una CDN. Mostra anche una schermata scheletro o un contenuto segnaposto mentre l'API carica. Il segnaposto compare subito. L'utente percepisce la pagina come caricata. Il contenuto vero si riempie dopo. L'LCP percepito è più veloce dell'LCP reale.
Dobbiamo usare il caricamento differito (lazy loading) per l'elemento LCP?
No. Il lazy loading ritarda l'immagine fino a poco prima che entri nell'area visibile. Se l'immagine è nella parte visibile senza scorrere (elemento LCP), il lazy loading la ritarda senza motivo. Usa il lazy loading solo per le immagini più in basso. Carica subito l'elemento LCP.
In cosa l'LCP è diverso dall'FCP (First Contentful Paint)?
L'FCP è il momento in cui compare un contenuto qualsiasi (anche un testo piccolo). L'LCP è il momento in cui compare il contenuto principale (di solito un'immagine più grande o un titolo). L'FCP arriva prima dell'LCP. L'LCP conta di più per l'esperienza utente. Migliora prima l'LCP.