Lazy load html
Il lazy load è un "caricamento pigro" del codice html o javascript.
A cosa serve?
Consente il caricamento di una parte del codice html o javascript soltanto quando è visibile sul browser dell'utente.
Mi permette di ridurre i tempi di caricamento, migliorare le performance del sito e l'esperienza utente. Senza contare i vantaggi in termini di ottimizzazione sui motori di ricerca.
Come realizzare il lazy load in modo semplice
Per inserire il lazy load su un sito web utilizzo una libreria open source molto utile, si chiama lazy html.
Il codice e la documentazione si può trovare su GitHub
Per prima cosa inserisco nella sezione <HEAD> della pagina web il richiamo online della libreria.
<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.2.3/dist/lazyhtml.min.js" crossorigin="anonymous"></script>
Poi nella sezione <BODY> aggiungo questa DIV intorno al codice da caricare in modo lazy.
<div id="lazyhtml" class="lazyhtml" data-lazyhtml>
<script type="text/lazyhtml">
<!--
il codice da caricare in modo lazy
-->
</script>
</div>
Il codice da inserire in modo lazy è un codice html, css, adcode ed è situato in una parte della pagina web non immediatamente visibile all'utente al momento del caricamento.
Può anche essere un codice javascript inserito in wrapping.
Ad esempio
<div id="lazyhtml" class="lazyhtml" data-lazyhtml>
<script type="text/lazyhtml">
<!--
<script type="text/javascript">
...
</script>
-->
</script>
</div>
Il codice javascript non viene eseguito al caricamento della pagina ma soltanto quando l'utente scorre la pagina verso il basso e lo visualizza.
In questo modo il caricamento e l'esecuzione dello script non pesa sui tempi di caricamento e visualizzazione del documento HTML sul browser dell'utente.
In pratica, il lazy load.
Nota. La libreria funziona sulle versioni più recenti dei principali browser Chrome, Firefox, Opera.
E così via.
