Lazy Load con Smush: Caricare le Immagini Solo Quando Servono

Quando un visitatore apre una pagina del tuo sito, il browser scarica tutte le risorse necessarie per renderizzarla completamente: HTML, CSS, JavaScript e, naturalmente, tutte le immagini. Il problema è che molte di queste immagini si trovano nella parte inferiore della pagina, fuori dalla viewport iniziale, e il visitatore potrebbe non scorrerci mai fino in fondo. Scaricare tutte le immagini in anticipo significa sprecare banda e rallentare il caricamento iniziale della pagina, penalizzando l’esperienza dell’utente.

Il Lazy Load risolve elegantemente questo problema caricando le immagini solo quando il visitatore scorre la pagina fino al punto in cui sono visibili. Smush integra una funzionalità di lazy loading avanzata, facile da configurare e compatibile con la maggior parte dei temi e dei plugin WordPress. In questo articolo vedremo come funziona, come configurarla e come ottimizzarla per ottenere le migliori prestazioni possibili.

Come Funziona il Lazy Load

Il principio del lazy load è semplice ma potente. Invece di inserire l’URL dell’immagine direttamente nell’attributo src del tag <img>, il lazy load utilizza un attributo alternativo (tipicamente data-src o data-lazy) per memorizzare l’URL reale. Nell’attributo src viene inserito un placeholder ultraleggero — un’immagine trasparente da 1 pixel o un’anteprima sfocata di pochi byte.

Quando il browser carica la pagina, scarica solo i placeholder, che pesano pochi byte ciascuno. Un observer JavaScript monitora la posizione dello scroll dell’utente e, quando un’immagine sta per entrare nella viewport (con un margine configurabile), sostituisce il placeholder con l’immagine reale, che viene scaricata in quel momento.

Il risultato è un tempo di caricamento iniziale drasticamente ridotto. Una pagina con 20 immagini da 100 KB ciascuna normalmente richiederebbe il download di 2 MB prima di essere considerata caricata. Con il lazy load, solo le 2-3 immagini nella viewport iniziale vengono scaricate immediatamente, riducendo il caricamento iniziale a 200-300 KB.

I browser moderni supportano anche il lazy load nativo tramite l’attributo loading="lazy", introdotto in HTML. Smush utilizza un approccio JavaScript più avanzato che offre maggiore controllo e compatibilità cross-browser, ma può anche integrarsi con il lazy load nativo per una copertura completa.

Attivare il Lazy Load in Smush

Per attivare il lazy load, accedi alla dashboard di WordPress e vai su Smush > Lazy Load. Troverai un interruttore principale per abilitare o disabilitare la funzionalità. Attivalo e scorri verso il basso per esplorare le opzioni di configurazione disponibili.

La prima opzione riguarda i tipi di contenuto a cui applicare il lazy load. Puoi abilitarlo separatamente per immagini, iframe (che includono video YouTube e mappe Google) e video. Ti consigliamo di attivarlo per tutti e tre i tipi, a meno che tu non abbia ragioni specifiche per escluderne uno.

La seconda opzione riguarda le animazioni di comparsa. Smush offre diverse animazioni per l’apparizione delle immagini durante lo scroll: dissolvenza (fade-in), scorrimento dal basso (slide-up) e comparsa istantanea (nessuna animazione). La dissolvenza è generalmente la scelta più elegante e meno intrusiva.

Configurazione Avanzata del Lazy Load

Oltre alle opzioni di base, Smush offre diverse impostazioni avanzate per personalizzare il comportamento del lazy load. Una delle più importanti è il margine di precaricamento (threshold o offset). Questo valore definisce a quanti pixel di distanza dalla viewport l’immagine deve iniziare a caricarsi.

Un margine di 200-300 pixel è generalmente un buon compromesso: le immagini iniziano a caricarsi poco prima di diventare visibili, evitando che l’utente veda un placeholder al posto dell’immagine durante lo scroll rapido. Un margine troppo grande vanifica i benefici del lazy load, mentre un margine troppo piccolo può causare un effetto “flash” visibile durante lo scroll.

Un’altra impostazione cruciale è la possibilità di escludere specifiche immagini o classi CSS dal lazy load. Questa opzione è fondamentale per le immagini above-the-fold — quelle visibili senza scorrimento nella viewport iniziale. Queste immagini devono caricarsi immediatamente per garantire una buona esperienza utente e un punteggio LCP ottimale.

Per escludere un’immagine specifica, puoi aggiungere una classe CSS dedicata (ad esempio no-lazyload) al tag dell’immagine e poi inserire questa classe nella lista di esclusione di Smush. In alternativa, puoi escludere immagini in base al loro URL, all’ID o ad altri attributi.

Lazy Load e Core Web Vitals

Il lazy load ha un impatto significativo sui Core Web Vitals di Google, ma non sempre positivo se configurato in modo errato. Il parametro più influenzato è il Largest Contentful Paint (LCP), che misura il tempo necessario per caricare l’elemento visivo più grande nella viewport iniziale.

Se l’immagine LCP (tipicamente l’immagine hero o il banner principale) è soggetta al lazy load, il browser dovrà prima caricare il JavaScript di Smush, poi valutare la posizione dell’immagine e infine avviare il download. Questo aggiunge un ritardo che peggiora il punteggio LCP. Per evitare questo problema, è essenziale escludere l’immagine LCP dal lazy load.

Come identificare l’immagine LCP? Puoi utilizzare Google PageSpeed Insights o Chrome DevTools. In PageSpeed Insights, la sezione “Diagnostics” indica quale elemento è stato identificato come LCP. In Chrome DevTools, il pannello “Performance” mostra un marker LCP che evidenzia l’elemento responsabile.

Al contrario, il lazy load migliora drasticamente il Total Blocking Time (TBT) e il Speed Index, perché riduce il numero di richieste di rete durante il caricamento iniziale. Anche il First Contentful Paint (FCP) beneficia del lazy load, perché il browser può concentrare le risorse sul rendering dei contenuti immediatamente visibili.

Placeholder: Tipologie e Configurazione

Smush offre diverse opzioni per i placeholder che vengono mostrati al posto delle immagini prima del caricamento. La scelta del placeholder influisce sia sull’estetica che sulle prestazioni del sito.

Il placeholder trasparente è l’opzione più leggera: un’immagine invisibile da 1×1 pixel che non aggiunge praticamente nessun peso alla pagina. Lo svantaggio è che lo spazio dell’immagine appare vuoto fino al caricamento, il che può causare salti di layout (Cumulative Layout Shift).

Il placeholder colorato mostra un rettangolo di un colore dominante estratto dall’immagine. Questo approccio è esteticamente più gradevole e dà all’utente un’idea del contenuto che sta per apparire. Il peso aggiuntivo è minimo — pochi byte per ogni placeholder.

Il placeholder sfocato (LQIP – Low Quality Image Placeholder) mostra una versione estremamente compressa e sfocata dell’immagine, che viene progressivamente sostituita dalla versione full quality. Questo approccio è il più elegante dal punto di vista dell’esperienza utente, ma richiede la generazione e il caricamento di un’anteprima per ogni immagine.

Evitare il Cumulative Layout Shift (CLS)

Uno dei rischi principali del lazy load è il Cumulative Layout Shift (CLS), un Core Web Vital che misura la stabilità visiva della pagina durante il caricamento. Se le immagini non hanno dimensioni specificate (attributi width e height), il browser non sa quanto spazio riservare e, quando l’immagine si carica, il contenuto circostante si sposta improvvisamente per farle posto.

Per prevenire il CLS, assicurati che tutte le immagini del tuo sito abbiano gli attributi width e height specificati nel codice HTML. WordPress lo fa automaticamente per le immagini inserite tramite l’editor a blocchi, ma le immagini aggiunte manualmente nel codice o tramite CSS potrebbero non avere queste dimensioni.

Smush aiuta a prevenire il CLS anche quando le dimensioni non sono specificate, riservando lo spazio necessario tramite CSS inline. Tuttavia, è sempre meglio avere le dimensioni esplicite nell’HTML per la massima compatibilità e affidabilità.

Compatibilità con Temi e Plugin

Il lazy load di Smush è progettato per essere compatibile con la maggior parte dei temi e dei plugin WordPress. Tuttavia, ci sono alcune situazioni in cui possono verificarsi conflitti. I page builder come Elementor, Divi e WPBakery hanno spesso le loro implementazioni di lazy load integrate. Se usi uno di questi builder, disabilita il lazy load nel builder e usa solo quello di Smush, o viceversa. Avere due implementazioni attive contemporaneamente può causare problemi come immagini che non si caricano o che lampeggiano.

Anche alcuni plugin di caching offrono funzionalità di lazy load. WP Rocket, ad esempio, include un modulo di lazy load molto efficiente. Se utilizzi WP Rocket insieme a Smush, disabilita il lazy load in uno dei due plugin per evitare conflitti. Generalmente, il lazy load di WP Rocket è leggermente più performante perché si integra nativamente con il sistema di caching, ma il lazy load di Smush offre più opzioni di personalizzazione.

Gli slider e le gallerie richiedono attenzione particolare. Plugin come Slider Revolution, MetaSlider e NextGEN Gallery hanno i propri meccanismi di caricamento delle immagini che possono entrare in conflitto con il lazy load di Smush. Se noti che le immagini negli slider non si caricano correttamente, aggiungi le classi CSS dello slider alla lista di esclusione del lazy load.

Lazy Load per Video e iFrame

Oltre alle immagini, Smush può applicare il lazy load anche a video e iframe. Questo è particolarmente utile per i video YouTube e Vimeo incorporati, che caricano risorse significative anche quando il visitatore non li guarda. Un singolo embed YouTube carica oltre 500 KB di JavaScript e CSS, più le risorse per l’anteprima del video.

Con il lazy load attivo, l’iframe del video viene sostituito da un’anteprima leggera (un’immagine del thumbnail del video) e il contenuto effettivo viene caricato solo quando il visitatore scorre fino al video o clicca per riprodurlo. Questo può ridurre il tempo di caricamento iniziale di diversi secondi su pagine con video incorporati.

Lo stesso principio si applica alle mappe Google, ai widget social e a qualsiasi altro contenuto caricato tramite iframe. Abilitare il lazy load per gli iframe è quasi sempre vantaggioso e raramente causa problemi di compatibilità.

Testare e Verificare il Lazy Load

Dopo aver configurato il lazy load, è importante verificare che funzioni correttamente. Apri il tuo sito in una finestra di navigazione in incognito (per evitare la cache del browser), apri Chrome DevTools con F12 e vai al pannello Network. Filtra per tipo “Img” e ricarica la pagina.

Dovresti vedere che solo le immagini nella viewport iniziale vengono caricate al primo caricamento. Mentre scorri verso il basso, nuove richieste di immagini appariranno nel pannello Network, confermando che il lazy load sta funzionando correttamente.

Verifica anche che non ci siano immagini rotte o placeholder persistenti. Se un’immagine mostra solo il placeholder senza mai caricarsi, potrebbe esserci un problema di compatibilità con il tema o con un altro plugin. In questo caso, prova ad aggiungere l’immagine alla lista di esclusione per risolvere il problema.

Best Practice per il Lazy Load

Per ottenere i migliori risultati dal lazy load di Smush, segui queste best practice. Escludi sempre le immagini above-the-fold, in particolare l’immagine LCP. Specifica sempre width e height per le immagini nel markup HTML. Usa un margine di precaricamento di 200-300 pixel per uno scrolling fluido. Testa il sito su dispositivi mobili, dove il lazy load ha l’impatto maggiore. Monitora i Core Web Vitals dopo l’attivazione per verificare i miglioramenti.

Se noti che il lazy load causa problemi su specifiche pagine o sezioni del sito, puoi disabilitarlo selettivamente aggiungendo classi CSS o URL alla lista di esclusione. L’obiettivo è trovare il giusto equilibrio tra prestazioni e compatibilità.

Conclusioni

Il lazy load è una delle tecniche più efficaci per migliorare le prestazioni di un sito WordPress ricco di immagini. Smush rende l’implementazione semplice e personalizzabile, con opzioni che si adattano a qualsiasi tipo di sito. Configurato correttamente, il lazy load può ridurre il tempo di caricamento iniziale del 50% o più, migliorando l’esperienza utente e i punteggi dei Core Web Vitals.

Se hai bisogno di aiuto per configurare il lazy load o per risolvere problemi di compatibilità sul tuo sito, puoi contattare il nostro team per un’analisi personalizzata delle prestazioni.