Lazy loading: cos'è e come funziona

Nei siti web, la velocità di caricamento delle pagine è un parametro molto importante. Gli utenti di internet sono infatti spesso di fretta e richiedono risposte rapide. Se un sito impiega troppo tempo ad aprirsi, i visitatori possono abbandonare la navigazione. Questo porta a mancate conversioni e dunque alla perdita di potenziali clienti. Per questo motivo, i motori di ricerca sempre più spesso premiano i siti più rapidi, mostrandoli nei primi risultati. Questo ha spinto alla realizzazione di siti web sempre più performanti. Una delle tecniche utilizzate per migliorare i tempi di caricamento è il lazy loading. In questo articolo, chiariremo di cosa si tratta e come funziona tecnicamente.

Caricamento senza lazy loading

Spesso le pagine web sono lunghe e per visualizzarle completamente è necessario effettuare uno scrolling. In assenza di lazy loading, tutte le risorse di una pagina vengono scaricate alla sua apertura. Questo significa che se una pagina contiene molte immagini, sarà richiesto un tempo elevato prima che tutte le immagini siano ricevute completamente. Questo provoca ritardi nella visualizzazione e conseguenti disagi nella navigazione. Questa attesa è tuttavia spesso ingiustificata. Se infatti una risorsa non è visibile nella finestra del PC o dello smartphone, non ha senso scaricarla in anticipo. Da questa idea nasce il concetto di lazy loading.

Cos'è il lazy loading

Il lazy loading è una tecnica per migliorare la velocità di visualizzazione delle pagine web. All'apertura della pagina, vengono scaricate solo le immagini che compaiono nella schermata di navigazione. Allo scorrimento, vengono poi scaricate tutte le altre risorse, a mano a mano che queste diventano visibili. In questo modo, viene speso tempo solo per richiedere le immagini effettivamente visualizzate. E questo ovviamente migliora la velocità del sito web.

Siccome lo scaricamento di un'immagine non è immediato, se la sua richiesta avviene solo all'apparizione nello schermo, potrebbe esserci un intervallo in cui questa non è visualizzata. Questo significa un peggioramento della user experience. Per mitigare il problema, esistono varie soluzioni. La prima è ovviamente quella di ottimizzare il peso dell'immagine. In questo modo, anche dispositivi con scarsa connettività riusciranno a scaricarla rapidamente. Il secondo è quello di richiedere la risorsa non alla sua stretta comparsa, ma leggermente in anticipo. Mentre l'utente scorre, l'immagine inizierà a caricarsi e all'apparizione sarà correttamente visibile. Si tratta di una caratteristica nota come soglia (threshold). Minore è il valore della soglia, più tardi inizierà il caricamento. Se ad esempio si fissa la soglia a 1250px, saranno richieste tutte le risorse che distano meno di 1250px dall'area dello schermo. È importante scegliere un valore di soglia che sia un compromesso fra la dimensione delle risorse richieste e l'istante completamento del loro scaricamento.

Come si fa a implementare il lazy loading

Giunti a questo punto abbiamo capito cos'è il lazy loading e perché è importante utilizzarlo nei siti web. Ma come si fa tecnicamente a realizzarlo? Esistono varie librerie Javascript che implementano il comportamento richiesto. Questo però comporta l'inclusione di codice esterno nel sito web. Data la crescente importanza della velocità nei siti web, è stato quindi introdotto un lazy loading nativo nei browser dedicato a immagini e iframe. Per includere un'immagine ad esempio è sufficiente utilizzare questo codice:

<img src="immagine.jpg" loading="lazy" alt="..." width="1200" height="800" />

Grazie all'attributo loading, il browser caricherà la risorsa con tecnica lazy loading. Come descritto nel documento, è importante utilizzare l'attributo solo per le immagini fuori dallo schermo. Per quelle già visibili all'apertura, si può procedere all'inclusione classica. La tecnica descritta purtroppo non è ancora supportata da tutti i browser, ma copre ad oggi già l'87% degli utenti e presto diventerà lo standard di fatto. È quindi importante adeguarsi per essere al passo con i tempi.

Per quanto riguarda la definizione della soglia, i browser nativamente scelgono un valore in funzione della velocità di connessione e del tipo di dispositivo di navigazione. Questo calcolo viene quindi fortunatamente evitato agli sviluppatori del sito, che dovranno unicamente incorporare il codice mostrato.