Come implementare il lazy loading delle immagini in WordPress
Il lazy loading è una tecnica che carica le immagini solo quando stanno per entrare nell’area visibile del browser, invece di caricarle tutte insieme al primo caricamento della pagina. Su pagine con molte immagini, questa ottimizzazione riduce drasticamente il tempo di caricamento iniziale e il consumo di banda. In questa guida ti spiego come funziona e come implementarlo al meglio su WordPress.
Come funziona il lazy loading
Quando un visitatore apre una pagina, il browser normalmente scarica tutte le immagini presenti, anche quelle in fondo alla pagina che il visitatore non vedrà subito. Con il lazy loading, le immagini sotto la piega (below the fold) vengono sostituite con un placeholder leggero. Solo quando il visitatore scorre la pagina e un’immagine sta per diventare visibile, il browser la scarica e la mostra. Il risultato è un caricamento iniziale molto più veloce.
Immagina una pagina con 20 immagini da 200 KB ciascuna: senza lazy loading il browser scarica 4 MB al primo caricamento. Con il lazy loading, scarica solo le 3-4 immagini visibili nella prima schermata (circa 600-800 KB) e il resto man mano che l’utente scorre.
Il lazy loading nativo di WordPress
Da WordPress 5.5, il lazy loading è integrato nativamente nel core. WordPress aggiunge automaticamente l’attributo loading=”lazy” a tutte le immagini e gli iframe nel contenuto dei post e delle pagine. Non devi installare nessun plugin per questa funzionalità di base.
Da WordPress 5.9, la prima immagine del contenuto viene esclusa dal lazy loading per evitare di rallentare il caricamento dell’elemento LCP (Largest Contentful Paint), una metrica fondamentale per i Core Web Vitals di Google. WordPress è quindi già ottimizzato per il lazy loading nella maggior parte dei casi.
Verificare che il lazy loading sia attivo
Per controllare se il lazy loading funziona sul tuo sito, apri una pagina con più immagini, fai clic destro su un’immagine sotto la piega e seleziona “Ispeziona elemento”. Nel codice HTML dell’immagine dovresti vedere l’attributo loading=”lazy”:
<img src="immagine.jpg" loading="lazy" width="800" height="600" alt="Descrizione">
Se l’attributo non è presente, potrebbe essere stato rimosso da un plugin o dal tema. Controlla nelle impostazioni dei plugin di ottimizzazione se c’è un’opzione che disabilita il lazy loading nativo di WordPress.
Lazy loading per le immagini del tema
Il lazy loading nativo di WordPress si applica solo alle immagini inserite nel contenuto tramite l’editor. Le immagini generate dal tema (slider, thumbnail, immagini in evidenza nel loop) potrebbero non avere l’attributo loading=”lazy”. Se il tuo tema usa la funzione wp_get_attachment_image() correttamente, l’attributo viene aggiunto automaticamente. Se invece usa tag img hardcoded, devi intervenire.
Per aggiungere il lazy loading a tutte le immagini del tema che usano the_post_thumbnail(), WordPress lo gestisce automaticamente dalle versioni recenti. Per immagini personalizzate, aggiungi manualmente l’attributo:
<img src="immagine.jpg" loading="lazy" width="800" height="600" alt="Descrizione">
Specifica sempre gli attributi width e height sulle immagini lazy loaded: senza di essi il browser non può riservare lo spazio corretto e la pagina “salta” quando le immagini vengono caricate, causando un cattivo Cumulative Layout Shift (CLS).
Escludere immagini specifiche dal lazy loading
Non tutte le immagini devono avere il lazy loading. Le immagini visibili nella prima schermata (above the fold) come il logo, l’immagine hero e il banner principale devono caricarsi immediatamente. Per escludere un’immagine dal lazy loading, aggiungi l’attributo loading=”eager”:
<img src="hero.jpg" loading="eager" width="1200" height="600" alt="Banner principale">
Se vuoi personalizzare quali immagini WordPress esclude automaticamente, puoi usare il filtro wp_omit_loading_attr_threshold in functions.php:
add_filter('wp_omit_loading_attr_threshold', function() {
return 3; // Esclude le prime 3 immagini dal lazy loading
});
Lazy loading con plugin avanzati
Se vuoi funzionalità più avanzate rispetto al lazy loading nativo, alcuni plugin offrono opzioni aggiuntive. Perfmatters permette di configurare il lazy loading con precisione, incluso il lazy loading di video e iframe di YouTube. FlyingPress offre lazy loading con placeholder sfocati che migliorano l’esperienza visiva durante il caricamento. Questi plugin sostituiscono il lazy loading nativo con implementazioni JavaScript più sofisticate che possono offrire prestazioni migliori in situazioni specifiche.
Lazy loading e Core Web Vitals
Il lazy loading ha un impatto diretto sui Core Web Vitals, le metriche di Google per la qualità dell’esperienza utente:
- LCP (Largest Contentful Paint): migliora perché il browser può concentrare le risorse sugli elementi visibili. Ma attenzione: se l’immagine LCP ha il lazy loading, il punteggio peggiora. Escludi sempre l’immagine principale dal lazy loading.
- CLS (Cumulative Layout Shift): può peggiorare se le immagini lazy loaded non hanno dimensioni specificate. Includi sempre width e height per evitare salti di layout.
- FID/INP: migliora indirettamente perché il browser ha meno risorse da scaricare al caricamento iniziale, rendendo la pagina interattiva più velocemente.
Testare le prestazioni del lazy loading
Dopo aver configurato il lazy loading, misura il miglioramento. Usa PageSpeed Insights per verificare i Core Web Vitals e controlla che non ci siano avvisi legati al lazy loading dell’immagine LCP. Nella scheda Network degli strumenti per sviluppatori del browser, osserva come le immagini vengono caricate progressivamente durante lo scroll. Se vedi che tutte le immagini vengono caricate insieme, il lazy loading non sta funzionando correttamente.
Serve aiuto con le prestazioni?
Se vuoi ottimizzare il lazy loading e le prestazioni del tuo sito WordPress per ottenere punteggi eccellenti nei Core Web Vitals, il team di SoccorsoWP può analizzare e ottimizzare il tuo sito. Apri un ticket e regala al tuo sito la velocità che merita.
