Il “lazy loading” è una tecnica usata soprattutto nello sviluppo di siti web e applicazioni per caricare le risorse (come immagini, video, o parti di una pagina) solo quando sono necessarie, anziché caricarle tutte in una volta.
Immagina di avere una pagina web con molte immagini. Se il lazy loading non è abilitato, tutte le immagini verrebbero scaricate e visualizzate fin dall’inizio, anche quelle che l’utente potrebbe non vedere mai perché magari sono in fondo alla pagina e l’utente non scrollerà mai così in basso. Questo potrebbe rallentare il caricamento della pagina e utilizzare più dati, specialmente su dispositivi mobili.
Con il lazy loading, invece, le immagini vengono caricate solo quando l’utente sta per vederle. Ad esempio, quando scorrere la pagina e l’immagine entra nell’area visibile del browser. Questo rende il caricamento più efficiente e veloce per l’utente, migliorando l’esperienza complessiva di navigazione sul sito o nell’applicazione.
la maggior parte dei browser supporta questa funzionalità ma per essere sicuri possiamo usare un javascript per controllare il supporto del browser e nel caso non ci sia verrà aggiunto in automatico uno script aggiuntivo per abilitare il supporto.
In questo caso quindi usiamo la libreria “lazysizes”, che fornisce un caricamento lento ad alte prestazioni e ottimizzato per la SEO per immagini, comprese immagini reattive e normali, iframe e altro.
Quando inclusa in una pagina web, la libreria lazysizes carica in modo intelligente le immagini mentre l’utente scorre la pagina e dà la priorità alle immagini che l’utente incontrerà presto. Ti consente di aggiungere la classe “lazyload” alle immagini che dovrebbero essere caricate in modo lento e modificare l’attributo “src” in “data-src”. Ciò consente alla libreria di rinviare il caricamento delle immagini fuori schermo finché non sono necessarie, migliorando le prestazioni riducendo la quantità di risorse che devono essere caricate e analizzate al caricamento iniziale della pagina. La libreria supporta inoltre il caricamento di immagini reattive, il calcolo automatico dell’attributo “dimensioni” per immagini reattive e la possibilità di condividere query multimediali per attributi multimediali con CSS, aiutando a separare il layout (CSS) dal contenuto/struttura (HTML).
In sintesi, includendo la libreria lazysizes nella tua pagina web, puoi implementare il caricamento lento per immagini, iframe e altro, migliorando le prestazioni e l’esperienza utente del tuo sito web anche per i browser che non supportano nativamente il lazy loading.
Come si implementa
Per implementare la funzionalità lazy loading bisogna prima impostare un attributo data-src per ogni immagine con la sua relativa URL da caricare e impostare l’attributo loading con la parola lazy.
<img data-src="url-immagine" loading="lazy">
Poi successivamente aggiungere a fine pagina lo script che implementa la funzionalità:
<script type="text/javascript">
if ('loading' in HTMLImageElement.prototype) {
//Native Lazy Loading Supported!
console.log('lazy loading supportato!')
const images = document.querySelectorAll('img[loading="lazy"]')
images.forEach(img => {
img.src = img.dataset.src;
})
} else {
// Not supported!
console.log('lazy loading non supportato!')
const script = document.createElement('script')
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js';
document.body.appendChild(script);
}
</script>Lo script fornito controlla se il browser supporta il lazy loading nativo per le immagini.
In tal caso, imposta l’attributo src delle immagini sul relativo valore data-src, abilitando il lazy loading.
Se il lazy loading nativo non è supportato aggiunge dinamicamente la libreria lazysizes alla pagina per abilitarlo.