Cos’è il lazy loading e come usarlo sul tuo sito web

Abbiamo parlato già tante volte di velocità delle pagine e di come ottimizzare il peso delle immagini. Se hai già seguito i miei consigli fin qui, allora adesso completa l’opera aggiungendo il lazy loading al tuo sito web.

Vedrai che così potrai veramente ottenere un sito web più veloce della luce!

A proposito, se sei alle prime armi in termini di performance, ti consiglio di leggere la mia guida su come velocizzare un sito web.

Ma vediamo adesso cosa significa lazy loading.

Cosa significa lazy loading e come funziona

Lazy loading significa letteralmente “caricamento pigro” ed è una tecnica utilizzata non solo per le immagini, ma anche per il caricamento degli script esterni.

Quando parliamo di file immagine, il lazy loading 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.

Come implementare il lazy loading su WordPress

Per implementare 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.

Prima di installarli, però, controlla il plugin di cache che già usi sul tuo sito. Molto spesso, infatti, questi plugin hanno già una funzione integrata per il lazy loading. Attivare sia questa funzione, sia il plugin apposito, potrebbe rallentare in modo drastico il tuo sito e anche causare degli errori.

Valuta, quindi, se il tuo plugin già ti soddisfa, altrimenti disattiva quella funzione prima di utilizzare uno dei due plugin che ti suggerisco.

Questi 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

A3 Lazy Load è 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 articoli, 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 WP Rocket per velocizzare un sito WordPress) agisce su tutte le immagini nel contenuto di un post, sui thumbnails, widget, gravatar 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.