Il lazy loading (lazy load), noto anche come caricamento asincrono, è una tecnica di ottimizzazione delle immagini, utilizzata per migliorare i tempi di caricamento di un sito web, una pagina o un’applicazione. Consente di applicare il caricamento asincrono sia ad immagini che a risorse statiche come blocchi di contenuto, CSS, JavaScript.

I vantaggi di questo approccio includono:

• Riduzione del tempo di caricamento iniziale, grazie alla diminuzione del peso della pagina e a una minore attesa per la visualizzazione
• Evitare l’esecuzione di codice non essenziale in quella specifica sessione di navigazione
• Migliore esperienza utente, poiché il contenuto necessario viene fornito rapidamente
• Risparmio di larghezza di banda, fornendo contenuti agli utenti solo se richiesto

Una pagina che non utilizza il lazy loading carica tutte le immagini o risorse immediatamente, visibili o meno a causa della lunghezza della pagina, rallentando i tempi di caricamento.

Utilizzando questa tecnica il browser richiama le risorse non appena l’utente arriva in prossimità di esse, ottimizzando così i tempi di rendering.

A quali siti serve il Lazy Load?

Pur essendo valido in ogni situazione, il lazy loading risulta particolarmente utile per i siti web con pagine piene di foto, immagini, video e grafiche.

Ad esempio, per progetti che mostrano molti screenshot, negozi di abbigliamento o e-commerce in generale, siti di tutorial che usano tante immagini o screenshot il caricamento ritardato può fare una grande differenza.

Va precisato che il lazy loading ottimizza il caricamento delle immagini ma non le immagini stesse. Per questo webmaster e blogger devono sempre caricare foto leggere, ottimizzate in termini di peso e dimensioni.