Cos’è il Lazy Loading?
Quante volte vi è capitato di aprire un sito web e dover attendere un’eternità prima che la pagina fosse effettivamente pronta all’uso? Non è raro trovare pagine con una velocità di caricamento molto lenta, che non invogliano assolutamente a proseguire la navigazione.
Questo avviene perché il browser carica tutte le risorse necessarie alla visualizzazione e al funzionamento della pagina, anche se queste non sono immediatamente visibili all’apertura del sito web. Questi ritardi nei caricamenti fanno spesso perdere visitatori e di conseguenza punti preziosi nella valutazione dell’efficienza della nostra pagina web agli occhi di Google.
La velocità di caricamento di un sito web è un parametro fondamentale per garantire non solo un buon posizionamento dal punto di vista della SERP, ma anche una buona navigazione. Esistono diversi modi di intervenire per migliorare l’efficienza del caricamento di una pagina e oggi ne presentiamo uno:
Il Lazy Loading: (caricamento differito) è una tecnica di ottimizzazione utilizzata nelle pagine web per ritardare il caricamento dei contenuti, come immagini e video, che non sono immediatamente visibili all’apertura di una pagina. Questi elementi, infatti, si posizionano nella porzione così detta “Above the fold”. Con questa tecnica sarà possibile ottimizzare il download delle risorse necessarie a visualizzare immediatamente questa sezione di pagina.
Il caricamento lento è semplicemente uno script inserito nel codice della pagina che fa sì che le immagini e i file video non necessari alla visualizzazione e al funzionamento del viewport (la parte visibile dello schermo), vengano caricati solo quando l’utente arriva in prossimità di queste risorse. Questa tecnica viene spesso utilizzata come parte dell’ottimizzazione dei servizi tecnici SEO per migliorare le prestazioni di un sito.
Tutto questo si ottiene caricando un placeholder al posto dell’elemento multimediale non presente nella prima parte della pagina, che andrà poi a sostituirsi con le immagini complete quando entreranno all’interno del viewport.
Il caricamento delle risorse che vengono “ritardate” sarà, appunto, solamente rimandato al momento in cui queste saranno effettivamente necessarie, per esempio durante lo scroll della pagina. Non ha senso precaricare un’immagine che si trova in fondo alla pagina web, nel momento stesso in cui apriamo il sito, anche perché questo andrebbe a rallentare il caricamento di tutte le risorse e ad incidere negativamente sulla velocità del sito e di conseguenza sui Core Web Vitals.
Tutti i vantaggi per le immagini e video
Ma come si implementa il lazy loading all’interno di una pagina web?
Alcune librerie Javascript (Vimeo LazyLoad, Youtube LazyLoad, lazyframe.js, LazyTube) implementano automaticamente questo attributo ma in questo modo siamo costretti ad includere un codice esterno che può comportare dei rallentamenti al caricamento pagina. Per ovviare a questa problematica è stato introdotto il lazy loading nativo, ossia il “caricamento pigro” già presente all’interno dei browser per immagini e iframe. Purtroppo, questa tecnica non è supportata da tutti i browser, ma presto diventerà uno standard.
Le immagini, essendo tra le componenti che influiscono maggiormente sui tempi di caricamento, possono generare blocchi del rendering.
I 3 casi più incisivi nei quali è possibile implementare il lazy loading:
- Alle Immagini all’interno di tag <img>
- Alle immagini di sfondo
- Nei video: esattamente come per le immagini anche i video vengono solitamente caricati con l’elemento <video>
Ma andiamo nel dettaglio mostrando un esempio pratico di implementazione del lazy loading su un’immagine caricata all’interno di un tag “img”:
<img src="https://nome_immagine.it/logo.png" />L’obiettivo è quello di fare in modo che il browser non carichi subito questa risorsa ma lo faccia successivamente. Per farlo è necessario nascondere l’attribuito src, così che il browser non trovi il collegamento dell’immagine da caricare e passi all’elemento successivo.
Basta quindi modificare il nome dell’attributo src, scrivendo per esempio data-src.
<img data-src="https://nome_immagine.it/logo.png" />Il passo successivo è fare in modo che, una volta caricate tutte le altre risorse, il browser torni a caricare quelle rimaste in sospeso. Per farlo è necessario l’utilizzo di Javascript.
Dobbiamo anzitutto definire un evento che verrà eseguito dalla pagina una volta caricata:
window.onload = function() {
// Codice da eseguire
};Successivamente definiamo una variabile che conterrà tutte le immagini con l’attributo che gli abbiamo assegnato: “data-src”
window.onload = function() {
var images = document.querySelectorAll("img[data-src]");
};Definiamo una funziona che verrà eseguita per ogni immagine:
window.onload = function() {
var images = document.querySelectorAll("img[data-src]");
images.forEach(function(image) {
// Codice da eseguire per ogni immagine
});
};Questa funzione prende l’attributo “data-src” per inserirlo in quello “src”
window.onload = function() {
var images = document.querySelectorAll("img[data-src]");
images.forEach(function(image) {
var datasrc = image.getAttribute('data-src');
image.setAttribute('src', datasrc);
});
};Tra i numerosi vantaggi che il lazy loading può dare, sono inclusi:
- diminuzione del tempo di caricamento iniziale e conseguentemente anche una riduzione dei tempi di attesa
- miglior esperienza utente
- risparmio della larghezza di banda (capacità di un canale di trasmettere dati), dal momento che agli utenti vengono forniti solo i contenuti necessari in quel preciso momento
Accanto al valore “lazy” è possibile aggiungere i seguenti valori:
eager: il browser carica l’oggetto direttamente quando viene richiamata la pagina.
auto: è il browser a decidere se l’oggetto va caricato immediatamente o in ritardo.
Al momento, il lazy loading non funziona con Safari (né in macOS, né in iOS).
Vantaggi lato SEO
E per quanto riguarda il posizionamento? non possiamo non fare riferimento alla SEO; sappiamo che per Google la velocità di caricamento è un fattore di ranking molto importante.
I vantaggi principali che il lazy loading può portare alla SEO riguardano:
Tempi di caricamento della pagina più veloci: più veloce è il tuo sito web, più guadagnerà visibilità lato SEO.
Better User Experience: Un sito che carica velocemente fornisce anche una migliore user experience agli utenti durante la navigazione, soprattutto da mobile.
Consiglio: Fare una verifica delle immagini dopo che il lazy load è stato implementato, utilizzando “Search as Google” nella sezione ricerca per indicizzazione Google search console. Se le immagini appariranno nel codice sorgente non ci saranno problemi.
Conclusioni
Abbiamo compreso quanto il “caricamento pigro” sia assolutamente necessario per ottimizzare correttamente il caricamento della tua pagina web. È molto vantaggioso soprattutto per quei siti, come ecommerce o blog, che incorporano molte immagini ad alta risoluzione e molti video. Una pagina che non utilizza il lazy loading caricherà i contenuti tutti assieme senza criteri di visibilità e questo, ovviamente, inciderà notevolmente sui tempi di attesa.
Ricordiamoci però che questa tecnica non alleggerisce il contenuto, stabilisce solamente una gerarchia di priorità di caricamento; quindi, è importante fare attenzione alla quantità di dati che vogliamo caricare senza abusarne eccessivamente.
