Lazy loading? Detto caricamento pigro è un modello di progettazione comunemente utilizzato nella programmazione del computer per deferire l’inizializzazione di un oggetto fino al punto in cui è necessario ovvero solamente quando essi sono effettivamente necessari per il prosieguo dell’applicazione. Un semplice accorgimento che può essere fondamentale nel migliorare la velocità del sito e utile per il posizionamento nei motori di ricerca.
Sommario
Lazy loading nei siti web
Tra le varie operazioni che si possono effettuare su un sito web per renderlo fluido, veloce e migliorare l’esperienza dell’utente durante la navigazione c’è sicuramente quello di ottimizzare le immagini. In questo post ti illustrerò come affrontare tale problematica su siti web costruiti sul CMS WordPress utilizzando la tecnica del lazy loading.
Prima di iniziare tieni presente che per una buona ottimizzazione delle immagini è sicuramente importante la dimensione. Riducendo le dimensioni si abbassano notevolmente i tempi di caricamento delle pagine web del tuo blog. L’aspetto ideale è quello di caricare nella nostra librerie immagini già ottimizzate, per fare questo puoi utilizzare i famosissimi software come Photoshop, Gimp oppure affidarti a dei tool online.
Tecnica del lazy loading per velocizzare caricamento di una pagina
Bene, come ti avevo promesso nell’introduzione di quest’articolo, oltre ad ottimizzare le immagini con i famosissimi software esistono anche altre tecniche per velocizzare il caricamento di una pagina,una di queste è il lazy loading delle immagini.
Il lazy loading, consiste nel caricare le immagini solo quando vengono raggiunte visivamente dall’utente mentre effettua lo scroll dell pagina verso il basso.
Questa utility riduce, a volte, di molto il caricamento complessivo della pagina, infatti verranno caricate solo le immagini nella parte alta della pagina mentre quelle che si trovano a fondo pagina non impatteranno nel caricamento, verranno visualizzato soltanto quando verrà effettuato lo scroll.
Come attivare il lazy loading su Worpress
Esistono tantissimi plugin per implementare questa funzionalità, uno che esegue l’operazione che ti ho descritto e BJ Lazy Loading. Non ti consiglio di installarlo perché ogni plugin che installiamo appesantisce il nostro sito, quindi ti consiglio ti utilizzare lo script di jQuery: Lazy Load Plugin for jQuery.
Attenzione il plugin che ho appenato citato non è un plugin wordpress, sono due cose ben distinte.
Una volta entrati sul sito effettuiamo il download del javascript, meglio se è in versione minified, nel mio caso ho scaricato il file con il n ome jquery.lazyload.min.js
Per poter applicare il lazy loading sul nostro WordPress, dobbiamo accertarci che stiamo utilizzando jQuery. Se non abbiamo jQuery occorre caricarlo sul proprio sito WordPress.
Una volta caricato jQuery, carichiamo il file jquery.lazyload.min.js via FTP nella cartella wp-includes/js del nostro sito WordPress ed importiamo lo script nell’head, subito dopo l’import di jQuery come da esempio in basso.
<script src="http://www.tuositowordpress.com/wp-includes/js/jquery.lazyload.min.js" type="text/javascript"></script>Dopo inseriamo sempre nel head la chiamata al lazy load come segue:
<script type="text/javascript">
jQuery(document).ready(function($){
$("img").lazyload({
failurelimit : 50,
effect : "fadeIn"
});
});
</script>p.s. puoi inserire la chiamata allo script anche nel footer!
Conclusione
In ultimo, ma non per importanza, l’aspetto relativo al SEO per le immagini. Anche per le immagini ci sono degli accorgimenti a livello SEO che vanno assolutamente adoperati che ti riporterò nel prossimo post.
Ciao Stefano,
devi inserirlo per forza nel Head è uno script. al massimo puoi anche inserirlo nel footer.
Ciao, se volessi inserire gli script ad esempio sulla index del mio sito wordpress dove va caricato con precisione? Considera che ho installato un tema Be-theme e come sai la index non contiente tag Head ma sono tutti richiami in php
Ciao, bella guida. Ma che intendi per document ready?
Ciao, grazie per la segnalazione! Diciamo che per document ready intendevo header ma puoi inserirlo anche nel footer. Ho corretto l’articolo dato che mi ero espresso in modo non corretto.
Se ti servono altre info scrivimi nei commenti.
A presto!