Il tuo sito web impiega troppo tempo a caricare? Probabilmente, con il Lazy Load, è possibile velocizzarlo! Vediamo un po’ come…

Con il passare del tempo, i siti web hanno iniziato ad integrare sempre più contenuti. Inizialmente era solo testo, poi si sono aggiunte le immagini, i video, i frame, ecc.

Spesso, per decorare il sito (o semplicemente per facilitare la comprensione di un articolo), molte pagine vengono riempite di immagini.

Quando un utente visita la pagina per la prima volta, però, queste immagini devono essere scaricate dal server per poter essere visualizzate e, in base alle loro dimensioni, possono richiedere del tempo.

Il tempo di caricamento delle immagini andrà quindi a sommarsi al tempo di caricamento degli altri elementi, facendo così rallentare il caricamento dell’intera pagina.

Per contrastare questo “tempo aggiuntivo” di caricamento, è stata pensata una tecnica che permette di caricare le immagini solamente dopo che il resto della pagina è stato caricato.

Come funziona il Lazy Load?

Partendo dalle basi, quando si vuole caricare un’immagine all’interno di una pagina web, nel codice sarà presente un tag di immagine, come ad esempio:

<img src="https://francescoschettino.it/logo.png" />

All’interno di questo codice, vediamo il tag “img” che proverà a caricare la risorsa (in inglese “source“, abbreviata in “src”) presente all’URL specificato.

Il nostro obiettivo è quello di fare in modo che il browser non carichi subito questa risorsa, ma lo faccia in un secondo momento.

Prevenire il caricamento delle immagini

Per evitare che il browser vada a caricare l’immagine, quindi, è necessario nascondere l’attributo “src”, così che il browser non trovi nulla da caricare e passi all’elemento successivo.

Per fare questo, possiamo modificare l’attributo chiamandolo in un altro modo, come ad esempio “data-src”:

<img data-src="https://francescoschettino.it/logo.png" />

In questo modo, il browser non troverà l’attributo src e quindi non andrà a caricare la risorsa.

A questo punto, però, dobbiamo fare in modo che, una volta caricate tutte le altre parti della pagina, il browser vada a caricare anche le immagini, che avevamo lasciato in sospeso.

Per farlo, possiamo ricorrere al JavaScript, che ci permetterà di eseguire operazioni nel browser dell’utente dopo che la pagina è stata caricata.

Visualizzare le immagini con JavaScript

Dato che abbiamo “nascosto” l’URL della risorsa da caricare, dobbiamo fare in modo che il browser lo recuperi e lo metta “al posto giusto”, così da poter permettere al browser di visualizzarlo.

Definiamo, prima di tutto, un evento JavaScript che verrà eseguito quando la pagina sarà caricata:

window.onload = function() {
  // Codice da eseguire
};

Dopodiché definiamo una variabile che conterrà tutte le immagini che hanno l’attributo “data-src”:

window.onload = function() {
  var images = document.querySelectorAll("img[data-src]");
};

Su ciascuna di queste immagini andiamo poi a richiamare una funzione (inizialmente vuota):

window.onload = function() {
  var images = document.querySelectorAll("img[data-src]");
  images.forEach(function(image) {
    // Codice da eseguire per ogni immagine
  });
};

All’interno di questa funzione andiamo a prendere il contenuto dell’attributo “data-src” e lo inseriamo nell’attributo “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);
  });
};

Se poi vogliamo ripulire il codice (è una buona pratica, ma non è obbligatorio), possiamo cancellare l’attributo “data-src” dall’immagine, dato che non ci servirà più:

window.onload = function() {
  var images = document.querySelectorAll("img[data-src]");
  images.forEach(function(image) {
    var datasrc = image.getAttribute('data-src');
    image.setAttribute('src', datasrc);
    image.onload = function() {
      image.removeAttribute('data-src');
    };
  });
};

Implementare il Lazy Load con l’HTML

Se hai modo di modificare direttamente il codice della pagina, puoi cambiare tranquillamente gli attributi dei tag “img” ed aggiungere poi il codice JavaScript alla fine dell’head della pagina, in questo modo:

<!DOCTYPE html>
<html>
  <head>
    // Contenuto dell'head
    <script>
      // Codice JavaScript del Lazy Load
    </script>
  </head>
  <body>
    // Contenuto della pagina (dove sono i tag <img>)
  </body>
</html>

Implementare il Lazy Load con WordPress

Se il tuo sito web è realizzato in WordPress, e non hai quindi la possibilità di modificare direttamente il codice delle pagine, puoi scegliere se usare direttamente il mio plugin oppure leggere questo articolo su come integrare il Lazy Load sul tuo sito WordPress senza plugin.