Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Lazy load delle immagini per velocizzare WordPress, case study

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 :)

Home

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

Dati iniziali

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:

dati iniziali

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):

Home Above the Fold

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:

home dopo

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:

home analisi

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

dati lazy

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…

ottimizzazione lazy load

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?


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
11 Commenti
  • Matteo

    Ottimo!
    Mi piacerebbe leggere da te (che sei un esperto) una guida di come implementare i bottoni sociali sempre con il Lazy Load, che caricano al passaggio del mouse. Ne vedo molti in giro e aumentano le prestazioni del Sito in maniera interessante! Fammi sapere!

    • Roberto Iacono

      Ciao Matteo, ti rinrazio ma non sono un esperto 😉
      Sì, interessante come argomento, mi metto subito a studiare… stay tuned!

      • Matteo

        Fantastico! Sarebbe stupenda una guida su come poi implementare i codici sostituendo quelli di default che forniscono i temi a fine articolo! Rimango in attesa. Ottimo Lavoro

  • Francesco

    Davvero veloce questo plugin… però Roberto a me carica anche il logo dopo e vorrei che quello lo caricasse subito, mi puoi aiutare?

    • Roberto Iacono

      Inseriscilo come background di un

      … lo so, sembra geroglifico :)

      Devi creare un

      (magari lo hai già), gli assegni un id, e aggiungi come background l’immagine. Così facendo viene caricata immediatamente.

      quindi avrai:

      <div id=”tuo_logo”></div>

      e come codice CSS da inserire nel file style.css:

      #tuo_logo {background:url(URL dell’immagine); width:100px; height:100px;}

      PS: modifica anche width (larghezza) e height (altezza)

  • Francesco

    Troppo difficile Roberto, è arabo per me…

    • Roberto Iacono

      Dai, non è così difficile… ricontrolla il codice nel commento che adesso è sistemato, devi solo sbatterci un po’ la testa :)

  • marco

    Io invece ho un altro problema. Nella home ho uno slide che mostra l’articolo recente con immagine in evidenza del relativo articolo. Ecco.. lo slide non funziona, non gli carica le immagini. Sai come limitare questo plugin escludendo lo slide?

    • Roberto Iacono

      Al momento non ce l’ho installato ma ho caricato il codice a mano… e posso dire quale immagini selezionare. Suppongo che il plugin faccia la stessa cosa, quindi puoi modificare il plugin e fargli selezionare solamente le immagini che ti interessano… ma non credo sia la soluzione migliore, magari esiste qualche funzioncina, prova a chiedere sul forum di assistenza del plugin

  • Izzyweb

    Utilizzando questo plugin hai notato una perdita di indicizzazione delle immagini da parte di Google? Ti chiedo questo perché ho visto come modifica il codice html per la url delle immagini e non sò come potrebbe reagire Gg.

    Grazie

    • Roberto Iacono

      Ciao Izzyweb,
      sinceramente non le monitoro e non mi interessa molto, tra l’altro ora l’afflusso al blog è diminuito causa Estate, per cui non riuscirei a risponderti neanche tramite Analytics…
      Comunque, penso che potresti avere problemi nel caso in cui non ci fosse il codice , che permette di caricare le immagini originali nel caso in cui l’utente non avesse abilitato JS (come il Googlebot).

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13603+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13603+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614