Lazy Load Plugin per ridurre il tempo di caricamento delle immagini.

Come installare Lazy Load Plugin su Blogger per ridurre il caricamento delle pagine con molte immagini.

La velocità di caricamento delle pagine del blog è diventata uno dei fattori che influenzano l'algoritmo di Google e che ne determinano il suo posizionamento nei risultati di ricerca. E' quindi opportuno prendere delle precauzioni per rendere il più rapida possibile la navigazione nel nostro sito.

Uno dei motivi principali del rallentamento è l'eccessiva presenza di widget e di oggetti multimediali quali video e audio che si riproducono automaticamente all'apertura delle pagine. Probabilmente però quello che incide di più nella lentezza del caricamento dell'articolo è la presenza di molte immagini magari anche di grosse dimensioni. Si può cercare di pubblicare articoli che ne contengano un numero limitato ma in certi casi le foto sono indispensabili per la completezza del post.

Lazy Load Plugin è uno script basato su JQuery che ritarda il caricamento delle immagini nelle pagine troppo lunghe. Sotto certi aspetti diciamo che funziona come i plugin di Facebook o di Google Plus che hanno un caricamento asincrono e che vengono visualizzati solo dopo il caricamento completo della pagina. Nei post particolarmente lunghi solo una parte dell'articolo e quindi una parte delle immagini viene visualizzata nella parte visibile della scheda del browser. Con Lazy Load Plugin le immagini nella parte sottostante del post si caricheranno solo quando il lettore scorrerà la pagina. Sono evidenti i vantaggi soprattutto per chi scrive articoli lunghi e pieni di foto di grandi dimensioni.

Per l'installazione di Lazy Load Plugin si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla questo semplice codice

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
//<![CDATA[
$(function() {
$("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitcAxNpOW5Heqx2CnF17Vaw08DtlOdj3NezPDNynhByjQkFslhs-WcNn-r-0AoQbWJhN6_awyirGqjI-77Y7XECd_SJLgREKKIsOqjLntYXBlQ-4IDgdlIxmOHu815gdBJg57HlhPBenk/s128/grey.gif",threshold : 200});
});
//]]>
</script>

Si salva il modello. Chi ha un dominio personalizzato come al solito deve caricare su un proprio hosting il javascript colorato di rosso in quanto si tratta di un file caricato su Google Sites. Si incolla l'URL nella barra del browser e si pigia su Invio per procedere al suo download. Il file poi può essere caricato su DropBox o meglio ancora su Google Code accedendo alla pagina Google Project Hosting per poi sostituirne l'URL nel precedente codice. Chi invece ha un sito del tipo nomeblog.blogspot.com può incollare il codice nel modello così com'è.