Lazy loading: come ot­ti­miz­za­re le per­for­man­ce del vostro sito web.

Nel processo di ot­ti­miz­za­zio­ne delle per­for­man­ce del vostro sito web prima o poi in­con­tre­re­te il termine lazy loading. Questo diffuso metodo aiuta a mi­glio­ra­re il tempo di ca­ri­ca­men­to so­prat­tut­to nei siti web con molti dati, immagini o video.

Quando si richiama un sito web, il browser ricarica tutte le risorse ne­ces­sa­rie per pre­sen­ta­re la pagina così come la si desidera. Nel farlo vengono ri­chia­ma­ti 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 ca­ri­ca­men­to superiore e non ne­ces­sa­rio. Per ovviare a tutto questo gli svi­lup­pa­to­ri uti­liz­za­no 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 vi­sua­liz­za­zio­ne) dell’utente, ad esempio quando si scorre la pagina o si aumenta la finestra del browser.

La fun­zio­na­li­tà del metodo lazy load è più chiara se si pensa agli oggetti immagine: per poter uti­liz­za­re il lazy loading dovete adattare il markup del tag img. Al posto dell’attributo src, il metodo utilizza un attributo data, incluse in­di­ca­zio­ni sulle fonti adeguate. Non appena l’immagine si troverà nell'area visibile, il ri­spet­ti­vo script inserisce l’attributo src tramite l’attributo data, così compare l’immagine. Per il ca­ri­ca­men­to è possibile uti­liz­za­re effetti fade-in o slide-in.

Ci sono varie pos­si­bi­li­tà per integrare il lazy loading nel proprio sito web. L’in­te­gra­zio­ne dei metodi lazy loading negli anni è stata co­stan­te­men­te im­ple­men­ta­ta e mi­glio­ra­ta. Nei paragrafi seguenti vi pre­sen­te­re­mo alcune delle soluzioni preferite per l’im­ple­men­ta­zio­ne della procedura.

At­tual­men­te sono molti i template Ja­va­Script per il lazy loading, che potete sem­pli­ce­men­te inserire all’interno del vostro sito web. Il già citato script LazyLoad co­sti­tui­sce ad esempio una soluzione rapida senza jQuery. Oltre ad offrire la pos­si­bi­li­tà di impostare un lazy loading nativo per immagini, video e iFrames, lo script di 2,4 KB (Kilobyte) supporta anche immagini re­spon­si­ve.

Un’al­ter­na­ti­va a LazyLoad è data dallo script Lazy Load Re­ma­ste­red di Mika Tuupola. A dif­fe­ren­za 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 ini­zial­men­te era di­spo­ni­bi­le solo per il browser Google Chrome (a partire dalla versione 75) e ora anche per Firefox, Edge e Opera. Per uti­liz­za­re questo metodo, ag­giun­ge­te sem­pli­ce­men­te ai contenuti della ri­spet­ti­va pagina web l’attributo di ca­ri­ca­men­to adeguato.

Accanto al valore “lazy” per il lazy loading avete a di­spo­si­zio­ne i seguenti valori:

• eager: il browser carica l’oggetto di­ret­ta­men­te quando viene ri­chia­ma­ta la pagina.
• auto: è il browser a decidere se l’oggetto va caricato im­me­dia­ta­men­te o in ritardo.

Il vantaggio del lazy loading nativo è che il browser non deve caricare bi­blio­te­che Ja­va­Script ag­giun­ti­ve. Ciò consente non solo di ri­spar­mia­re tempo di ca­ri­ca­men­to, ma assicura anche che le immagini del browser vengano caricate tramite lazy load anche quando l’utente ha di­sat­ti­va­to Ja­va­Script.

Se integrate lazy loading con Java Script, il browser con­sul­te­rà co­stan­te­men­te la posizione degli oggetti. Ciò può causare effetti secondari in­de­si­de­ra­ti come dei ral­len­ta­men­ti e rap­pre­sen­ta un carico ag­giun­ti­vo per il server. Con l’API In­ter­sec­tion Observer la si­tua­zio­ne cambia: l’in­ter­fac­cia osserva i cam­bia­men­ti degli elementi re­la­ti­va­men­te a un de­ter­mi­na­to elemento genitore. L'elemento genitore è, in molti casi, il viewport. Se l’oggetto si so­vrap­po­ne all’elemento genitore, o se viene mo­di­fi­ca­ta la distanza tra gli elementi di un de­ter­mi­na­to valore, l’In­ter­sec­tion Observer svolge una funzione callback e mostra l’elemento.

Se avete creato la vostra pagina Internet con WordPress, potete integrare lazy loading co­mo­da­men­te con un plug-in, ad esempio a3 Lazy Load. Oltre a immagini e video, l’esten­sio­ne supporta il metodo lazy load anche per altri contenuti integrati.

Spesso i gestori in­se­ri­sco­no dei pixel per tracciare il com­por­ta­men­to dell’utente all’interno del sito Internet. A volte questi tracking pixel (pixel di mo­ni­to­rag­gio) vengono im­ple­men­ta­ti 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 im­por­tan­ti relativi ai clic e alle con­ver­sio­ni.

A seconda della versione uti­liz­za­ta però, potete anche caricare il tracking pixel in maniera separata di­ret­ta­men­te quando viene ri­chia­ma­ta la pagina:

• Lazy loading nativo: ag­giun­ge­te al tracking pixel l’attribute loading="eager".
• Lazy loading con Java Script: at­tri­bui­te al tracking pixel una de­ter­mi­na­ta classe che esclu­de­re­te nel codice Ja­va­Script. In al­ter­na­ti­va potete at­tri­bui­re a tutti gli oggetti, che il browser deve caricare tramite lazy load, una classe e applicate lo script espli­ci­ta­men­te a questi.