Lazy loading: come ottimizzare le performance del vostro sito web.

Nel processo di ottimizzazione delle performance del vostro sito web prima o poi incontrerete il termine lazy loading. Questo diffuso metodo aiuta a migliorare il tempo di caricamento soprattutto nei siti web con molti dati, immagini o video.

Quando si richiama un sito web, il browser ricarica tutte le risorse necessarie per presentare la pagina così come la si desidera. Nel farlo vengono richiamati tutti gli oggetti, anche quando questi non si trovano nell’area visibile, bensì “below the fold” (che si potrebbe spiegare con: al di fuori del campo visivo). Ciò comporta, tra l’altro, un tempo di caricamento superiore e non necessario. Per ovviare a tutto questo gli sviluppatori utilizzano il lazy loading. Con l’aiuto di uno script, come ad esempio LazyLoad il browser carica immagini e altri dati solo quando questi si trovano nel viewport (area di visualizzazione) dell’utente, ad esempio quando si scorre la pagina o si aumenta la finestra del browser.

La funzionalità del metodo lazy load è più chiara se si pensa agli oggetti immagine: per poter utilizzare il lazy loading dovete adattare il markup del tag img. Al posto dell’attributo src, il metodo utilizza un attributo data, incluse indicazioni sulle fonti adeguate. Non appena l’immagine si troverà nell'area visibile, il rispettivo script inserisce l’attributo src tramite l’attributo data, così compare l’immagine. Per il caricamento è possibile utilizzare effetti fade-in o slide-in.

Ci sono varie possibilità per integrare il lazy loading nel proprio sito web. L’integrazione dei metodi lazy loading negli anni è stata costantemente implementata e migliorata. Nei paragrafi seguenti vi presenteremo alcune delle soluzioni preferite per l’implementazione della procedura.

Attualmente sono molti i template JavaScript per il lazy loading, che potete semplicemente inserire all’interno del vostro sito web. Il già citato script LazyLoad costituisce ad esempio una soluzione rapida senza jQuery. Oltre ad offrire la possibilità di impostare un lazy loading nativo per immagini, video e iFrames, lo script di 2,4 KB (Kilobyte) supporta anche immagini responsive.

Un’alternativa a LazyLoad è data dallo script Lazy Load Remastered di Mika Tuupola. A differenza di LazyLoad, questo script punta su jQuery e offre alcuni piacevoli effetti come ad esempio la tecnica blur.

Il lazy loading nativo è il sistema più semplice per integrare i metodi di lazy load nel vostro progetto web. Questo metodo inizialmente era disponibile solo per il browser Google Chrome (a partire dalla versione 75) e ora anche per Firefox, Edge e Opera. Per utilizzare questo metodo, aggiungete semplicemente ai contenuti della rispettiva pagina web l’attributo di caricamento adeguato.

Accanto al valore “lazy” per il lazy loading avete a disposizione 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.

Il vantaggio del lazy loading nativo è che il browser non deve caricare biblioteche JavaScript aggiuntive. Ciò consente non solo di risparmiare tempo di caricamento, ma assicura anche che le immagini del browser vengano caricate tramite lazy load anche quando l’utente ha disattivato JavaScript.

Se integrate lazy loading con Java Script, il browser consulterà costantemente la posizione degli oggetti. Ciò può causare effetti secondari indesiderati come dei rallentamenti e rappresenta un carico aggiuntivo per il server. Con l’API Intersection Observer la situazione cambia: l’interfaccia osserva i cambiamenti degli elementi relativamente a un determinato elemento genitore. L'elemento genitore è, in molti casi, il viewport. Se l’oggetto si sovrappone all’elemento genitore, o se viene modificata la distanza tra gli elementi di un determinato valore, l’Intersection Observer svolge una funzione callback e mostra l’elemento.

Se avete creato la vostra pagina Internet con WordPress, potete integrare lazy loading comodamente con un plug-in, ad esempio a3 Lazy Load. Oltre a immagini e video, l’estensione supporta il metodo lazy load anche per altri contenuti integrati.

Spesso i gestori inseriscono dei pixel per tracciare il comportamento dell’utente all’interno del sito Internet. A volte questi tracking pixel (pixel di monitoraggio) vengono implementati in un’area non visibile. Se applicate il lazy loading a tutte le immagini, il browser carica il tracking pixel quando l’immagine si trova in un’area visibile. Ne consegue che andranno persi numeri importanti relativi ai clic e alle conversioni.

A seconda della versione utilizzata però, potete anche caricare il tracking pixel in maniera separata direttamente quando viene richiamata la pagina:

• Lazy loading nativo: aggiungete al tracking pixel l’attribute loading="eager".
• Lazy loading con Java Script: attribuite al tracking pixel una determinata classe che escluderete nel codice JavaScript. In alternativa potete attribuire a tutti gli oggetti, che il browser deve caricare tramite lazy load, una classe e applicate lo script esplicitamente a questi.