Nella maggior parte dei siti WordPress l’elemento più grande e pesante che il browser deve disegnare — quello che decide il tuo LCP — è un’immagine: l’hero in cima alla pagina, la foto del prodotto, il banner. Tradotto: se quell’immagine è pesante o caricata male, il tuo Largest Contentful Paint va a farsi benedire, e con lui l’esperienza di chi arriva sul sito.
La buona notizia è che l’LCP legato alle immagini è uno di quei problemi con un ottimo rapporto sforzo/risultato. Vediamo come sistemarlo in WordPress, senza santoni né plugin miracolosi.
Cos’è l’LCP e perché le immagini contano
L’LCP misura quanto tempo passa prima che venga disegnato l’elemento più grande visibile nella prima schermata. La soglia “buona” di Google è sotto i 2,5 secondi, misurata sugli utenti reali. Nella pratica quell’elemento è quasi sempre un’immagine, quindi ottimizzare le immagini è la leva più diretta per far scendere l’LCP.
1. Trova l’immagine che fa da LCP
Prima di ottimizzare a caso, scopri qual è l’elemento LCP. Lo vedi in PageSpeed Insights o nel pannello Performance di Chrome DevTools, che te lo indica esplicitamente. Nove volte su dieci è l’immagine hero. È su quella che concentri gli sforzi, non sulle miniature del footer.
2. Usa i formati giusti: WebP o AVIF
JPEG e PNG sono il passato. Converti le immagini in WebP (o AVIF, ancora più leggero dove supportato): a parità di qualità visiva pesano molto meno. In WordPress lo fai con un plugin di ottimizzazione — ne ho parlato nella guida a ShortPixel — che converte e comprime in automatico.
3. Servi la dimensione giusta
Caricare un’immagine da 3000px e mostrarla in un box da 800px è uno spreco che paghi in secondi. WordPress genera già più misure e le serve con srcset: assicurati che l’immagine originale non sia enorme e che le dimensioni intermedie esistano, così il mobile scarica la versione piccola e non quella da desktop. Trovi altri dettagli pratici nella guida su come ottimizzare le immagini di WordPress.
4. NON mettere l’immagine LCP in lazy-load
Questo è il classico autogol. Il lazy-load è ottimo per le immagini sotto la piega, ma se lo applichi all’hero stai ritardando apposta l’elemento LCP: il browser aspetta prima di caricarlo. All’immagine LCP invece va tolto il lazy-load e, anzi, va data priorità.
|
1 2 3 |
<!-- l'immagine LCP: niente lazy, priorità alta e preload --> <img src="hero.webp" width="1200" height="600" fetchpriority="high" loading="eager" alt="descrizione"> |
Il fetchpriority="high" dice al browser “questa scaricala per prima”, e i due attributi width e height evitano che il layout salti (occhio anche al CLS). Se vuoi spingere, puoi aggiungere un <link rel="preload" as="image"> nell’head per l’hero.
5. Metti una CDN davanti
Anche l’immagine perfetta, se parte da un server dall’altra parte del mondo, arriva tardi. Una CDN (tipo Cloudflare) serve i file statici da un nodo vicino al visitatore: sull’LCP, soprattutto da mobile e con pubblico sparso, si sente.
Come procedo, in pratica
Prima misuro e individuo l’elemento LCP; poi converto in WebP/AVIF e comprimo; controllo che le dimensioni servite siano sensate; tolgo il lazy-load all’hero e gli do fetchpriority="high"; infine metto la CDN sui statici. Rimisuro e confronto: se ho lavorato sull’immagine giusta, l’LCP scende in modo netto. E ricorda che il punteggio non è tutto, come ho spiegato parlando di PageSpeed contro le prestazioni reali.
Domande frequenti
Meglio WebP o AVIF ?
AVIF comprime ancora meglio di WebP a parità di qualità, ma il supporto è leggermente più recente. La strategia sensata è servire AVIF dove il browser lo accetta e WebP come fallback: i buoni plugin di ottimizzazione lo fanno da soli.
Devo mettere il lazy-load a tutte le immagini ?
No. Lazy-load sì per tutto ciò che sta sotto la piega, ma mai sull’immagine LCP: lì ritarderesti proprio l’elemento che Google misura. L’hero va caricato subito e con priorità alta.
Basta comprimere le immagini ?
Aiuta, ma non basta. Comprimere riduce il peso; poi contano anche il formato, la dimensione servita, la priorità di caricamento e la CDN. È l’insieme a far scendere l’LCP, non un singolo trucco.
Come trovo l’immagine che fa da LCP ?
Con PageSpeed Insights o il pannello Performance di Chrome DevTools: entrambi ti indicano qual è l’elemento LCP di quella pagina. Da lì sai su cosa concentrare l’ottimizzazione.
Vuoi sapere cosa sta rallentando davvero le tue pagine ? Posso farti un check delle Core Web Vitals e dirti su quali immagini vale la pena intervenire. E se il sito “sembra” lento anche dopo, il problema potrebbe essere l’INP e non l’LCP.
