Lazy Load e Placeholder con LiteSpeed Cache

Lazy Load e Placeholder con LiteSpeed Cache

Il Lazy Loading è una tecnica fondamentale per l’ottimizzazione delle prestazioni web che consiste nel ritardare il caricamento delle risorse (principalmente immagini e iframe) fino a quando non sono effettivamente necessarie, cioè quando stanno per entrare nel viewport del browser. Senza Lazy Loading, il browser scarica tutte le immagini della pagina immediatamente, anche quelle che si trovano in fondo alla pagina e che l’utente potrebbe non vedere mai.

LiteSpeed Cache offre un’implementazione avanzata del Lazy Loading che va ben oltre la semplice aggiunta dell’attributo loading="lazy". Include placeholder intelligenti, supporto per diverse tipologie di contenuto e opzioni di personalizzazione che permettono di bilanciare perfettamente prestazioni ed esperienza utente.

Perché il Lazy Loading è Importante

Consideriamo un tipico articolo di blog con 10 immagini. Senza Lazy Loading, il browser inizia a scaricare tutte e 10 le immagini contemporaneamente appena la pagina viene caricata. Questo ha diversi effetti negativi:

• Banda sprecata: se l’utente legge solo la prima metà dell’articolo, le immagini nella seconda metà sono state scaricate inutilmente
• Competizione per la banda: il download simultaneo di molte immagini rallenta il caricamento di tutte le risorse, incluse quelle critiche come CSS e JavaScript
• LCP peggiorato: la risorsa più importante (l’immagine above the fold) deve competere con tutte le altre immagini per la banda disponibile
• Consumo dati su mobile: gli utenti su rete cellulare scaricano MB di immagini che non vedranno mai

Con il Lazy Loading, solo le immagini visibili nel viewport vengono caricate immediatamente. Le altre vengono scaricate man mano che l’utente scorre la pagina. Il risultato è un caricamento iniziale molto più veloce e un consumo di banda ottimizzato.

Configurazione del Lazy Loading in LiteSpeed Cache

Per accedere alle impostazioni del Lazy Loading, vai su LiteSpeed Cache > Page Optimization > Media Settings.

Lazy Load Images: imposta su “On”. Questa è l’opzione principale che abilita il caricamento differito per tutte le immagini della pagina. LiteSpeed Cache sostituisce l’attributo src delle immagini con un placeholder e aggiunge il codice JavaScript necessario per caricare l’immagine reale quando si avvicina al viewport.

Lazy Load Iframes: imposta su “On”. Gli iframe (utilizzati per incorporare video YouTube, mappe Google, widget social) sono spesso più pesanti delle immagini. Un singolo iframe YouTube può caricare 500KB-1MB di risorse aggiuntive. Il lazy loading degli iframe ha un impatto enorme sulle prestazioni.

Add Missing Sizes: imposta su “On”. Questa opzione aggiunge automaticamente gli attributi width e height alle immagini che ne sono prive. Questi attributi sono fondamentali per prevenire il layout shift (CLS), uno dei Core Web Vitals: senza dimensioni esplicite, il browser non sa quanto spazio riservare per l’immagine e il layout “salta” quando l’immagine viene caricata.

Tipi di Placeholder

Un placeholder è l’elemento visivo che viene mostrato al posto dell’immagine mentre questa viene caricata. LiteSpeed Cache offre diversi tipi di placeholder:

Placeholder Colore Grigio: il più semplice. L’immagine viene sostituita da un rettangolo grigio delle stesse dimensioni. È leggero e non richiede risorse aggiuntive, ma l’effetto visivo è piuttosto spartano.

Placeholder LQIP (Low Quality Image Placeholder): questa è la scelta consigliata. LQIP genera una versione estremamente piccola e sfocata dell’immagine (solitamente 20-30 byte in formato base64) che viene mostrata mentre l’immagine reale viene caricata. L’effetto è simile a quello che si vede su Instagram e Medium: l’immagine appare inizialmente sfocata e poi si “mette a fuoco” quando il caricamento è completo.

Per abilitare LQIP, imposta Generate LQIP su “On” in LiteSpeed Cache > Page Optimization > Media Settings. La generazione dei LQIP avviene tramite QUIC.cloud, come per l’ottimizzazione delle immagini.

LQIP Quality: puoi scegliere tra LQIP a colori e LQIP in bianco e nero. La versione a colori è visivamente più gradevole ma leggermente più pesante. Per la maggior parte dei siti, LQIP a colori è la scelta migliore.

Lazy Load e Immagini Above the Fold

Un errore comune è applicare il Lazy Loading a tutte le immagini, incluse quelle visibili immediatamente nella parte superiore della pagina (“above the fold”). Questo è controproducente perché ritarda il caricamento delle immagini più importanti, peggiorando il LCP.

LiteSpeed Cache gestisce automaticamente questo problema con l’opzione Lazy Load Image Excludes. Puoi escludere immagini specifiche dal Lazy Loading inserendo:

• L’URL completo o parziale dell’immagine
• Una classe CSS (es. no-lazy)
• Un attributo HTML specifico

È fondamentale escludere dal Lazy Loading:

• Il logo del sito
• L’immagine hero (banner principale)
• Le prime 1-2 immagini visibili senza scorrere
• Le immagini di sfondo critiche

Per le immagini above the fold, è consigliabile aggiungere l’attributo fetchpriority="high" nel codice HTML, che indica al browser di dare priorità al loro scaricamento. LiteSpeed Cache non aggiunge automaticamente questo attributo, quindi potresti doverlo fare manualmente nel tema o tramite un filtro WordPress.

Lazy Loading per Immagini di Sfondo CSS

Le immagini di sfondo definite nel CSS (background-image) non sono gestite dal Lazy Loading standard basato sull’attributo loading o sull’Intersection Observer. LiteSpeed Cache offre una soluzione specifica per questo caso.

L’opzione Lazy Load Background Images analizza il CSS della pagina e sostituisce le immagini di sfondo con un placeholder, caricando l’immagine reale solo quando l’elemento entra nel viewport.

Questa funzionalità è particolarmente utile per siti che utilizzano ampiamente immagini di sfondo, come quelli costruiti con page builder (Elementor, Divi, WPBakery). Questi builder utilizzano spesso immagini di sfondo CSS per sezioni, colonne e widget.

Lazy Loading dei Video

LiteSpeed Cache può anche applicare il Lazy Loading ai video incorporati. Questo è particolarmente importante per i video YouTube, che caricano una quantità significativa di risorse esterne.

Quando il Lazy Loading degli iframe è attivo, un video YouTube incorporato viene sostituito da una miniatura statica. Solo quando l’utente clicca sulla miniatura, il player YouTube viene effettivamente caricato. Questo può risparmiare 500KB-1MB di risorse per ogni video incorporato.

Un’alternativa ancora più efficace è utilizzare la funzionalità “YouTube Facade” (se disponibile nella tua versione del plugin), che mostra solo la thumbnail del video con un pulsante play, senza caricare nulla da YouTube fino al click.

Impatto sul CLS (Cumulative Layout Shift)

Il Lazy Loading, se implementato scorrettamente, può peggiorare il CLS, una delle metriche Core Web Vitals. Il CLS misura quanto il layout della pagina “salta” durante il caricamento, e le immagini caricate in ritardo senza dimensioni riservate sono una causa comune di layout shift.

LiteSpeed Cache mitiga questo problema in diversi modi:

• Add Missing Sizes: aggiunge width e height alle immagini, permettendo al browser di riservare lo spazio corretto
• Placeholder con dimensioni: i placeholder mantengono le stesse dimensioni dell’immagine finale
• LQIP: il placeholder sfocato ha lo stesso aspect ratio dell’immagine finale, evitando salti

Per verificare il CLS del tuo sito, usa Google PageSpeed Insights o l’estensione Chrome “Web Vitals”. Un CLS inferiore a 0.1 è considerato buono.

Configurazione Avanzata

LiteSpeed Cache offre alcune opzioni avanzate per il Lazy Loading:

Lazy Load Image Parent Class Excludes: esclude dal Lazy Loading tutte le immagini che si trovano all’interno di un elemento con una specifica classe CSS. È utile per escludere intere sezioni del sito, come il blocco hero o la sezione header.

Lazy Load Image URI Excludes: esclude dal Lazy Loading tutte le immagini sulle pagine specificate. È utile per pagine dove il Lazy Loading causa problemi, come landing page o pagine con gallerie particolari.

Lazy Load Noscript: aggiunge un tag <noscript> con l’immagine originale per i browser con JavaScript disabilitato. Importante per l’accessibilità e per i crawler dei motori di ricerca.

Lazy Loading e SEO

Una preoccupazione comune riguarda l’impatto del Lazy Loading sulla SEO. In passato, il Lazy Loading poteva causare problemi perché Googlebot non eseguiva JavaScript e quindi non vedeva le immagini lazy-loaded.

Nel 2026, questo non è più un problema. Googlebot esegue JavaScript in modo completo e può “vedere” le immagini lazy-loaded. Inoltre, Google stessa raccomanda il Lazy Loading come best practice per le prestazioni web.

Tuttavia, è importante:

• Non applicare il Lazy Loading all’immagine principale di un articolo (quella che vuoi che appaia nei risultati di ricerca)
• Mantenere il tag <noscript> come fallback
• Assicurarsi che le immagini abbiano attributi alt descrittivi
• Verificare con Google Search Console che le immagini vengano correttamente indicizzate

Misurazione dell’Impatto

Per misurare l’impatto del Lazy Loading sulle prestazioni del tuo sito, confronta queste metriche prima e dopo l’attivazione:

• Numero di richieste al caricamento iniziale: con il Lazy Loading, dovrebbe diminuire significativamente
• Peso della pagina al caricamento iniziale: la riduzione può essere del 50-80% su pagine ricche di immagini
• LCP: dovrebbe migliorare poiché le risorse critiche hanno più banda disponibile
• Time to Interactive: dovrebbe migliorare poiché il browser ha meno risorse da processare

Su un sito con molte immagini (blog fotografico, e-commerce, portfolio), il Lazy Loading può ridurre il tempo di caricamento iniziale del 40-60%.

Problemi Comuni e Soluzioni

Immagini che non appaiono: se alcune immagini non si caricano con il Lazy Loading attivo, verifica che non ci siano conflitti con altri plugin che gestiscono le immagini. Controlla anche la console del browser per errori JavaScript.

Flash di placeholder: se i placeholder sono troppo visibili e fastidiosi, considera di passare al LQIP per un effetto più gradevole.

LCP peggiorato: se il LCP peggiora dopo l’attivazione del Lazy Loading, è probabile che l’immagine LCP (la più grande above the fold) sia soggetta al Lazy Loading. Escludila esplicitamente.

Layout shift: se noti “salti” nel layout, attiva “Add Missing Sizes” e verifica che tutte le immagini abbiano dimensioni esplicite.

Conclusione

Il Lazy Loading è una tecnica semplice ma estremamente efficace per migliorare le prestazioni del tuo sito WordPress. LiteSpeed Cache offre un’implementazione matura e ricca di funzionalità che va ben oltre il semplice loading="lazy" nativo del browser. Con la giusta configurazione — placeholder LQIP, esclusioni per le immagini above the fold e dimensioni esplicite — puoi ottenere un significativo miglioramento dei tempi di caricamento e dei Core Web Vitals senza compromettere l’esperienza utente.

Ottimizzare il caricamento delle immagini richiede esperienza e attenzione ai dettagli. G Tech Group configura LiteSpeed Cache in modo professionale su ogni sito ospitato sul nostro hosting WordPress ottimizzato. Contattaci per scoprire come possiamo velocizzare il tuo sito.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

• Come Installare Elementor su WordPress
• Come Installare e Configurare WP Rocket
• Come Installare e Configurare SEOPress
• Come Installare e Configurare UpdraftPlus