Lazy Load. Un metodo efficace per abbassare i tempi di download di un sito

Le pagine web contengono risorse che non necessariamente devono essere visualizzate immediatamente. Immagini, video, i-frame, audio, ecc. possono tranquillamente essere scaricati solo quando l’utente li richiede o comunque in un secondo momento a tutto vantaggio dei tempi di caricamento della pagina.  In questo articolo mostreremo quali sono le specifiche CSS e HTML da utilizzare per implementare il cosiddetto Lazy Load.

 

 

 

 

Attributo Lazy Load

L’attributo Lazy Load HTML5 gestisce il load delle pagine web e le ottimizza per il network contention. Le risorse LazyLoad sono scaricate sempre in maniera asincrona. Facciamo un esempio:

 

<!doctype html>

<html>

    <head>

        <title>Attributo Lazy Load</title>

    </head>

    <body>

        <img src=”Im-1.png” lazyload />

        <img src=” Im -2.png” />

        <img src=” Im -3.png” lazyload />

        <img src=” Im -4.png” />

    </body>

</html>

 

Osservazioni:

  1. Le immagini sono sempre scaricate in maniera asincrona dal browser. Lo stesso accade per le risorse LazyLoad. In assenza di problemi di network contention le 4 immagini vengono scaricate così come sono ma l’evento onload si verifica appena le immagini Im -2.png e Im -4.png  vengono scaricate senza attendere anche il download delle immagini Im -1.png e Im -3.png.
  2. In caso di network Contention il download delle immagini Im -1.png e Im -3.png viene messo in pausa fino a quando il problema non viene risolto.

 

 

Elementi HTML che supportano l’attributo LazyLoad

Diversi elementi HTML supportano tale attributo:

  • Img
  • Audio
  • Video
  • Embed
  • Iframe
  • Object
  • svg feImage
  • svg image
  • svg use
  • svg script
  • svg tref tags

 

Script

Quattro I possibili scenari quando LazyLoad è applicato ai tag <script>

  • Attributi LazyLoad e async presenti. Il comportamento LazyLoad è quello previsto.
  • Attributi LazyLoad e defer presenti. L’attributo defer prevale su LazyLoad.
  • Presente solo l’attributo LazyLoad. Il comportamento è quello previsto.
  • Se l’attributo IDL dell’elemento è impostato su FALSO, l’attributo LazyLoad non ha nessun effetto.

 

Link

Se l’attributo LazyLoad è utilizzato su un elemento link, il foglio di stile ad esso collegato viene scaricato in maniera asincrona e LazyLoad agisce come previsto.

 

 

Attributo HTML PostPone

Quando l’attributo PostPone viene applicato il download dell’immagine avviene solo quando l’utente visualizza l’elemento.

La risorsa è scaricata in maniera asincrona.

L’evento onload non aspetta che l’elemento PostPone sia scaricato e si verifica appena tutte le altre risorse sono state scaricate.

 

Elementi che supportano l’attributo PostPone

  • Img
  • Audio
  • Video
  • Embed
  • Iframe
  • Object
  • svg feImage
  • svg image
  • svg use
  • svg script
  • svg tref

 

 

Come applicare LazyLoad e PostPone tramite CSS

È possibile applicare questi due attributi agli elementi HTML che li supportano utilizzando la proprietà resource-priorities CSS.

<!doctype html>

<html>

    <head>

        <title>Lazy Load Attribute</title>

        <style type=”text/css”>

            .class1

            {

                resource-priorities: lazyload;

            }

 

            .class2

            {

                resource-priorities: postpone;

            }

        </style>

    </head>

    <body>

        <img src=”1.png” class=”class1″ />

        <img src=”2.png” class=”class2″ />

        <img src=”3.png” class=”class1″ />

        <img src=”4.png” class=”class2″ />

    </body>

</html>

 

 

You may also like