Acquista ORA Che cos’è il caricamento lazy loading e come usarlo al meglio
Negli ultimi tempi ci stiamo spesso concentrando sui temi della SEO tecnica e, in particolare, sulla rilevanza sempre crescente della velocità del caricamento delle pagine, un fattore ormai cruciale anche per le prestazioni del sito. Oggi continuiamo in questa scia e approfondiamo il discorso sul caricamento lazy loading, uno dei sistemi più frequentemente consigliati in particolare per cercare di aumentare la rapidità di servizio delle immagini: ecco cos’è, come funziona e come evitare errori con il caricamento lento o pigro.
Che cos’è il lazy loading
In parole semplici, il lazy loading è una tecnica basata su un caricamento asincrono delle risorse e sul download di script on demand, ovvero solamente al momento in cui quella determinata porzione di pagina serve all’utente o quando quelle risorse sono effettivamente necessarie per il prosieguo dell’applicazione.
In termini più tecnici, Google definisce il lazy loading (traducibile in italiano come caricamento pigro o lento) come una best practice UX che prevede il differimento del caricamento di contenuti non critici o non visibili, che sono caricati in un momento successivo ai contenuti principali.
A cosa serve il caricamento lento
In teoria, possiamo applicare il caricamento lento a ogni tipo di script, ma nella pratica il sistema di lazy loading trova più frequente utilizzo per le immagini o per i video: ad ogni modo, il suo fine ultimo è alleggerire il peso di tutti i contenuti che possono rendere lenta la fruizione della pagina.
Questa tecnica infatti velocizza il caricamento della pagina e offre una miglior user experience all’utente, che non deve attendere il caricamento di tutte le immagini e gli script presenti on page per iniziare a interagire con il contenuto. Grazie alle istruzioni lazy, il sistema carica in automatico solo la porzione di pagina che serve davvero all’utente in quel momento, consentendo di razionalizzare la velocità di scaricamento e di ottimizzare i tempi di visualizzazione.
Tale strategia diventa fondamentale per assicurare una buona fruizione della pagina a tutti gli utenti, a prescindere dal livello di connessione e dalla capacità della rete, e in particolare a chi naviga con dispositivi mobile dove il caricamento è in genere meno veloce rispetto a device desktop (e infatti Google ha citato il lazy loading anche parlando delle best practices per il mobile-first index)
In questo modo, gli utenti non subiscono eccessivi rallentamenti causati da problemi di connessione e dal peso complessivo del contenuto globale della pagina, ma possono visualizzare le risorse necessarie relative alla parte di pagina che stanno consultando in quel dato momento.
I vantaggi del lazy loading
Di conseguenza, il caricamento pigro presenta alcuni vantaggi interessanti:
- Riduce il tempo di caricamento iniziale e il peso iniziale della pagina e l’utilizzo delle risorse di sistema, tutti fattori che hanno un impatto positivo sulle prestazioni.
- Evita lo spreco di tempo di elaborazione, batteria e altre risorse di sistema. Dopo aver scaricato una risorsa multimediale, il browser deve decodificarla ed eseguire il rendering del suo contenuto nel viewport.
- Rende più rapida l’inizializzazione dell’applicazione.
- Permette di dare priorità ai contenuti principali e di caricare solo quando opportuno le risorse non critiche.
- Riduce il carico globale di banda, perché scarica solo script, risorse e JavaScript necessari in quel momento.
- Riduce lo spreco di dati, perché permette di utilizzare tutta la larghezza di banda per scaricare solo le risorse che sono effettivamente visualizzate dall’utente.
- Offre la possibilità di creare JavaScript personalizzato da mettere in stand-by e scaricare solo in seguito a specifici comportamenti e interazioni dell’utente.
- Consente scaricare script da qualsiasi dominio, anche diverso da quello corrente, e quindi di bypassare la “same-domain policy”.
Inoltre, a partire dall’agosto 2019, Google ha integrato il supporto nativo al lazy loading a livello di browser: nelle più recenti versioni di Chrome è infatti possibile utilizzare un attributo per caricare le risorse in modalità lazy-loading, senza più l’obbligo di scrivere un codice custom o impiegare una libreria JavaScript separata.
Il lazy loading delle immagini
Il campo d’azione dove più frequentemente trova applicazione il lazy loading è il caricamento di video e immagini, che sono come sappiamo risorse spesso molto pesanti, che possono contribuire a generare punti di blocco in fase di rendering – oltre a essere sempre più rilevanti per l’engagement degli utenti.
Grazie al “risparmio energetico” garantito dal lazy loading – come già scrivevamo parlando dei consigli per ottimizzare le immagini per la SEO – l’utente vede immediatamente le risorse presenti nella sezione di pagina che sta consultando, mentre tutto ciò che è fuori schermo viene caricato solo quando effettivamente scrolla la pagina o compie un’azione e raggiunge quella porzione di contenuto.
Esempi di caricamento lazy loading
Tornando alla definizione data da Google, il lazy loading consente di differire il caricamento di contenuti non critici: in riferimento alle immagini, questo aggettivo è spesso sinonimo di “fuori campo” ed è proprio in questo senso che nella stragrande maggioranza dei casi viene utilizzata questa tecnica.
Nel classico esempio di caricamento lento in azione, l’utente raggiunge una pagina e inizia a scorrere mentre legge il contenuto; in questo processo compare un’immagine segnaposto (placeholder), che in pochi istanti viene sostituita dall’immagine finale.
Questa tecnica è molto vantaggiosa soprattutto per gli e-Commerce, perché permette di non dover caricare allo stesso tempo tutti i prodotti della pagina, che spesso sono centinaia o anche più, ma di avviare il download di tali risorse solo in seguito alla richiesta dell’utente, rendendo quindi la pagina più leggera e soprattutto più veloce.
Lazy loading e SEO, i consigli e gli avvertimenti di Google
A fronte di tanti vantaggi ed effetti pratici, ci sono comunque alcune avvertenze rispetto all’uso del lazy loading perché – quando non implementato correttamente – questa tecnica rischia di provocare un impatto negativo sull’indicizzazione delle immagini.
Google ha spiegato che Googlebot è in grado di scansionare, indicizzare e classificare le pagine web correttamente in cui il lazy loading è implementato correttamente, ma in caso contrario possiamo inavvertitamente nascondere contenuti al motore di ricerca, perché in presenza di errori il crawler potrebbe non essere in grado di visionare i contenuti e quindi di processarli adeguatamente.
Il primo consiglio è quindi di evitare il lazy loading di contenuti principali legandolo a interazioni dell’utente (come scorrimento, clicking o digitazione), perché Googlebot non attiverà questi comandi e quindi le risorse non potranno essere analizzate.
Le tecniche per correggere i contenuti caricati tramite caricamento lento
Il team di Mountain View ha poi descritto in una guida specifica i tre passaggi da verificare per usare correttamente il lazy loading ed evitare errori e problemi, a cui si aggiunge l’uso di una sitemap immagini che segnala la presenza della risorsa.
Innanzitutto, dobbiamo caricare il contenuto quando è visibile nell’area viewport, testando l’effettiva funzionalità di questa implementazione. Inoltre, dobbiamo verificare che la pagina supporti il caricamento suddiviso per lo scorrimento continuo (infinite scroll), importante sia per gli utenti che per Google.
Lato utente, infatti, lo scorrimento continuo consente di condividere e interagire con i contenuti; per Google, mostra un link a un punto specifico dei contenuti, anziché alla parte superiore di una pagina a scorrimento continuo. La best practice prevede di fornire un link univoco a ogni sezione che gli utenti possono condividere e caricare direttamente e di usare History API per aggiornare l’URL quando il contenuto è caricato dinamicamente.
Non meno importante è la fase di test delle implementazioni apportate, così da esser certi del loro effettivo funzionamento: Google suggerisce di utilizzare uno script Puppeteer (una libreria Node.js per il controllo di Chrome headless) per testare l’intervento a livello locale
Come implementare il lazy loading delle immagini
Dal punto di vista tecnico, ci sono almeno tre modi per implementare il lazy loading sulle pagine del sito, che richiedono competenze di base sui linguaggi di programmazione; in alternativa, è possibile utilizzare come dicevamo una libreria JavaScript tra le innumerevoli a disposizione o dei plugin specifici su WordPress, con cui personalizzare vari parametri di caricamento per raggiungere l’obiettivo di rimandare il download della risorsa solo in concomitanza dello scroll o dell’azione dell’utente.
Sui browser moderni che implementano il caricamento lento nativo, l’abilitazione avviene utilizzando l’attributo loading su immagini e iframe.
Chi sa manipolare il codice può lavorare a scelta su HTML, JavaScript e CSS: dal suo blog, Marmonti ci illustra tre metodi basilari, semplici e leggeri che necessitano della scrittura di pochissime righe di codice.
Si comincia sull’HTML, utilizzando un “piccolo trucco” per posticipare il caricamento: ovvero, usare l’attributo data-src al posto del classico src, così che il browser – non trovando il percorso dell’immagine – ignori temporaneamente il caricamento
Possiamo anche usare uno script basato su jQuery, che sostituisce l’attributo data-src per tutte le immagini con src per consentire al browser di caricare e mostrare le immagini:
$( document ).ready(function() {
[].forEach.call(document.querySelectorAll(‘img[data-src]’), function(img) {
img.setAttribute(‘src’, img.getAttribute(‘data-src’));
img.onload = function() {
img.removeAttribute(‘data-src’);
};
});
});
Infine, possiamo aggiungere delle specifiche proprietà al CSS per produrre un effetto di apparizione (fade in) delle immagini ed evitare che compaiano in maniera immediata:
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
Una tecnica valida da usare con cura
In conclusione, il lazy loading è davvero una tecnica molto vantaggiosa che consente di ridurre notevolmente il tempo di caricamento iniziale e i payload delle pagine sul sito, in particolare in presenza di immagini e video in aree non immediatamente visibili.
Con questo sistema, gli utenti non dovranno sostenere attività di rete non necessarie e costi di elaborazione delle risorse multimediali che potrebbero effettivamente non vedere mai, ma possono comunque visualizzare tali risorse se lo desiderano e se raggiungono la determinata porzione di pagina.
E quindi, soprattutto per i siti che hanno molte immagini da caricare, il lazy loading è un modo perfetto per ridurre i caricamenti non necessari, a patto di non bloccare le risorse!
