Che cos’è il Lazyloading e come implementarlo

Cos’é il Lazy Loading

Il lazy loading è una tecnica che consente di ritardare il caricamento di determinate parti di una pagina Web, in particolare immagini, finché non sono necessarie.

Il lazy loading è una vera e propria strategia per identificare le risorse non bloccanti (non critiche) e caricarle solo quando necessario.

È un modo per accorciare la lunghezza del percorso di rendering critico, che si traduce in tempi di caricamento della pagina ridotti.

Invece di caricare tutto in una volta, ( questo tipo di azione è nota come caricamento “eager”), il browser non richiede determinate risorse finché l’utente non interagisce con esse in modo tale da rendere necessarie le risorse per la sua esperienza utente. Se implementato correttamente, il lazy loading può accelerare i tempi di caricamento della pagina.

Questo tipo di caricamento è tradotto letteralmente con la parola “pigro” perché incoraggia un browser Web a procrastinare le sue azioni.

Quando si visualizza una pagina Web con il lazy loading, un browser dice essenzialmente: “Aspetto a caricare queste immagini finché non ne avrò davvero bisogno”.

Quando si visualizza una pagina web che si carica tutta assieme, un browser assume l’atteggiamento opposto. Quindi dice: “Faccio tutto subito!” Sebbene la procrastinazione a volte abbia connotazioni negative nei nostri giorni di lavoro nel mondo reale, in questo caso è spesso più efficace.

Ad esempio, un articolo di un blog potrebbe avere un’immagine nella parte superiore della pagina e un diagramma nella parte inferiore. Qualcuno che legge il post del blog potrebbe non raggiungere la fine del testo per diversi minuti, quindi il browser attende di caricare il diagramma finché il lettore non scorre fino a quella sezione. In questo modo, la pagina si carica inizialmente più velocemente, perché il browser carica un’immagine invece di due.

---

Argomenti

• Cos’è il Lazyloading
• Come funziona il lazy loading delle immagini?
• Metodi di implementazione del lazy loading
• Quando utilizzare il lazy loading
• Tecniche di lazy loading per le immagini
• Attivare il caricamento dell’immagine utilizzando eventi Javascript
• Lazy loading nativo
• Lazy loading delle immagini di sfondo CSS
• Andare avanti con il lazy loading

Panoramica

Con l’evoluzione del web, abbiamo assistito a enormi incrementi nel numero e nelle dimensioni delle risorse inviate agli utenti. Tra il 2011 e il 2019, il peso medio delle risorse è aumentato da ~100 KB a ~400 KB per desktop e da ~50 KB a ~350 KB per dispositivi mobili. Mentre le dimensioni delle immagini sono aumentate da ~250 KB a ~900 KB per desktop e da ~100 KB a ~850 KB per dispositivi mobili.

Uno dei metodi che possiamo usare per affrontare questo problema è quello di accorciare la lunghezza del Critical Rendering Path caricando in modo differito le risorse che non sono critiche per il primo rendering. Un esempio pratico sarebbe quando si atterra sulla home page di un sito di e-commerce con un link a una pagina/sezione del carrello e nessuna delle risorse della pagina del carrello (come JavaScript, CSS e immagini) viene scaricata finché non si naviga lì.

Come funziona il lazy loading delle immagini?

La navigazione dell’utente in genere è ciò che attiva le immagini a caricamento lento. In particolare, quando un utente scorre una pagina verso il basso, indica al browser di caricare le immagini che appaiono lì.

Quando una pagina web viene caricata, la parte che un utente vede è chiamata “above the fold”, mentre la parte che l’utente non vede ancora è chiamata “below the fold”.* Le immagini sopra(above) la piega(fold) devono essere caricate immediatamente, altrimenti l’esperienza dell’utente ne risentirà. Ma l’utente non vede le immagini Below the Fold finché non scorrono verso il basso. Pertanto, le immagini Below the Fold possono utilizzare il lazy loading.

*Cosa significa “Fold”?

“Above the fold” e “below the fold” hanno origine dai layout dei giornali. I giornali in genere vengono piegati a metà orizzontalmente e la metà anteriore – l’area sopra la piega – è ciò che il lettore vede per primo. Quando il termine viene applicato a un layout Web, la “piega” è la parte inferiore dello schermo dell’utente.

Metodi di implementazione del lazy loading

Esistono diverse librerie open source che possono essere utilizzate per implementare il caricamento lento, tra cui:

• blazy.js – blazy.js è una libreria JavaScript leggera per il caricamento lento e immagini multi-servizio, iframe, video e altre risorse.
• LazyLoad – LazyLoad è uno script che carica automaticamente le immagini non appena entrano nel viewport.

I metodi per implementare il caricamento lento nel codice includono:

• Lazy Initialization:  questo metodo imposta gli oggetti su null. I dati dell’oggetto vengono caricati solo dopo e ogni volta che vengono richiamati, controlla se null e, in tal caso, carica i dati dell’oggetto.
• Proxy virtuale: quando si accede a un oggetto, chiama un oggetto virtuale con la stessa interfaccia dell’oggetto reale. Quando viene chiamato l’oggetto virtuale, carica l’oggetto reale, quindi delegalo.
• Ghost: carica un oggetto in stato parziale, utilizzando solo un identificatore. La prima volta che viene chiamata una proprietà sull’oggetto, carica i dati completi.
• Value Holder: crea un oggetto generico che gestisce il comportamento di caricamento lento. Questo oggetto dovrebbe apparire al posto dei campi dati di un oggetto.

Quando utilizzare il lazy loading

Il caricamento lento è ottimo per pagine Web lunghe con molti contenuti pesanti (come immagini, GIF e video) che non sono essenziali per l’esperienza dell’utente al primo caricamento.

Non esistono linee guida rigide su quali pagine necessitano di Lazyloading, ma puoi testare le prestazioni del tuo sito e il coinvolgimento degli utenti con e senza il Lazyloading per effettuare questa chiamata. A seconda dei risultati, altre misure per aumentare il tempo di caricamento potrebbe valere la pena dedicare il tuo tempo.

L’applicazione del il Lazyloading al contenuto della tua pagina presenta molti potenziali vantaggi:

1. Aiuta la tua pagina a caricarsi più velocemente. Ciò migliora l’esperienza del visitatore, aumenta il numero di visitatori coinvolti e le conversioni e aiuta il tuo SEO.
2. Riduce l’utilizzo dei dati poiché il browser carica una frazione del contenuto totale della pagina per visita. Ciò consente di risparmiare sui costi dei dati sia per te che per i tuoi visitatori: pagherai meno per caricare meno articoli e i tuoi utenti non avranno bisogno di tanti dati per caricare le tue pagine web.
3. Risparmia l’energia necessaria per caricare il contenuto, preservando la durata della batteria. Inoltre impedisce ai computer di surriscaldarsi e di suonare come motori a reazione.
4. Mantiene i visitatori sulla tua pagina se continui a offrire contenuti pertinenti. Un ottimo esempio di ciò è lo scorrimento infinito. I siti di social media lo fanno continuamente per attirare la nostra attenzione.
   cui le pagine vengono indicizzate dai motori di ricerca.

Tecniche di lazy loading per le immagini

Le immagini su una pagina web possono essere caricate in due modi:

• utilizzando il tag <img>
• utilizzando la proprietà CSS background.

Diamo prima un’occhiata al più comune dei due, il tag html <img>, quindi passiamo alle immagini di sfondo CSS.

Il concetto generale di caricamento lento delle immagini nel tag <img>

Le immagini con caricamento lento possono essere suddivise in due passaggi:

Il primo passo è impedire che l’immagine venga caricata in anticipo. Per le immagini caricate utilizzando il tag <img>, il browser utilizza l’attributo src del tag per attivare il caricamento dell’immagine. Indipendentemente dal fatto che si tratti della prima o della millesima immagine nel tuo HTML e ben fuori schermo, se il browser ottiene l’attributo src, attiverà il caricamento dell’immagine.
Pertanto, per eseguire il lazyload di tali immagini, inserisci l’URL dell’immagine in un attributo diverso da src. Supponiamo di specificare l’URL dell’immagine nell’attributo data-src del tag immagine. Ora che src è vuoto, il browser non attiva il caricamento dell’immagine.

<img data-src="https://www.wp-assistenza.it/prova/default-img.jpg" />

Attiva il caricamento dell’immagine utilizzando eventi Javascript

In questa tecnica, utilizziamo listener di eventi scroll, resize, e orientationChange. L’evento scroll è ovviamente da controllare quando l’utente scorre la pagina. Gli eventi resize e guidanceChange sono ugualmente importanti per il lazy loading. L’evento di ridimensionamento si verifica quando cambia la dimensione della finestra del browser. L’evento guidanceChange viene attivato quando il dispositivo viene ruotato dalla modalità orizzontale a quella verticale o viceversa. In questi casi, il numero di immagini che diventano visibili sullo schermo cambierà. Pertanto, dovremo attivare un caricamento per queste immagini.

Quando si verifica uno di questi eventi, troviamo tutte le immagini sulla pagina che devono essere caricate in modo lento e che non sono state ancora caricate.

Da queste immagini, controlliamo quali sono ora nel viewport. Questo viene fatto utilizzando l’offset superiore dell’immagine, lo scorrimento del documento corrente in alto e l’altezza della finestra.

Se è entrato nel viewport, prendiamo l’URL dall’attributo data-src e lo inseriamo nell’attributo src. Ciò attiva il caricamento dell’immagine. Rimuoviamo anche la classe lazy che identifica le immagini da caricare pigramente per eventi che si attivano successivamente. Una volta caricate tutte le immagini, rimuoviamo gli ascoltatori di eventi.

Quando scorriamo, l’evento di scorrimento si attiva più volte rapidamente. Pertanto, per migliorare le prestazioni, aggiungiamo un piccolo timeout che limita l’esecuzione della funzione di lazy loading.

Lazy loading nativo

Nell’aggiornamento più recente, Google ha aggiunto il supporto per il lazy loading nativo nell’ultima versione del browser Chrome: Chrome 76. Tutti i browser basati su Chromium, ovvero Chrome, Edge, Safari e Firefox. Puoi trovare maggiori dettagli sul supporto del browser per il caricamento lento nativo su caniuse.com.

Con l’entrata in gioco del supporto lato browser, ora gli sviluppatori devono solo aggiungere un attributo “loading” quando incorporano immagini, per implementare il caricamento lento sui loro siti web.

In effetti, non è nemmeno necessario essere uno sviluppatore per ottenere questo risultato. Una conoscenza di base dell’HTML è sufficiente per implementare l’attributo “caricamento”, rendendo questa funzionalità accessibile a molti più amministratori di siti web.

Quindi il codice apparirà così :

<img src="esempio.jpg" loading="lazy" alt="..." />
<iframe src="esempio.html" loading="lazy"></iframe>

I seguenti valori sono supportati dall’attributo caricamento:

• lazy: rinviare il caricamento delle risorse finché non raggiunge una certa distanza dal viewport.
• eager: carica le risorse non appena viene caricata la pagina, indipendentemente da dove sono posizionate sulla pagina, sia above che below the fold della pagina.
• auto: questo valore attiva il caricamento lento predefinito. Fondamentalmente equivale a non includere l’attributo di caricamento.

Tuttavia, per i browser che non supportano il lazy load nativo, è necessario applicare le tecniche sopra menzionate per implementarlo.

Come spiegato più avanti in questo blog, per evitare che il contenuto circostante venga ridisposto quando viene scaricata un’immagine caricata in modo lento, assicurati di aggiungere attributi di altezza e larghezza all’elemento <img> o di specificarne i valori direttamente in uno stile in linea.

<img src="immagine1.jpg" loading="lazy" alt="…" width="300" height="300">
<img src="immagine2.jpg" loading="lazy" alt="…" style="height:300px; width:300px;">

Lazy loading delle immagini di sfondo CSS

Dopo i tag <img />, le immagini di sfondo sono il modo più comune per caricare immagini su una pagina web. Per i tag <img />, il browser ha un approccio molto semplice: se l’URL dell’immagine è disponibile, carichiamo l’immagine.

Con le immagini di sfondo CSS non è così semplice. Per caricare le immagini di sfondo CSS, il browser devi costruire l’albero DOM (Document Object Model), così come l’albero CSSOM (CSS Object Model), per decidere se lo stile CSS si applica a un nodo DOM nel documento corrente.

Se la regola CSS che specifica l’immagine di sfondo non si applica a un elemento nel documento, il browser non carica l’immagine di sfondo. Se la regola CSS è applicabile a un elemento nel documento corrente, il browser carica l’immagine.

A prima vista può sembrare complesso, ma questo stesso comportamento costituisce la base della tecnica per il lazy loading delle immagini di sfondo. In termini semplici, inganniamo il browser non facendogli applicare la proprietà CSS dell’immagine di sfondo a un elemento finché quell’elemento non entra nel viewport.

 

Andare avanti con il lazy loading

Il lazy loading è un’ottima opzione per migliorare le prestazioni della pagina e mantenere i visitatori sul tuo sito.

Se scegli il lazy loading, assicurati di testare questa nuova funzionalità prima di avviarlo. Eventuali bug potrebbero impedire la visualizzazione dei contenuti nascosti e nessun contenuto è peggiore di quello lento. Se fatto bene, però, il lazy loading porterà le tue pagine da lente a scattanti!