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

Aggiornato il da | Disclaimer I nostri contenuti sono supportati dai lettori. Questo significa che se clicchi su uno dei link ai servizi che raccomandiamo e poi effettui un acquisto, è possibile che ci venga accreditata una commissione. È così che finanziamo questo sito web, lo manteniamo attivo e ti forniamo continuamente le informazioni più affidabili.

Lazy loading delle immagini come sfruttarlo in WordPress

In questo articolo scoprirai che cos’è il lazy loading e come aggiungere questa funzionalità al tuo sito web.

Con il lazy loading le pagine del tuo sito web caricheranno velocemente, l’esperienza dei visitatori migliorerà e otterrai qualche posizione in più nei risultati di ricerca.

Indice dei contenuti
Visualizza altro

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.

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

Lazy loadin delle immagini - 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

Lazy loading delle immagini - Lazy Load 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.

Guide correlate che ti potrebbero interessare:

Domande? Lascia un commento!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati*