Pubblicato il 13/11/12e aggiornato il

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://lh6.googleusercontent.com/-Hrvq6RcS--0/UKIVep7x4XI/AAAAAAAAcVw/QP8WPkCnSbU/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'è. 




11 commenti :

  1. Articolo molto utile. Dopo aver inserito il codice, ho fatto una prova con PageSpeed e ora non mi suggerisce più di ridurre la dimensione delle immagini. Grazie mille!

    Forse è un po' OT, ma... sai per caso cosa vuol dire "combina immagini in sprite css"?

    RispondiElimina
    Risposte
    1. @ Bastet
      Non ho potuto fare il test perché i miei post non contengono mai molte immagini ma il plugin è molto conosciuto e anche molto usato (non dai blog su Blogger almeno finora). Se hai provato con Page Speed, tool ufficiale di Google, è una garanzia. I CSS Sprite sono una cosa molto tecnica e servono per caricare le immagini una sola volta invece che più volte separatamente. Leggi qui sotto per avere una idea ci cosa si tratta
      http://www.html.it/articoli/creare-sprite-css-1/

      Elimina
  2. Grazie della dritta, ascolta, come inserisco i bottoni social che hai sulla destra con i contatori? Grazie mille

    RispondiElimina
    Risposte
    1. @StefanoBruno
      Leggi questo tutorial
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      E' spiegato come inserirli alla fine del post ma li puoi mettere anche su Aggiungi un gadget > HTML/Javascript e poi posizionarli nella sidebar come ho fatto io.

      Elimina
  3. Ottimo Ernesto,avevo proprio bisogno di qualcosa velocizzasse il mio che è certamente un po troppo ricco

    RispondiElimina
  4. Perdona la domanda: se nel modello è già installata la libreria JQuery, posso tralasciare le prime due righe del codice?


    E.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.