Immagini a caricamento lento: Guida completa Plus 3 modi per implementarla

Lazy Loading Images: Guida completa


Con l’aumentare della funzionalità e dell’interattività sul Web, negli ultimi anni si è registrato un costante aumento delle dimensioni della pagina Web. A partire dall’inizio del 2018, la dimensione media della pagina su Internet superava i 2 MB! Come combattere questo? Una piccola cosa chiamata immagini a caricamento lento è una delle soluzioni migliori.

In questa guida, esaminiamo tutte le complessità delle immagini di caricamento pigro, e parlare in tre modi diversi per implementarlo.

Cominciamo con il sommario di ciò che verrà:

  • Perché il caricamento lento è importante?
  • Che cos’è il caricamento lento?
  • Vantaggi del caricamento lento
  • Cosa considerare quando si caricano immagini in modo pigro
  • Opzione 1: implementare il caricamento lento da zero (adatto ai principianti: ⭐ / 5)
  • Opzione 2: utilizzare un plug-in JavaScript (adatto ai principianti: ⭐⭐ / 5)
  • Opzione 3: utilizzare un plug-in WordPress (adatto ai principianti: ⭐⭐⭐⭐⭐ / 5)
  • Conclusione

Perché il caricamento lento è importante?

L’enorme payload di una pagina Web è costituito principalmente da immagini, script, fogli di stile, caratteri e video. Tuttavia, le immagini occupano oltre il 60% delle dimensioni di una tipica pagina Web. Le immagini sono anche fondamentali per la progettazione di una pagina Web, quindi non è che tu possa sbarazzartene.

Senza alcuna ottimizzazione, il browser Web dell’utente scarica tutte le risorse prima di eseguire il rendering completo di una pagina. Ciò comporta un aumento dei tempi di caricamento, che può allontanare le persone. WooCommerce stimato che per ogni 100 ms di miglioramento della velocità della pagina, un sito Web di e-commerce può aumentare le entrate dell’1%.

In uno scenario del genere, fare tutto ciò che serve per ottimizzare i tempi di caricamento ha molto senso. E poiché le immagini sono il principale contributo alla dimensione della pagina Web, iniziare con esse è una buona idea. È qui che entra in gioco il caricamento lento.

Che cos’è il caricamento lento?

Per capire come funziona il caricamento lento, ecco una rapida GIF animata che dimostra come le immagini vengono visualizzate su CodeinWP.

Demo di caricamento immagini pigroDimostrazione di caricamento lento su CodeinWP

Quando la pagina viene caricata, tutte le immagini non vengono scaricate immediatamente. Quando scorri verso il basso fino a un’immagine, vedi prima una versione sfocata di essa e l’immagine effettiva inizia a caricarsi sullo sfondo. Questa immagine sfocata è una versione a bassa definizione dell’immagine finale, a una frazione della dimensione. Questo fenomeno di differimento del download e del rendering dell’immagine fino a quando l’utente non ci scorre sopra è esattamente ciò che viene chiamato caricamento lento.

Sebbene "pigro" è generalmente associato negativamente, il caricamento lento è in realtà una buona pratica e porta a ridurre i tempi di caricamento della pagina ottimizzando il sito in generale.

Nota. In questo post, esaminiamo il processo di caricamento delle immagini lazy, ma il caricamento lazy non si limita solo alle immagini: puoi utilizzare la stessa idea quando esegui il rendering di qualsiasi altra risorsa come i video, i commenti (c’è un’intera sezione su come farlo in questo post) e persino i caratteri.

Vantaggi del caricamento lento

Poiché il tempo di caricamento di una pagina Web contribuisce in modo determinante all’abbandono, le immagini di caricamento lento possono portare in modo significativo a un aumento degli utenti che rimangono sulla pagina fino a quando non si carica, il che potrebbe portare a vendite o conversioni più elevate.

L’altro vantaggio significativo delle immagini a caricamento lento è la riduzione delle bollette del server. Fornisci solo quelle immagini che lo spettatore scorre, e risparmi sulla larghezza di banda per le parti della pagina che non sono state visualizzate. Poiché le immagini costituiscono una parte dominante della grammatura della pagina, ciò potrebbe comportare costi potenzialmente inferiori per il server.

Caricare tutte le immagini in primo piano è potenzialmente dannoso anche per i tuoi lettori. Se l’utente utilizza un piano dati illimitato per il Web, probabilmente non dovrebbe importare. Tuttavia, nei piani con dati limitati, stai salvando i dati del tuo visualizzatore caricando le immagini in modo pigro.

Cosa considerare quando si caricano immagini in modo pigro

Ora che hai deciso di implementare il caricamento lento sul tuo sito Web nel modo giusto, passiamo ad alcune considerazioni chiave su come farlo.

Identifica le immagini che desideri caricare lentamente

Non tutte le immagini sono ideali per il caricamento lento. Ad esempio, non vorrai caricare pigri quelli che sono parte integrante della struttura del tuo progetto e devono essere caricati per rendere tutto correttamente.

Solo le immagini che sono fuori schermo e che non contribuiscono alla struttura della pagina devono essere considerate per il caricamento lento. In genere, queste sono immagini nel file  elementi che compaiono nel corpo della pagina.

Scegli i segnaposto immagine

La prossima cosa da considerare è l’immagine o il colore intermedi che dovrebbero essere mostrati quando l’immagine viene caricata dopo che un visualizzatore ci ha fatto scorrere sopra. Il tempo di caricamento dell’immagine dipende dalla dimensione dell’immagine e può anche richiedere fino a pochi secondi. Pertanto, è necessario considerare ciò che si preferirebbe utilizzare durante il tempo di caricamento.

Ci sono due direzioni che gli sviluppatori di solito prendono in questo senso:

  • Usa il colore dominante dell’immagine come sfondo
  • Utilizzare una versione di bassa qualità dell’immagine

segnaposto a bassa risoluzioneUn esempio di versioni di immagini di bassa qualità come segnaposto per il caricamento lento

La scelta giusta qui dipende dal design del tuo sito e da cosa preferiresti mostrare all’utente durante l’attesa del caricamento dell’immagine.

Sebbene una tecnica sia caricare le immagini non appena entrano nella porta di visualizzazione, potresti prendere in considerazione l’aggiunta di un tempo di buffer prima che avvenga, in modo che l’utente non veda mai il segnaposto.

Fare attenzione a modificare la struttura della pagina durante il caricamento delle immagini

Prima che un’immagine venga caricata, potrebbe essere mostrata usando dimensioni 0 px. Questo non è l’ideale per mantenere la struttura del design.

Ciò può facilmente modificare il layout della pagina e la posizione del testo. Una soluzione semplice è quella di aggiungere subito le dimensioni corrette all’immagine – questo assicura che la dimensione dell’elemento immagine rimanga la stessa dopo il caricamento.

Con le considerazioni sopra menzionate, vediamo ora come possiamo effettivamente implementare il caricamento lento su un sito WordPress.

Opzione 1: implementare il caricamento lento da zero

Vediamo prima come farlo senza utilizzare alcun plug-in. Questa opzione è consigliata a coloro che si sentono a proprio agio con JavaScript. Idealmente, è necessario eseguire le seguenti operazioni:

  1. Impedisci caricamento immagine durante il caricamento della pagina: quando specifichi l’URL o il percorso dell’immagine nell’attributo src di  tag, l’immagine verrà scaricata dal browser durante il caricamento della pagina. Per impedire al browser di scaricare l’immagine, è necessario specificare la posizione dell’immagine nell’attributo data-src di  tag invece.
  2. Registrare le funzioni del gestore eventi in JavaScript per verificare la presenza di elementi su due eventi: caricamento e scorrimento.
  3. Quando un elemento entra nella porta di visualizzazione, carica il valore dell’elemento data-src nell’elemento src, che attiva il browser per caricare l’immagine.

Una semplice implementazione di questo processo è stata spiegata da Robin Osborne e la demo è disponibile su CodePen.

Opzione 1.1: utilizzare l’API osservatore intersezione

L’API dell’osservatore dell’intersezione aiuta a identificare gli elementi DOM che si trovano nella porta di visualizzazione in un dato momento. Questo è un modo più pulito di implementare il carico lento senza scrivere le funzioni del gestore eventi. Anche il numero di righe di codice per implementare il carico lento diminuisce considerevolmente. Tuttavia, la compatibilità del browser rimane un problema.

Il blog degli sviluppatori di Google spiega l’implementazione dell’API dell’osservatore dell’intersezione tramite questa demo di CodePen.

Opzione 2: utilizzare un plug-in JavaScript

Le due opzioni sopra descritte richiedono una conoscenza di livello intermedio di JavaScript. Se stai cercando un’implementazione più semplice del caricamento lento senza utilizzare un plug-in pesante che carica il server, puoi provare il semplice plug-in JavaScript, Blazy.

Il Libreria bLazy con dimensioni inferiori a 2 KB non comporta alcun carico aggiuntivo sul payload, consentendo al contempo di gestire facilmente le immagini con caricamento lento.

Per utilizzare la libreria bLazy, è necessario inizializzare  elementi con i seguenti attributi:

  • class: imposta la classe di tutti  tag per b-pigro
  • src: collegamento all’immagine segnaposto
  • data-src: collegamento all’immagine da caricare
  • data-src-small: collegamento all’immagine da caricare su schermi di larghezza inferiore a 420 pixel

È necessario inizializzare la libreria bLazy in poche righe di codice e tutte le immagini verranno renderizzate mediante caricamento lento.

;(funzione() {
// Inizializza
var bLazy = new Blazy ();
}) ();

È disponibile una demo di CodePen Qui.

Opzione 3: utilizzare un plug-in WordPress

Ci sono un paio di opzioni là fuori che possono darti un caricamento lento. Soprattutto:

Tutti questi plugin gestiranno automaticamente il caricamento lento. Ognuno ha anche alcune belle caratteristiche laterali.

Ad esempio, Lazy Load di WP Rocket carica anche i video di YouTube in modo pigro e li sostituisce con una miniatura.

Optimole, oltre ad essere la più recente aggiunta alla famiglia ThemeIsle, offre anche un’ottimizzazione delle immagini solida e solida (come testato qui) con funzionalità piuttosto avanzate in tal senso. Ad esempio, ti offre un ridimensionamento dinamico in base alle dimensioni dello schermo dell’utente.


Ottimizzazione dell'immagine e Lazy Load di Optimole Ottimizzazione delle immagini & Lazy Load di Optimole

Author (s): Optimole

Versione corrente: 2.3.1

Ultimo aggiornamento: 21 aprile 2020

optimole-wp.zip


96% di commenti


50.000 + Installa


WP 4.7 + Richiede

Come con la maggior parte dei plug-in, per ottenere un caricamento lento, basta installare il plug-in e abilitare la funzione nel pannello di controllo del plug-in:

Optimole for Lazy Loading Images

Conclusione

Questo post ha esplorato la necessità e i vantaggi delle immagini a caricamento lento. Abbiamo anche discusso di tre modi diversi di implementare il caricamento lento su un sito Web WordPress:

  • Se hai una competenza intermedia in JavaScript, puoi implementare il caricamento lento da zero
  • Se conosci un po ‘di programmazione ma non vuoi plug-in, una libreria JavaScript leggera, bLazy è un’opzione
  • Se desideri una soluzione con un clic per caricare immagini in modo pigro sul tuo sito Web, dovresti scegliere un plug-in come Optimole

Cosa ne pensi del caricamento lento? Hai provato a usarlo per migliorare le prestazioni del tuo sito web?

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map