Lazy Loading in WordPress: caricare le immagini solo quando servono

Lazy Loading in WordPress: caricare le immagini solo quando servono

Il lazy loading è una delle tecniche più importanti per rendere più veloci i siti WordPress ricchi di immagini. Soprattutto articoli di blog lunghi, guide, portfolio, gallerie, pagine prodotto o landing page contengono spesso molte immagini. Senza ottimizzazione, al primo caricamento della pagina il browser dovrebbe caricare contemporaneamente molti file, anche se i visitatori non vedono ancora quelle immagini.

Ed è proprio qui che entra in gioco il lazy loading. Immagini, video o contenuti incorporati non vengono caricati subito completamente, ma solo quando si avvicinano all’area visibile del browser. In questo modo la parte superiore della pagina può apparire più rapidamente, il consumo di dati diminuisce e il sito risulta molto più reattivo per i visitatori.

Perché il lazy loading è così importante

Immagini un lungo articolo con 20 immagini. Senza lazy loading, il browser cerca di scaricare tutte le immagini direttamente durante il caricamento della pagina. Questo può aumentare notevolmente il tempo di caricamento, soprattutto su dispositivi mobili o con connessioni Internet più lente.

Con il lazy loading vengono inizialmente caricati solo i contenuti importanti per l’area visibile. Le immagini più in basso nella pagina vengono caricate successivamente, non appena il visitatore scorre. Questo alleggerisce il caricamento iniziale della pagina.

I vantaggi tipici del lazy loading sono:

• caricamento iniziale della pagina più veloce: Devono essere caricati subito meno file.
• minor consumo di dati: Le immagini non visualizzate potrebbero non essere caricate affatto.
• migliore esperienza utente mobile: Particolarmente importante con le connessioni mobili.
• minor carico per il browser: Il browser non deve elaborare subito tutti i media.
• valori di performance potenzialmente migliori: Soprattutto su pagine ricche di immagini.

Come funziona tecnicamente il lazy loading

Con il lazy loading, il browser o uno script decide quali immagini devono essere caricate subito e quali successivamente. I browser moderni supportano a questo scopo l’attributo HTML nativo loading="lazy".

Un esempio semplice:

<img src="beispielbild.webp" alt="Immagine di esempio in un articolo WordPress" loading="lazy">

Questo attributo comunica al browser che l’immagine può essere caricata in modo differito. Il browser decide quindi autonomamente quando è il momento giusto per caricarla.

Esistono inoltre soluzioni di lazy loading basate su JavaScript. Queste vengono spesso utilizzate dai plugin di performance per ottimizzare anche contenuti che non sono completamente coperti dal lazy loading nativo del browser.

Lazy loading in WordPress dalla versione 5.5

Dalla versione WordPress 5.5, il lazy loading per le immagini è generalmente incluso nel core di WordPress. WordPress aggiunge automaticamente l’attributo loading="lazy" alle immagini idonee. In questo modo molti siti beneficiano già di un’ottimizzazione di base senza plugin aggiuntivi.

Ciò non significa però che ogni plugin di lazy loading sia superfluo. La funzione di base di WordPress si concentra principalmente sulle immagini normali nel contenuto. I plugin avanzati possono, a seconda delle funzionalità, caricare in modo differito anche iframe, video, immagini di sfondo, slider, immagini WooCommerce o contenuti incorporati.

Cosa non dovrebbe essere caricato con lazy loading?

Il lazy loading è molto utile, ma non è adatto a ogni immagine. Particolarmente importante è l’immagine visibile più grande nella parte superiore della pagina. Può trattarsi ad esempio di un’immagine hero, di una grande immagine in evidenza o di un’importante immagine prodotto.

Se questa immagine più importante viene caricata in modo differito, il caricamento della pagina può addirittura peggiorare. Il browser carica quindi troppo tardi un elemento centrale, il che può influire negativamente sul Largest Contentful Paint, abbreviato LCP.

Di norma, non dovrebbero essere caricati con lazy loading:

• immagini hero nella parte superiore,
• l’immagine in evidenza più importante sopra l’area visibile,
• loghi nell’header,
• immagini prodotto importanti direttamente all’avvio della pagina,
• immagini slider visibili nel primo viewport.

Above the Fold: l’area visibile conta per prima

Il termine Above the Fold descrive l’area di un sito web che i visitatori vedono senza scorrere. Questa area è particolarmente importante perché determina la prima impressione. Se titolo, introduzione, immagine principale e navigazione appaiono rapidamente, il sito risulta più veloce e professionale.

Il lazy loading aiuta a dare priorità all’area visibile. I contenuti più in basso vengono rimandati, così il browser utilizza prima le proprie risorse per ciò che i visitatori vedono immediatamente.

Per buone prestazioni dovrebbe quindi:

• non ritardare inutilmente l’immagine più importante nella parte superiore,
• caricare con lazy loading le immagini più in basso,
• ottimizzare le grandi immagini di sfondo,
• evitare slider inutili,
• mantenere CSS e JavaScript snelli,
• indicare correttamente le dimensioni delle immagini.

Lazy loading e Core Web Vitals

Il lazy loading può avere un effetto positivo sui tempi di caricamento e sull’esperienza utente. Particolarmente rilevanti sono i Core Web Vitals di Google. È però importante una corretta classificazione: il valore in passato spesso citato First Input Delay, abbreviato FID, è stato sostituito nel marzo 2024 da Interaction to Next Paint, abbreviato INP, come metrica Core Web Vitals per la reattività.

Il lazy loading influisce soprattutto sulla rapidità con cui i contenuti visibili vengono caricati e su quanto il browser viene sollecitato all’avvio della pagina. Può quindi contribuire indirettamente a migliorare l’esperienza utente. Per buoni valori Core Web Vitals sono però decisivi diversi fattori:

• LCP: L’elemento visibile più importante dovrebbe apparire rapidamente.
• CLS: Il layout non dovrebbe spostarsi durante il caricamento.
• INP: La pagina dovrebbe reagire rapidamente anche alle interazioni.
• Tempo di risposta del server: L’hosting dovrebbe rispondere in modo rapido e stabile.
• JavaScript: Troppo JavaScript può ritardare le interazioni.

Il lazy loading è quindi un elemento importante, ma non una soluzione unica per tutti i problemi di performance.

Lazy loading per immagini

Le immagini sono il caso d’uso più frequente del lazy loading. Soprattutto in articoli lunghi, gallerie o liste di prodotti, l’effetto può essere chiaramente percepibile. WordPress gestisce già molto automaticamente, a condizione che le immagini siano inserite correttamente tramite la libreria media e l’editor.

Affinché il lazy loading funzioni bene, le immagini dovrebbero inoltre essere ottimizzate:

• utilizzare dimensioni immagine adeguate,
• comprimere la dimensione del file,
• valutare WebP o altri formati moderni,
• curare correttamente i testi alternativi,
• far emettere correttamente larghezza e altezza,
• non integrare immagini originali inutilmente grandi.

Il lazy loading non sostituisce l’ottimizzazione delle immagini. Un’immagine troppo grande rimane troppo grande, anche se viene caricata più tardi.

Lazy loading per YouTube, Vimeo e iframe

I video incorporati da YouTube, Vimeo o altre piattaforme possono influire fortemente sul tempo di caricamento. Spesso, già al caricamento della pagina, vengono caricati script esterni, immagini di anteprima, componenti di tracciamento e file del player, anche se il visitatore non avvia ancora il video.

Molti plugin di performance offrono quindi un lazy loading specifico per iframe o video. Un metodo particolarmente efficace consiste nel sostituire il player incorporato con un’immagine di anteprima. Il vero player video viene caricato solo quando il visitatore clicca attivamente.

Questo può offrire grandi vantaggi, soprattutto su pagine con diversi video incorporati.

Lazy loading per immagini di sfondo

Le immagini di sfondo vengono spesso integrate tramite CSS. Questo riguarda ad esempio aree hero, sezioni di design, riquadri o sezioni create con page builder. Le funzioni native di lazy loading del browser non si applicano sempre automaticamente a queste immagini di sfondo CSS.

Alcuni plugin di performance possono caricare in modo differito anche le immagini di sfondo. Se ciò sia sensato dipende dal punto in cui vengono utilizzate. Le immagini di sfondo nella parte superiore visibile non dovrebbero essere ritardate. Le immagini di sfondo più in basso nella pagina possono invece essere buone candidate per il lazy loading.

Plugin per lazy loading avanzato

Se la funzione di base di WordPress non è sufficiente, i plugin di performance possono offrire possibilità aggiuntive. Soluzioni note sono ad esempio WP Rocket, Autoptimize, LiteSpeed Cache o altri plugin di ottimizzazione. Quale soluzione sia più adatta dipende dal suo hosting, dal tema, dal sistema di cache e dai plugin utilizzati.

I plugin avanzati di lazy loading possono, a seconda delle funzionalità:

• caricare immagini in modo differito,
• caricare iframe con lazy loading,
• sostituire video YouTube con immagini di anteprima,
• ottimizzare immagini di sfondo,
• definire eccezioni per determinate immagini,
• adattare thresholds o distanze di caricamento,
• migliorare il lazy loading per slider o gallerie.

Faccia attenzione a non attivare contemporaneamente più plugin con funzioni di lazy loading simili. Una doppia ottimizzazione può far sì che le immagini non appaiano o vengano caricate troppo tardi.

Testare il lazy loading

Dopo l’attivazione o la modifica del lazy loading, dovrebbe testare il suo sito web. Controlli non solo la homepage, ma anche articoli del blog, pagine prodotto, gallerie, landing page e visualizzazioni mobili.

Può verificare il lazy loading, tra l’altro, con gli strumenti per sviluppatori del browser:

1. Apra il suo sito web nel browser.
2. Apra gli strumenti per sviluppatori con F12 oppure con clic destro e Ispeziona.
3. Passi alla sezione Rete.
4. Ricarichi la pagina.
5. Osservi quando vengono caricate le immagini.
6. Scorra lentamente verso il basso e verifichi se vengono caricate ulteriori immagini.

Inoltre può utilizzare strumenti come PageSpeed Insights, Lighthouse o WebPageTest per verificare il tempo di caricamento e le indicazioni sui Core Web Vitals.

Errori tipici con il lazy loading

Il lazy loading è semplice da attivare, ma non sempre viene configurato automaticamente in modo perfetto. Errori frequenti sono:

• L’immagine hero viene caricata con lazy loading: L’immagine più importante appare troppo tardi.
• Sistemi di lazy loading duplicati: WordPress, tema e plugin lavorano contemporaneamente l’uno contro l’altro.
• Problemi con gli slider: Gli slider caricano le immagini in modo errato o ritardato.
• Immagini di sfondo mancanti: Le immagini CSS non vengono gestite correttamente.
• Il layout si sposta: Mancano le dimensioni delle immagini e si verificano spostamenti.
• I video si caricano comunque subito: Gli iframe non vengono ottimizzati.
• La visualizzazione mobile non viene controllata: I problemi emergono solo sugli smartphone.

Se dopo un’ottimizzazione mancano immagini, appaiono in ritardo o il layout si sposta, dovrebbe controllare le impostazioni di lazy loading, la cache e la compatibilità del tema.

Lazy loading e visitatori mobili

I visitatori mobili beneficiano in modo particolare del lazy loading. Gli smartphone oggi hanno spesso hardware veloce, ma le connessioni mobili non sono sempre stabili. Ogni file caricato inutilmente costa tempo, volume di dati ed energia.

Per le prestazioni mobili sono particolarmente importanti:

• file immagine piccoli,
• dimensioni responsive corrette delle immagini,
• lazy loading per immagini più in basso,
• pochi script esterni,
• nessun caricamento inutile di video,
• hosting veloce e buona cache.

Soprattutto negli articoli lunghi con molte immagini, il lazy loading può fare la differenza tra una pagina mobile pesante e una piacevole da usare.

SEO e lazy loading

Il lazy loading può supportare indirettamente la SEO, perché può migliorare i tempi di caricamento, l’esperienza utente e la qualità tecnica. I motori di ricerca non preferiscono in modo generico un determinato metodo di lazy loading. È decisivo che i contenuti importanti siano visibili, raggiungibili e correttamente presenti nell’HTML.

Dal punto di vista SEO dovrebbe assicurarsi che:

• le immagini importanti siano integrate correttamente nell’HTML,
• siano presenti testi alternativi,
• le immagini non vengano nascoste ai motori di ricerca da JavaScript difettoso,
• l’area visibile venga caricata rapidamente,
• i problemi Core Web Vitals vengano controllati regolarmente,
• nessun contenuto importante diventi visibile solo tramite azioni utente problematiche.

GEO: perché il lazy loading è rilevante anche per i moderni sistemi di ricerca

GEO, cioè Generative Engine Optimization, riguarda soprattutto la reperibilità e la comprensibilità dei contenuti per i sistemi di ricerca supportati dall’intelligenza artificiale. Un sito tecnicamente pulito sostiene questo processo, perché i contenuti dovrebbero essere raggiungibili in modo affidabile e utilizzabili rapidamente.

Il lazy loading può contribuire a distribuire in modo rapido e stabile anche contenuti estesi con molte immagini. È tuttavia importante che immagini, testi alternativi e contenuti rimangano integrati in modo semanticamente corretto. Un sito veloce da solo non basta. I contenuti devono continuare a essere comprensibili, strutturati e pienamente accessibili.

Procedura consigliata

1. Verificare la versione di WordPress: Le versioni moderne di WordPress includono già il lazy loading per le immagini.
2. Testare il sito web: Controlli quali immagini vengono caricate subito e quali successivamente.
3. Escludere l’immagine hero: L’immagine superiore più importante non dovrebbe essere ritardata.
4. Ottimizzare le immagini: Migliorare dimensione del file, dimensioni e formato.
5. Verificare gli iframe: Caricare con lazy loading YouTube, Vimeo e incorporamenti esterni se necessario.
6. Utilizzare un solo sistema: Eviti più funzioni di lazy loading concorrenti.
7. Testare la visualizzazione mobile: Controllare soprattutto su smartphone e tablet.
8. Misurare i Core Web Vitals: Utilizzare PageSpeed Insights o Lighthouse per il controllo.

Domande frequenti sul lazy loading in WordPress

Che cos’è il lazy loading?

Lazy loading significa che immagini, video o iframe vengono caricati solo quando sono necessari. I contenuti più in basso nella pagina non vengono quindi caricati subito al primo accesso alla pagina.

WordPress ha già integrato il lazy loading?

Sì. Dalla versione WordPress 5.5, WordPress aggiunge di default il lazy loading nativo alle immagini idonee tramite l’attributo loading="lazy".

Ho comunque bisogno di un plugin di lazy loading?

Dipende dal suo sito web. Per contenuti semplici, la funzione di base di WordPress è spesso sufficiente. Per iframe, video, immagini di sfondo, slider o ottimizzazioni speciali, un plugin di performance può essere utile.

La prima grande immagine dovrebbe essere caricata con lazy loading?

Di norma no. L’immagine visibile più importante nella parte superiore dovrebbe essere caricata rapidamente, in modo che il caricamento della pagina non venga ritardato.

Il lazy loading migliora automaticamente il mio posizionamento su Google?

Non automaticamente. Il lazy loading può migliorare il tempo di caricamento e l’esperienza utente. Questo può contribuire indirettamente alla qualità tecnica, ma non sostituisce buoni contenuti, una struttura pulita e ulteriori ottimizzazioni delle performance.

Il lazy loading può causare problemi?

Sì, se è configurato in modo errato. Problemi tipici sono immagini mancanti, immagini hero caricate troppo tardi, spostamenti del layout o conflitti tra più plugin di ottimizzazione.

Qual è la differenza tra FID e INP?

FID era in precedenza una metrica Core Web Vitals per il primo ritardo di input. Da marzo 2024 FID è stato sostituito da INP, che valuta in modo più completo la reattività di una pagina.