lazy loading

Lazy loading: ottimizzare le immagini su WordPress

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.

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.

lazy loading ottimizzazione wordpress
lazy loading ottimizzazione wordpress dimostrazione caricamento in corso

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 nome 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.

 

 

Autore Bartolomeo

Mi chiamo Bartolomeo Alberico, sono un consulente tecnico con la passione per il web e la tecnologia e tutto quello che le ronza intorno.
Nel tempo libero scrivo articoli per il mio blog su argomenti vari, in particolare su WordPress e SEO.

Condividi questo articolo!

2 Commenti

Mirko Rispondi

Ciao, bella guida. Ma che intendi per document ready?

Bartolomeo Rispondi

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ho letto la policy privacy e accetto il trattamento dei miei dati personali in conformità al D.Lgs. 196/2003