Lazy loading delle immagini: come sfruttarlo in WordPress

Questa guida è stata aggiornata il 9 Gennaio, 2020

Quando sei alle prese con la velocità e le prestazioni del tuo sito web, una delle attività più importanti è l’ottimizzazione delle immagini per ridurre il peso della pagina. Sfruttando il lazy loading delle immagini, potrai ottenere dei risultati straordinari.

In questo articolo, ti spiego che cos’è e come funziona il lazy loading e ti spiegherò come aggiungerlo al tuo sito WordPress. Così, finalmente, anche le tue pagine saranno super veloci, l’esperienza dei visitatori migliorerà e otterrai qualche posizione in più nei risultati di ricerca.

Abbiamo parlato già tante volte di velocità delle pagine e di ottimizzazione delle immagini. Se hai già seguito i nostri consigli e ora completerai l’opera con gli accorgimenti di questo articolo, potrai veramente ottenere un sito web più veloce della luce!

Che cos’è il lazy loading

Lazy loading significa letteralmente “caricamento pigro” ed è una tecnica utilizzata non solo per le immagini, ma anche per il caricamento degli script. In questo articolo, parleremo comunque solo di lazy loading delle immagini.

Questo sistema permette che le immagini presenti in una pagina web vengano caricate solamente quando sono necessarie, ossia solo quando l’utente scorre la pagina fino al punto in cui si trova l’immagine.

Si tratta, perciò, di una sorta di risparmio energetico. Se nessuno può vedere l’immagine, dato che si trova al di fuori dell’area visibile dello schermo, a cosa server utilizzare risorse per caricarla?

E allora, ecco che si sfrutta il lazy loading. Le immagini che vengono caricate all’apertura della pagina sono solo quelle “above the fold”, ossia quelle che si trovano al di sopra del bordo inferiore dello schermo, perciò solo quelle visibili immediatamente.

Se l’utente inizia a scrollare verso il basso, al momento in cui raggiunge il punto in cui si trova un’immagine, essa verrà caricata e diventerà quindi visibile.

I vantaggi del lazy loading delle immagini

Dovendo caricare le immagini solo quando necessario, i contenuti sono disponibili molto più rapidamente e le funzionalità della pagina saranno immediatamente attive.

Questo è molto vantaggioso per la user experience. L’utente avrà una pagina perfettamente funzionante in tempi rapidissimi e potrà interagire subito con il sito.

Sappiamo benissimo quanto l’esperienza dell’utente sia importante, e migliorare la SEO del tuo sito web utilizzando uno strumento che permetta di velocizzare ancor di più le tue pagine può portare solo dei benefici.

Devi però stare molto attento che tutto funzioni alla perfezione e che il lazy loading sia implementato correttamente. In caso contrario, potresti peggiorare la situazione o andare incontro a malfunzionamenti.

Per questo motivo, utilizza solo strumenti affidabili. Eccoti dunque qualche consiglio.

Come implementare il lazy loading delle immagini su WordPress

Per sfruttare il lazy loading delle immagini e ottenere ottimi risultati nelle prestazioni delle tue pagine web, ti suggerisco due plugin molto validi e semplici da usare.

Hanno entrambi delle ottime recensioni e sono gratuiti. Inoltre, vengono aggiornati abbastanza spesso e questo significa che difficilmente verranno abbandonati dagli sviluppatori.

1) a3 Lazy Load

Questo è il plugin più popolare per il lazy loading delle immagini. Se vuoi avere un’anteprima dei risultati, visualizza il test su una pagina con ben 1000 immagini. Abbiamo provato anche a fare un test della velocità di questa pagina e i risultati sono davvero sorprendenti.

Il plugin è molto semplice da utilizzare e configurare. Puoi facilmente scegliere quali elementi devono essere caricati con questo sistema e quando devono essere visualizzati sul browser.

Quando attivi il lazy loading delle immagini, puoi anche scegliere se sfruttarlo solo su post, pagine, widget, thumbnails e gravatar. Inoltre, puoi disattivarlo per determinate immagini.

Con questo plugin, puoi sfruttare il lazy loading anche per il caricamento di altri elementi, come video, iframe.

2) Lazy Load by WP Rocket

Il plugin Lazy Load di WP Rocket (sono gli stessi del noto plugin per velocizzare un sito WordPress) agisce su tutte le immagini nel contenuto di un post, sui thumbnails, widget, avatar e iframe. Il plugin è molto leggero perché non usa librerie JavaScript, ma solamente uno script jQuery.

Puoi impostare anche un thumbnail per sfruttare il lazy loading anche dei video YouTube inseriti con un iframe.

Per disattivare la funzione da determinate pagine, potrai aggiungere alcune righe di codice al file functions.php. Se invece vorrai disattivarlo solo per determinate immagini, potrai aggiungere un attributo specifico al tag <img> dell’immagine da caricare normalmente.

Conclusione

Non ti resta che scegliere quale plugin utilizzare per il lazy loading delle immagini sul tuo sito. In questo modo, otterrai degli ottimi risultati sui tempi di caricamento e sulle prestazioni del tuo sito web.

Conoscevi il lazy loading?

Credi che lo utilizzerai nelle tue pagine?

Lasciaci un commento per farci sapere cosa ne pensi.