Indice dei contenuti
Un sito può avere immagini in WebP, una cache ben configurata e un punteggio PageSpeed discreto, ma continuare a mostrare lentamente il contenuto principale. Spesso il problema è proprio una delle ottimizzazioni che abbiamo attivato con le migliori intenzioni: il lazy loading. 🖼️
Il caricamento differito è utilissimo per le immagini che si trovano più in basso nella pagina. Ma quando viene applicato all’immagine principale visibile appena si apre il sito, rischia di far perdere tempo prezioso al browser.
Che cos’è l’LCP e perché conta
Il Largest Contentful Paint (LCP) misura il tempo necessario a visualizzare l’elemento di contenuto più grande nell’area visibile iniziale. Può essere una fotografia, un’immagine di copertina o un grande blocco di testo. Per offrire una buona esperienza, il valore dovrebbe rimanere entro circa 2,5 secondi nel 75° percentile delle visite reali.
Non basta quindi comprimere le immagini: conta anche quando il browser scopre che deve scaricarle.
Quando il lazy loading diventa controproducente
Immaginiamo una griglia portfolio: il primo screenshot è già visibile senza scorrere. Se un plugin sostituisce il suo indirizzo con un attributo come data-src, il browser potrebbe attendere che uno script lo ripristini prima di avviare il download. Il file pesa poco, ma la richiesta parte tardi.
La regola pratica è semplice: caricamento prioritario per il contenuto above the fold, caricamento differito per quello più in basso. Non significa disattivare il lazy loading su tutto il sito.
Come intervenire in WordPress
1. Identificare l’elemento LCP reale
Apri PageSpeed Insights e analizza separatamente mobile e desktop. L’elemento LCP può cambiare in base al layout responsive. Controlla il dettaglio dell’elemento e il ritardo di caricamento della risorsa: è più utile di una semplice lista di plugin da installare.
2. Dare priorità all’immagine corretta
Per un’immagine LCP effettivamente visibile all’apertura, gli attributi loading="eager" e fetchpriority="high" possono aiutare il browser ad avviare prima il download. La priorità alta va usata con parsimonia: assegnarla a dieci immagini contemporaneamente annulla il vantaggio.
3. Mantenere le dimensioni esplicite
Gli attributi width e height, oppure un rapporto d’aspetto definito via CSS, consentono al browser di riservare lo spazio prima che l’immagine arrivi. Questo riduce anche il CLS, cioè gli spostamenti inattesi del layout.
4. Servire la dimensione giusta
Con srcset e sizes, WordPress può proporre versioni diverse della stessa immagine. Una miniatura larga 400 pixel non dovrebbe obbligare uno smartphone a scaricare un file da 2000 pixel. WebP o AVIF aiutano, ma non sostituiscono il corretto dimensionamento.
Meglio una regola dinamica che un elenco di esclusioni
Se aggiungi spesso articoli o progetti, escludere manualmente dal lazy loading il nome di ogni nuova immagine è fragile. È preferibile una logica che riconosca il ruolo dell’immagine nel layout: ad esempio la prima immagine effettivamente visibile in una griglia. Attenzione però a slider, ordinamenti e layout diversi tra mobile e desktop: la prima immagine nel codice non coincide sempre con quella LCP.
Come verificare il risultato 🔎
- Svuota la cache del sito e dell’eventuale CDN.
- Controlla il sorgente HTML e la richiesta dell’immagine in DevTools.
- Verifica che l’immagine LCP non venga ancora trasformata in lazy loading da un plugin.
- Ripeti il test mobile e desktop, confrontando LCP e CLS.
- Osserva anche i dati reali degli utenti: un singolo test di laboratorio non racconta tutta la storia.
La lezione è che ottimizzare non significa attivare ogni opzione disponibile. Significa capire quali risorse servono subito e quali possono aspettare. Per approfondire, consulta la guida web.dev sull’ottimizzazione dell’LCP.
FAQ
Devo disattivare il lazy loading in WordPress?
No. È generalmente utile per le immagini fuori schermo. Il problema nasce quando rallenta l’immagine principale della pagina.
Fetchpriority high migliora sempre PageSpeed?
No. Aiuta solo se applicato alla risorsa giusta e se il collo di bottiglia riguarda la sua priorità o scoperta.
WebP basta per ottenere un buon LCP?
No. Formato, dimensioni, tempi di risposta, CSS e momento di avvio del download concorrono tutti al risultato.