Lazy load delle immagini per velocizzare WordPress, case study

Il caricamento delle immagini può influire sul tempo di caricamento dell’intero blog WordPress, e anche di molto! Solitamente sono proprio loro la principale causa del rallentamento. Più immagini ci sono, più sono pesanti, e più aumenta il tempo di caricamento. E siccome la velocità è importante, è arrivato il momento di mettere il turbo!

Il problema

Nella mia homepage (e anche la sidebar) mi sono lasciato prendere un po’ troppo la mano dalle immagini, per giunta non sono neanche piccole 🙂

Ecco come si presenta il caricamento della mia homepage, sfruttando il tool gratuito di Pingdom.

Come puoi vedere, la parte che rallenta il caricamento del blog è data dagli elementi nel riquadro rosso. Per lo più sono immagini che vengono caricate in maniera sequenziale, quindi più immagini ci sono, più sono pesanti, e più aumenta il tempo.

Ecco i dati forniti da pingdom:

44 immagini per un totale di 1.9 MB! Eccolo qui il problema!

L’idea

Che senso ha caricare 44 immagini immediatamente, quando l’utente che arriva sul blog vede solo questo (quindi solo una piccola parte):

Non è meglio caricare le immagini mano a mano che il lettore scorre la pagina?

La soluzione

Certo che è meglio 🙂

Questo metodo di caricamento si chiama lazy load, e appunto, permette di caricare le immagini solo quando sono realmente necessarie, facendo risparmiare la banda e migliorando i tempo di caricamento, quindi porta ad avere un sacco di benefici (in primis, una migliore user-experience –> più conversioni! $$$ ).

Per implementarlo, installa il plugin Advanced Lazy Load e… nient’altro. È già tutto attivo e funzionante. Puoi anche decidere fino a quanti pixel sotto alla schermata visibile vuoi caricare le immagini (di default è 0, quindi non vengono caricate le immagini non visibili) e la velocità dell’effetto a comparsa (eh già, ha anche questo bell’effetto grafico!).

Suggerimenti

Tieni conto che viene ritardato il caricamento delle immagini caricate tramite il tag html <img>, se invece mostri l’immagine inserendola come background di un contenitore (<div>), ad esempio per gli sprites, questa verrà caricata già all’inizio.

Ti suggerisco di modificare il numero di pixel da Impostazioni > Advanced Lazy Load > Pixel > da 0 a 500px (o giù di lì), in maniera tale da caricare le immagini fino a 500 px “sotto lo schermo”, così che l’utente non si accorga che le stai caricando in lazy load (sai come sono i lettori 😉 )

I risultati

Ecco come viene visualizzata la mia home dopo aver aggiunto il plugin, tenendo conto che utilizzo 7 sprites (vedi ad esempio il footer che contiene le immagini) e che quindi può essere ancora migliorato:

Come puoi vedere, le immagini degli articoli, che erano le più pesanti, non vengono caricate immediatamente, la stessa cosa per il banner e per le thumbnail degli articoli recenti. Le altre immagini sono degli sprites caricati come background (che dovrò sistemare se voglio migliorare ancor di più il tempo di caricamento).

Ecco l’analisi temporale:

Rispetto a prima, il numero di immagini sono state ridotte notevolmente, con un buon guadagno sul tempo di caricamento. Più in dettaglio:

Il numero di immagini caricate è passato da 44 a 29 (e può essere ancora migliorato di almeno 6 immagini nel mio caso), e da una dimensione di 1.9 MB a 0.859 MB, più del 50% di guadagno!

Ed ecco il risultato in termini di tempo… rullo di tamburi…

Risparmio di 1 secondo! (come ho già detto, ancora migliorabile!) … ed ovviamente una diminuzione delle richieste e della dimensione della pagina, con conseguente diminuzione (almeno all’inizio) della banda utilizzata (molto comodo se si utilizzano servizi e hosting dove la banda è a pagamento)… senza contare la parte invisibile: server meno stressato!

Poi, se il lettore trova il tuo blog interessante e decide di scorrerlo dall’inizio alla fine, verranno caricate tutte e 44 le immagini iniziali, ma non aumenterà il tempo di caricamento della pagina 🙂 … insomma, è una bella condizione win-win.

Che te ne pare del lazy load delle immagini? Io lo trovo eccezionale.

Che risultati hai ottenuto?