{"id":25801,"date":"2026-06-03T10:00:00","date_gmt":"2026-06-03T08:00:00","guid":{"rendered":"https:\/\/soccorsowp.it\/blog\/?p=25801"},"modified":"2026-06-03T10:00:00","modified_gmt":"2026-06-03T08:00:00","slug":"lazy-loading-immagini-wordpress-guida","status":"publish","type":"post","link":"https:\/\/soccorsowp.it\/blog\/lazy-loading-immagini-wordpress-guida\/","title":{"rendered":"Come implementare il lazy loading delle immagini in WordPress"},"content":{"rendered":"

Come implementare il lazy loading delle immagini in WordPress<\/h1>\n

Il lazy loading<\/strong> \u00e8 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<\/a>.<\/p>\n

Come funziona il lazy loading<\/h2>\n

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\u00e0 subito. Con il lazy loading<\/strong>, 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 \u00e8 un caricamento iniziale molto pi\u00f9 veloce.<\/p>\n

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.<\/p>\n

Il lazy loading nativo di WordPress<\/h2>\n

Da WordPress 5.5<\/strong>, il lazy loading \u00e8 integrato nativamente nel core. WordPress aggiunge automaticamente l’attributo loading=”lazy”<\/span> a tutte le immagini e gli iframe nel contenuto dei post e delle pagine. Non devi installare nessun plugin per questa funzionalit\u00e0 di base.<\/p>\n

Da WordPress 5.9<\/strong>, 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 \u00e8 quindi gi\u00e0 ottimizzato per il lazy loading nella maggior parte dei casi.<\/p>\n

Verificare che il lazy loading sia attivo<\/h2>\n

Per controllare se il lazy loading funziona sul tuo sito, apri una pagina con pi\u00f9 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”<\/span>:<\/p>\n

<img src=\"immagine.jpg\" loading=\"lazy\" width=\"800\" height=\"600\" alt=\"Descrizione\"><\/pre>\n
Se l’attributo non \u00e8 presente, potrebbe essere stato rimosso da un plugin o dal tema. Controlla nelle impostazioni dei plugin di ottimizzazione se c’\u00e8 un’opzione che disabilita il lazy loading nativo di WordPress.<\/p>\n
Lazy loading per le immagini del tema<\/h2>\n
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”<\/span>. Se il tuo tema usa la funzione wp_get_attachment_image()<\/span> correttamente, l’attributo viene aggiunto automaticamente. Se invece usa tag img<\/span> hardcoded, devi intervenire.<\/p>\n
Per aggiungere il lazy loading a tutte le immagini del tema che usano the_post_thumbnail()<\/span>, WordPress lo gestisce automaticamente dalle versioni recenti. Per immagini personalizzate, aggiungi manualmente l’attributo:<\/p>\n
<img src=\"immagine.jpg\" loading=\"lazy\" width=\"800\" height=\"600\" alt=\"Descrizione\"><\/pre>\n
Specifica sempre gli attributi width<\/span> e height<\/span> sulle immagini lazy loaded: senza di essi il browser non pu\u00f2 riservare lo spazio corretto e la pagina “salta” quando le immagini vengono caricate, causando un cattivo Cumulative Layout Shift (CLS).<\/p>\n
Escludere immagini specifiche dal lazy loading<\/h2>\n
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”<\/span>:<\/p>\n
<img src=\"hero.jpg\" loading=\"eager\" width=\"1200\" height=\"600\" alt=\"Banner principale\"><\/pre>\n
Se vuoi personalizzare quali immagini WordPress esclude automaticamente, puoi usare il filtro wp_omit_loading_attr_threshold<\/span> in functions.php<\/span>:<\/p>\n
add_filter('wp_omit_loading_attr_threshold', function() {\n    return 3; \/\/ Esclude le prime 3 immagini dal lazy loading\n});<\/pre>\n
Lazy loading con plugin avanzati<\/h2>\n
Se vuoi funzionalit\u00e0 pi\u00f9 avanzate rispetto al lazy loading nativo, alcuni plugin offrono opzioni aggiuntive. Perfmatters<\/strong> permette di configurare il lazy loading con precisione, incluso il lazy loading di video e iframe di YouTube. FlyingPress<\/strong> 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\u00f9 sofisticate che possono offrire prestazioni migliori in situazioni specifiche.<\/p>\n
Lazy loading e Core Web Vitals<\/h2>\n
Il lazy loading ha un impatto diretto sui Core Web Vitals<\/strong>, le metriche di Google per la qualit\u00e0 dell’esperienza utente:<\/p>\n