Image Lazyloader

Ritratto di Vanni

Come tutti i migliori SEO ci suggeriscono, la velocità di download della pagina è estremamente importante. E non solamente perchè è un fattore di ranking da parte dei motori di ricerca, ma anche per l'esperienza utente. Infatti, si calcola che mediamente un utente aspetta il caricamento della pagina web tra i 2 e i 4 secondi, oltre tale limite, l'utente abbandona il sito. Il problema non si pone finchè la nostra pagina contiene solo materiale testuale, ma quando si devono caricare parecchie fotografie?? Peggio ancora se devono essere di svariate centinaia di KB se non MB!!

Ecco, allora, che ci viene in aiuto Image Lazyloader. Questo semplice modulo permette il caricamento progressivo delle immagini a mano a mano che l'utente scorre la nostra pagina web. Cioè, attraverso questo modulo, le immagini che non sono ancora visualizzate nella pagina, non vengono caricate, e quando l'utente comincia a scorrere la pagina verso il basso, verrano caricate le altre immagini, ma solo nel momento in cui sarà il loro turno di essere visualizzate. Possiamo già intuire, quanto questo stratagemma faccia risparmiare tempo al nostro visitatore, che invece di dover aspettare il download di tutta la pagina può da subito cominciare a fruire del suo contenuto e mano a mano che la "scrolla" avviene il caricamento della sola immagine che serve in quel momento. Ecco subito un esempio del suo funzionamento.

Image Lazyloader è semplicissimo da configurare e non necessita di moduli aggiuntivi, lo potete trovare qui

Inoltre, partendo da questa idea sono stati ideati dei moduli simili, che con lo stesso principio di caricamento progressivo, permettono il download solo nel momento necessario di:

Descrizione d'uso di Image Lazyloader

  • installare e abilitare il modulo
  • andare nella sua pagina di configurazione
  • Distance: è la distanza in pixel tra ciò che è visualizzato ora nella finestra del browser e la prossima immagine che deve essere caricata, cioè possiamo scegliere quando l'immagine che verrà visualizzata dovrà cominciare a caricarsi
  • Placeholder Image: lasciare vuota tranne nel caso in cui abbiamo un placeholder personale che vogliamo visualizzare
  • Loader Icon: basta scegliere il gif animato che preferiamo
  • Enable on specific pages: qui possiamo determinare in quali pagine far funzionare questo modulo
  • pagina di configurazione e impostazione del modulo image lazyloader
  • arrivati a questo punto possiamo creare un apposito content type in cui andremo ad inserire molti campi immagini e una volta pubblicata la nuova pagina con tutte le nostre fotografie avremo già l'effetto a caricamento progressivo derivato dal modulo
  • se invece vogliamo inserire le immagini attraverso i tag HTML direttamente nel testo della pagina (quindi non le facciamo processare da Drupal attraverso gli appositi campi immagini) dobbiamo aggiungere un tag di blocco (es. div) con all'interno i vari tag img e gli attributi: src e data-src; gli attributi: width e height sono opzionali ma consigliati. Ecco l'esempio riportato dalla pagina ufficiale del modulo: <div class="image-container"><img src"/sites/default/files/image_placeholder.gif" data-src="/sites/default/files/actual_image.jpg" alt="Image" /></div> 
  • nell'esempio che ho riportato, le prime 6 foto sono caricate tramite tag HTML e le altre 6 sono caricate tramite campi immagine

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
1 + 0 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.