Come correggere un LCP lento per le immagini

Correggi un'immagine Largest Contentful Paint (LCP) lenta in 4 passaggi: ridimensionala alla sua dimensione di visualizzazione, convertila in WebP o AVIF, precaricala e imposta fetchpriority su high. I primi 2 passaggi offrono la maggior parte del miglioramento e non richiedono modifiche al markup della pagina.

Nella maggior parte delle pagine, l'elemento Largest Contentful Paint è una singola immagine hero, il che significa che l'LCP è in realtà una questione che riguarda un singolo file piuttosto che l'intero sito. Ottimizzare quel singolo file di solito sposta la misurazione più di qualsiasi altra ottimizzazione disponibile.

Cosa misura l'LCP

L'LCP registra il tempo impiegato dall'elemento visibile più grande per il rendering, misurato a partire dall'inizio del caricamento della pagina. Google considera un valore pari o inferiore a 2.5 secondi come buono, da 2.5 a 4 secondi come da migliorare e superiore a 4 secondi come scadente.

L'elemento misurato è solitamente un'immagine, occasionalmente un blocco di testo di intestazione, ed è sempre qualcosa di visibile senza scorrere. L'elemento può cambiare tra i dispositivi, poiché un'immagine hero che domina un layout desktop potrebbe trovarsi sotto la piega su un telefono.

Trovare l'elemento responsabile

Esegui Lighthouse e leggi la voce dell'elemento Largest Contentful Paint, che indica l'esatto elemento misurato. Indovinare fa perdere tempo, perché l'elemento spesso non è quello che si immagina.

Controlla sia su dispositivi mobili che su desktop, poiché i layout differiscono e così anche la risposta. I dati sul campo dei visitatori reali sono più affidabili di una singola esecuzione in laboratorio, perché le condizioni della rete variano molto di più nella realtà che in un test. Laddove i due non concordano, fidati dei dati sul campo e usa l'esecuzione in laboratorio per la diagnosi.

Ottimizzare l'immagine in ordine di impatto

Per migliorare l'LCP su un'immagine, segui questi 6 passaggi in ordine.

1. Ridimensiona l'immagine alla dimensione massima in cui verrà visualizzata, raddoppiata per gli schermi ad alta densità.
2. Convertila in WebP, o in AVIF se l'immagine è grande e fotografica.
3. Comprimila fino a un obiettivo inferiore a 200 KB per un'immagine hero, il che è realizzabile a larghezza intera sulla maggior parte dei design.
4. Aggiungi gli attributi width e height in modo che il browser riservi lo spazio e non si verifichi alcuno spostamento del layout.
5. Precarica l'immagine nell'head della pagina in modo che il browser inizi a scaricarla immediatamente.
6. Imposta fetchpriority su high sull'elemento immagine, il che indica al browser che questo file è il più importante.

I passaggi 1 e 2 di solito offrono la maggior parte del miglioramento, e sono i due che non richiedono affatto di toccare il markup della pagina.

Perché ridimensionare è meglio che comprimere

Le dimensioni controllano la maggior parte del peso di un file, quindi il ridimensionamento rimuove più peso rispetto a qualsiasi impostazione di qualità. Una fotografia da 4000 pixel visualizzata a 1200 pixel contiene 11 volte più dati sui pixel di quanti la pagina possa effettivamente mostrare.

La terza riga mostra perché il ridimensionamento viene prima. Il solo ridimensionamento ha superato la sola compressione, e la combinazione ha superato entrambi. Le cifre variano in base all'immagine e alla connessione, mentre l'ordine rimane coerente.

Preload e fetchpriority

Il precaricamento indica al browser di scaricare l'immagine hero prima di aver terminato l'analisi della pagina, il che in genere consente di risparmiare da 200 a 500 millisecondi. L'impostazione è importante perché i browser scoprono le immagini tardi nel processo di analisi.

Precarica una sola immagine. Precaricarne diverse elimina il vantaggio, poiché il browser divide la sua attenzione esattamente come avrebbe fatto comunque. Impostare fetchpriority su high ottiene un risultato simile con meno markup ed è spesso sufficiente da solo per un'immagine già presente nell'HTML iniziale.

Errori che peggiorano l'LCP

• Applicare il lazy loading all'immagine hero. Il caricamento pigro ritarda proprio il file che desideri per primo. Applicalo solo sotto la piega.
• Caricare l'immagine hero tramite JavaScript. Un'immagine inserita tramite script non può iniziare il download finché lo script non viene eseguito.
• Utilizzare un'immagine di sfondo CSS. Le immagini di sfondo vengono scoperte più tardi rispetto agli elementi img e non possono essere prioritarizzate altrettanto facilmente.
• Precaricare diverse immagini. Le priorità in competizione eliminano completamente il vantaggio.
• Omettere width e height. Lo spostamento del layout danneggia una misurazione separata mentre questa migliora.

Quando l'elemento LCP è testo

Un LCP basato su testo è solitamente ritardato dai web font piuttosto che dal testo stesso. Il browser dispone immediatamente delle parole e attende un file di font prima di disegnarle.

Imposta font-display su swap in modo che il testo venga visualizzato con un font di fallback e cambi quando arriva il web font. Precarica il singolo file di font più importante e riduci il font ai soli caratteri effettivamente utilizzati dalle tue pagine, il che spesso riduce un font da 200 KB a meno di 30 KB. Servire i font dal proprio dominio elimina una connessione aggiuntiva a terze parti.

Il tempo di risposta del server stabilisce il limite minimo

L'LCP non può essere più veloce del tempo impiegato dal server per restituire il primo byte, quindi un server lento limita ogni altro miglioramento. Punta a meno di 600 millisecondi per il primo byte.

Verifica questa cifra prima di ottimizzare le immagini, perché una risposta del server di 2 secondi rende impossibile un obiettivo LCP di 2.5 secondi, indipendentemente da ciò che fai ai file. La memorizzazione nella cache, un host più veloce o una rete di distribuzione dei contenuti (CDN) affrontano questo problema. Il lavoro sulle immagini migliora quindi ciò che rimane, anziché combattere un limite stabilito altrove.

Anche gli script di terze parti ritardano l'immagine

Gli script di analisi, i banner di consenso, i widget di chat e gli script pubblicitari competono con la tua immagine hero per la larghezza di banda e il tempo di elaborazione. Un'immagine perfettamente ottimizzata viene comunque visualizzata in ritardo se 12 script vengono caricati prima di essa.

I banner di consenso sono i più dannosi, perché molti bloccano il rendering finché il visitatore non effettua una scelta. Carica gli script di terze parti con l'attributo defer o async in modo che non blocchino la pagina, e verifica quanti sono realmente necessari. Rimuovere 3 script di tracciamento inutilizzati spesso migliora l'LCP più di un ulteriore ciclo di compressione delle immagini.

Testare correttamente la modifica

Esegui il test in una finestra privata con le estensioni disabilitate e ripeti la misurazione 3 volte anziché fidarti di un singolo risultato. I punteggi variano tra le esecuzioni con un margine evidente.

Verifica che il browser abbia effettivamente ricevuto il file più piccolo. Apri gli strumenti di sviluppo, passa alla scheda Rete, filtra per immagini e ricarica. La dimensione trasferita e il formato compaiono nell'elenco. Una pagina che serve ancora il vecchio file di solito significa che un livello di cache sta trattenendo la versione precedente, non che l'ottimizzazione sia fallita.

Mantenere l'LCP veloce dopo la correzione

Stabilisci una regola per le immagini hero anziché correggerle una alla volta, perché le nuove pagine reintrodurranno il problema. Un sito corretto una volta tornerà a peggiorare nel giro di pochi mesi se gli editor caricano le immagini direttamente da una fotocamera.

Concorda una larghezza massima e una dimensione massima del file per le immagini hero, mettila per iscritto e applicala a ogni nuova pagina. Una regola come 1920 pixel di larghezza e meno di 200 KB è facile da verificare e copre quasi ogni design. Laddove pubblicano più persone, la regola scritta conta più della tecnica, poiché la misurazione riflette la pagina peggiore piuttosto che quella migliore.

Preparare le immagini hero in un unico passaggio

Elabora tutte le immagini hero del sito insieme, poiché condividono una specifica e una dimensione target. La maggior parte dei siti ne ha tra 10 e 100 tra landing page, pagine di categoria e articoli.

Imposta la larghezza e l'obiettivo in KB una sola volta, trascina le immagini e ogni file verrà restituito ottimizzato. È possibile elaborare fino a 500 immagini per lotto, interamente all'interno del browser sul proprio processore. Non viene caricato nulla, quindi le risorse di staging, le pagine di campagne non pubblicate e i lavori dei clienti rimangono sul tuo computer mentre viene preparata l'intera libreria.