Caricamento lazy: ti spieghiamo i principi di base

Che cos’è il caricamento lazy?

Il caricamento lazy è la pratica di impedire il caricamento di immagini e altre risorse sulla tua pagina web fino a quando queste non vengono richieste dall’utente. Le risorse “above the fold” vengono visualizzate per impostazione predefinita, ma le immagini più in basso non vengono caricate fino a quando l’utente non arriva alla loro posizione sulla pagina.

Nei siti web che non utilizzano il caricamento lazy delle immagini, il browser scarica tutte le risorse quando l’utente accede alla pagina e prima di visualizzare la pagina stessa.

Se ti è mai capitato di fare clic su un collegamento e poi di dover aspettare a lungo prima che la pagina venisse visualizzata correttamente, è probabile che questa pagina contenesse molte risorse che hanno richiesto parecchio tempo per il download e il rendering. Questo tipo di ritardo può far sì che l’utente abbandoni la pagina web, specialmente se ciò si ripete a ogni collegamento su cui si fa clic.

Se invece viene implementato il caricamento lazy, il browser non scarica in anticipo tutte le risorse ma utilizza piuttosto un segnaposto nella posizione prevista per l’immagine.

Mentre l’utente scorre la pagina, è possibile che questi veda il segnaposto prima che il browser inserisca l’immagine prevista per quella posizione. Questo metodo di caricamento delle immagini può aumentare il tempo di caricamento della pagina e migliorare l’esperienza utente. Ciò vale soprattutto per i siti web che ospitano molte immagini o iframe. Anche se è importante sapere cosa sono le immagini con caricamento lazy, devi anche capire che il caricamento lazy non si applica solo alle immagini. Varie risorse possono trarre vantaggio dal caricamento lazy. Tuttavia, questa funzionalità viene utilizzata soprattutto per le immagini.

Confronto fra caricamento lazy e caricamento eager

Ora che abbiamo esaminato il caricamento lazy, confrontiamolo con il caricamento eager.

Mentre il caricamento lazy evita i download non necessari, il caricamento eager è l’opposto. Con il caricamento eager, tutte le immagini vengono caricate immediatamente non appena l’utente apre il sito web.

Quando l’utente arriva su una pagina che utilizza il caricamento eager, è possibile che veda indicatori di caricamento o che debba attendere che il download e il rendering siano stati completati. Ciò significa che tutte le immagini vengono comunque scaricate anche se l’utente non scorre oltre nella pagina, il che è l’opposto del caricamento lazy.

Il caricamento eager può essere vantaggioso per alcuni siti web, come quelli con pochissime immagini o con immagini altamente ottimizzate, ma per la maggior parte dei siti web questo metodo crea un rallentamento enorme.

Tuttavia, il caricamento eager può andare bene per i siti che hanno molto testo e per quelli con risorse molto leggere. Ad esempio, un sito come Wikipedia trae grande vantaggio dal caricamento eager.

Vantaggi del caricamento lazy

I vantaggi del caricamento lazy non si limitano all’aumento della velocità di caricamento del sito web. Il caricamento lazy offre anche altri vantaggi aggiuntivi, come:

Tempi più rapidi di caricamento del sito web

I siti web e le risorse di piccole dimensioni vengono caricati rapidamente. Il caricamento lazy aiuta a ridurre le dimensioni iniziali di un sito web, il che ne velocizza il caricamento nel browser.

Un sito web più veloce offre molti vantaggi. Se scegli il caricamento lazy per il tuo sito web, puoi migliorare le conversioni, aumentare e arricchire l’esperienza utente e rendere il sito molto più attraente dal punto di vista della SEO.

Minore utilizzo della larghezza di banda

Se scegli il caricamento lazy delle immagini, gli utenti del tuo sito web riceveranno solo le risorse di cui hanno bisogno. Ciò significa che il browser non dovrà sprecare larghezza di banda per scaricare immagini che l’utente non vedrà mai. Ciò ti aiuta a ridurre l’utilizzo della larghezza di banda nel tempo.

Se il tuo sito presenta molte immagini di grandi dimensioni, il risparmio di larghezza di banda può essere notevole sin da subito. Questo risparmio di larghezza di banda è vantaggioso sia per te che per l’utente. Dal momento che non devi fornire queste risorse, anche tu riduci l’utilizzo di larghezza di banda nei tuoi server.

Migliore esperienza utente

Il caricamento lazy migliora l’esperienza utente in diversi modi.

Un sito lento non piace a nessuno. Infatti, i siti lenti spesso creano nell’utente l’impressione che il dispositivo su cui stanno visualizzando il sito non funzioni nella maniera prevista. Un caricamento più rapido contribuisce anche a migliorare l’esperienza dell’utente in modi che sono meno evidenti. Ad esempio, il browser dell’utente non dovrà più scaricare così tanti file in background. Ciò contribuisce a risparmiare le risorse del sistema e a consentire ai dispositivi di funzionare meglio mentre navigano il tuo sito web.

Tutta questa attività nel browser, infatti, si traduce in attività della CPU, della batteria e di altre risorse del dispositivo. Questo è uno dei motivi per cui il caricamento lazy è una delle best practice di SEO mobile.

Migliori prestazioni SEO

Il caricamento più veloce della pagina è un aspetto critico della SEO (Ottimizzazione per i motori di ricerca). I motori di ricerca spesso penalizzano i siti lenti. Quando un sito è lento a caricarsi, in genere la colpa è delle immagini. Se vuoi aumentare le prestazioni del tuo sito e i tuoi posizionamenti sul motore di ricerca, devi massimizzare la velocità di caricamento.

Svantaggi del caricamento lazy

Le implementazioni con caricamento lazy possono assumere varie forme e non tutti i metodi di caricamento lazy sono adatti a tutti i siti.

A volte, l’implementazione del caricamento lazy può diventare un’attività complessa, soprattutto se utilizzi un CMS che preferisce un metodo di implementazione piuttosto che un altro.

Ciò significa anche che, quando tenti di utilizzare il caricamento lazy, i problemi di compatibilità sono sempre in agguato. È anche possibile che il CMS preveda il caricamento lazy per impostazione predefinita. Se provi a usare un tipo diverso di implementazione, possono insorgere problemi di compatibilità.

Alcuni altri inconvenienti possono derivare dal modo in cui l’utente scorre la pagina. Se la scorre molto velocemente, il caricamento lazy non riesce a tenere il passo. Ciò può essere deleterio per alcuni tipi di siti web. Ad esempio, lo sviluppo di siti web di e-commerce richiede immagini sempre presenti sulla pagina.

Lo scorrimento rapido può creare anche problemi di buffering. Inoltre, il caricamento lazy genera più chiamate verso il server: se l’utente continua a usare il sito, queste chiamate possono raggiungere un totale notevole.

Un ultimo potenziale inconveniente deriva dai minori benefici della memorizzazione nella cache. La memorizzazione nella cache di solito funziona solo se le risorse vengono richieste. In alternativa, le informazioni conservate a lungo nella cache possono diventare obsolete a causa della rarità del loro utilizzo dovuta a una memorizzazione lazy nella cache.

Il numero degli svantaggi può sembrare considerevole, ma per la maggior parte dei casi d’uso i vantaggi del caricamento lazy superano di gran lunga i potenziali svantaggi.

Inoltre, molti degli inconvenienti hanno a che fare anche con l’implementazione. Il caricamento lazy può assumere molte forme e quindi è importante controllare di aver scelto il metodo giusto. La giusta implementazione ti offrirà i migliori risultati possibili.

Come implementare il caricamento lazy

Il caricamento lazy può essere implementato in vari modi. Alcuni metodi manuali che utilizzano CSS vanno bene per chi sa il fatto suo in materia. Tuttavia, è probabile che le soluzioni CMS che utilizzano plug-in o componenti aggiuntivi abbiano un modulo di caricamento lazy installabile.

Alcuni plug-in e componenti aggiuntivi, soprattutto quelli legati alla memorizzazione nella cache, tendono ad avere anche opzioni di caricamento lazy. Puoi trovare librerie open source con codice JavaScript di caricamento lazy.

A prescindere da come implementi il caricamento lazy, ci sono alcune best practice che ti aiutano a usare questa tecnica al meglio. Per esempio:

• Utilizza il caricamento lazy solo per le risorse “below the fold”
• Non applicare il caricamento lazy alle risorse essenziali per la funzionalità iniziale del sito o dell’app
• Presta attenzione a eventuali errori nel caricamento delle immagini e correggili immediatamente
• Imposta parametri di caricamento lazy molto rigorosi
• Riduci il codice di caricamento lazy per renderlo più efficiente
• Implementa soluzioni di riserva per i browser che non supportano il caricamento lazy o JavaScript

Inoltre, visto che il caricamento lazy non è solo applicabile alle immagini, è possibile anche che tu debba individuare pratiche diverse per contenuti diversi.

Se non riesci a tenere a mente tutte queste considerazioni, è meglio eseguire l’implementazione e poi affrontare i problemi uno alla volta. Ad esempio, quanto ottimizzi il tuo sito web per i dispositivi mobili, prendi in considerazione gli strumenti di progettazione dell’UI che ti aiutano a mettere a punto il caricamento lazy.

Ottimizza l’esperienza utente con il caricamento lazy

Il caricamento lazy è uno strumento che puoi utilizzare per ottimizzare l’esperienza utente e ottenere tutti i vantaggi che ne derivano. Non è certo una questione di UX contro UI dal momento che il caricamento lazy può migliorare entrambi.

Inoltre, se usi strumenti che possono aiutarti a rendere il tuo sito più veloce, non hai bisogno di conoscenze tecniche molto approfondite in termini di codifica.

È comunque utile conoscere alcuni principi di base in modo da poter prendere decisioni informate su cosa implementare o quali servizi utilizzare per aiutare il tuo sito o la tua app a ottenere prestazioni migliori e più veloci per i tuoi utenti. Mailchimp offre una serie enorme di soluzioni che ti aiutano a velocizzare il tuo sito web e a migliorare l’esperienza utente.

Se hai bisogno di integrazioni, informazioni e altre risorse per velocizzare il tuo sito web o la tua app mobile, pendi in considerazione tutti gli strumenti offerti da Mailchimp.