SparkCore
Migliorare i Core Web Vitals con media più leggeri
LCP e CLS dipendono spesso da immagini pesanti. File più piccoli e dimensioni fisse aiutano subito.
In breve
- Un buon risultato è: LCP di 2,5 secondi o meno, INP di 200 millisecondi o meno, CLS di 0,1 o meno.
- Le immagini incidono soprattutto su LCP e CLS, INP dipende di più da JavaScript.
- Non applichi mai il lazy load alla prima immagine grande e assegni a ogni immagine width e height.
Risultati rapidi
- Comprima hero e foto prodotto
- Usi formati moderni
- Eviti caricamenti sovradimensionati
Che cosa sono i Core Web Vitals e quali punteggi sono buoni?
I Core Web Vitals misurano come una pagina viene percepita dai visitatori. LCP misura quanto in fretta compare l'elemento visibile più grande. INP misura quanto in fretta la pagina risponde a clic e tocchi. CLS misura quanto il layout si sposta durante il caricamento. Un buon punteggio è un LCP di 2,5 secondi o meno, un INP di 200 millisecondi o meno e un CLS di 0,1 o meno. Misuri possibilmente con dati di visitatori reali, non solo con un test di laboratorio.
- LCP: 2,5 secondi o meno
- INP: 200 millisecondi o meno
- CLS: 0,1 o meno
Come si migliora LCP su WordPress?
In molte pagine l'elemento LCP è un'immagine grande, come una hero o una foto prodotto. Renda quindi quel file il più leggero possibile e lo serva in un formato moderno. Non lo carichi in lazy: è subito visibile e deve partire subito. Un server veloce e la cache delle pagine riducono l'attesa per il primo byte, e anche questo conta per LCP. Inoltre non carichi immagini molto più grandi dello spazio in cui compaiono.
- Comprima la hero e le foto prodotto
- Usi WebP o AVIF con un fallback
- Non applichi il lazy loading alla prima immagine
Come si evita lo spostamento del layout (CLS) con le immagini?
Lo spostamento del layout nasce quando il browser non conosce le dimensioni di un'immagine. Il testo scende di colpo non appena l'immagine arriva. Assegni quindi a ogni immagine una width e una height. Il browser riserva così lo spazio giusto prima del caricamento. WordPress di solito aggiunge da sé questi attributi alle immagini della libreria multimediale. Controlli però i suoi blocchi, i componenti del tema e il codice. Riservi lo spazio anche per banner, annunci e caratteri che si caricano più tardi.
Che cosa si può fare per INP e dove aiuta il caching?
INP dipende soprattutto da JavaScript. Gli script pesanti di temi, plugin e tracker tengono occupato il thread principale. Rimuova ciò che non usa e rimandi il caricamento del resto. Le immagini hanno qui un ruolo marginale. Il caching aiuta soprattutto con LCP. Una pagina in cache è pronta prima e una CDN avvicina i file al visitatore. Misuri di nuovo dopo ogni modifica e cambi una cosa alla volta, altrimenti non saprà che cosa ha funzionato.
Domande frequenti
Di solito LCP, perché l'elemento più grande è spesso un'immagine. Comprima quel file, scelga un formato moderno e non lo carichi in lazy. Poi tocca a CLS: assegni a ogni immagine width e height.
No. Il lazy loading serve per le immagini sotto la parte visibile della pagina. WordPress applica loading lazy automaticamente alle immagini. La prima immagine grande, spesso l'elemento LCP, va invece caricata subito, altrimenti il suo LCP peggiora.
Le immagini sono solo una parte della storia. Contano anche hosting lento, script pesanti, pagine non in cache e layout che si sposta. Nel suo report controlli, metrica per metrica, quale elemento o script ne è la causa.