Indipendentemente dallo scopo del tuo sito Web, le pagine Web lente distoglieranno immediatamente i visitatori.

Il caricamento rapido è essenziale per un’ottima esperienza utente durante la navigazione sul Web. Nel 2020, l’indice di velocità media (o quanto tempo impiega in media una pagina Web per visualizzare elementi visibili) ha registrato una tendenza di circa sei secondi.

E anche questo arco di tempo mette alla prova la nostra pazienza. Su dispositivo mobile, un tempo di caricamento aumenta da un secondo a sei secondi in più rispetto alla frequenza di rimbalzo doppia.

Perché il caricamento di una pagina Web potrebbe richiedere molto tempo? Una possibile ragione è la dimensione della pagina – più specificamente, la quantità di contenuto in una pagina Web e le dimensioni del file di ciascun contenuto.

Molte immagini, video e altri media possono limitare la velocità della pagina e inviare visitatori frustrati altrove. Fortunatamente, esiste una soluzione che non richiede il taglio dei contenuti. Si chiama Lazy Loading (caricamento lento).

Il lazy loading migliora le prestazioni del tuo sito riducendo i tempi di caricamento, limitando l’utilizzo della larghezza di banda e persino dando una spinta al SEO del tuo sito.

In questo post, spiegherò il caricamento lento e la sua controparte, il caricamento desideroso. Discuteremo anche del perché il caricamento lento potrebbe essere un’ottima funzionalità sul tuo sito Web e come aggiungerlo alle tue pagine.

Che cos’è il Lazy Loading?

Il lazy loading è una tecnica utilizzata dalle pagine Web per ottimizzare i tempi di caricamento. Una pagina Web carica inizialmente solo il contenuto richiesto e attende di caricare il contenuto rimanente della pagina fino a quando l’utente non ne ha bisogno.

Inoltre riduce il tempo necessario per l’apertura di una pagina Web poiché il browser carica solo una parte del contenuto della pagina alla volta.

Il processo si chiama “pigro” perché ritarda il caricamento finché non è necessario, allo stesso modo in cui qualcuno potrebbe rimandare un’attività. Ma in questo caso, la pigrizia è una grande cosa.

Probabilmente hai già visto un caricamento lento prima. Andiamo a Google Immagini per un esempio. Se cerco foto di cani bassotti, Google troverà un sacco di immagini per me su una singola pagina di risultati.

Il caricamento di tutte queste immagini sulla pagina in una volta non avrebbe senso, dal momento che probabilmente non scorro troppo in basso prima di trovare un’immagine che mi piace e lasciare. Perché perdere tempo prezioso per caricare e dati sui bassotti non vedrò mai?

Google Immagini implementa invece il caricamento lento. Per i contenuti nascosti, carica immagini segnaposto per sostituire le immagini reali.

Il caricamento di questi segnaposto richiede molto meno tempo rispetto al contenuto con rendering completo. Le immagini reali si caricano rapidamente quando viene visualizzato il loro segnaposto (ovvero quando scorro verso il basso).

Tecniche di caricamento su richiesta come questa sono utilizzate in tutto il Web. Visita alcuni dei tuoi siti preferiti ricchi di immagini: è probabile che utilizzino questa tecnica.

Mentre il lazy loading è più comunemente usato sulle immagini, può essere applicato a qualsiasi elemento della pagina, inclusi testo, video o altri contenuti incorporati.

Che cos’è l’Eager loading?

L’Eager loading è l’opposto del caricamento lento. Con l’Eager loading, una pagina Web carica immediatamente tutto il suo contenuto. Il caricamento rapido consente al browser di memorizzare tutti i contenuti della pagina Web nella sua cache, il che può essere utile se i visitatori tornano alla pagina.

Tuttavia, questo metodo può essere lento nel caricare file di pagine Web più grandi.

Le pagine con meno dati su di esse tendono a impiegare un caricamento desideroso. Prendi la tua pagina Wikipedia media: questi articoli sono dominati dal testo, che occupa molto meno spazio per i file rispetto alle immagini. Pertanto, Wikipedia sceglie il caricamento desideroso rispetto al caricamento lento per il contenuto della sua pagina.

Quando utilizzare il Lazy Loading

Il caricamento lento è ottimo per le pagine Web lunghe con molti contenuti pesanti (come immagini, gif e video) che non sono essenziali per l’esperienza dell’utente al primo caricamento.

Non esistono linee guida rigorose per le pagine che richiedono il caricamento lento, ma puoi effettuare una verifica della velocità del tuo sito e del coinvolgimento degli utenti con e senza caricamento lento per effettuare questa chiamata. A seconda dei risultati, altre misure per aumentare il tempo di caricamento potrebbero valere meglio il tuo tempo.

Applicare il caricamento lento al contenuto della pagina presenta molti potenziali vantaggi:

Aiuta a caricare la tua pagina più velocemente. Ciò migliora l’esperienza dei visitatori, aumenta il numero di visitatori coinvolti e conversioni e aiuta il tuo SEO.

Riduce l’utilizzo dei dati poiché il browser carica una frazione del contenuto totale della pagina per visita. Ciò consente di risparmiare sui costi dei dati sia per te che per i tuoi visitatori: pagherai di meno per caricare meno articoli e i tuoi utenti non avranno bisogno di altrettanti dati per caricare le tue pagine web.

Risparmia l’energia necessaria per caricare il contenuto, preservando la durata della batteria. Inoltre, impedisce ai computer di surriscaldarsi e suonare come motori a reazione.

Mantiene i visitatori sulla tua pagina se continui a offrire contenuti pertinenti. Un primo esempio di ciò è lo scroll infinito. I siti di social media lo fanno continuamente per attirare la nostra attenzione.
Quando utilizzare il caricamento desideroso

Il caricamento lento può dare al tuo sito alcuni importanti vantaggi, ma non sempre. A volte è meglio optare per l’approccio di caricamento immediato della vecchia scuola di caricamento desideroso. Questi casi includono:

Tutto il contenuto visualizzato “Above the Fold“

La piega è la parte inferiore della finestra del browser web. Poiché lo spazio above the fold viene visualizzato al caricamento della pagina, il contenuto in quest’area dovrebbe essere immediatamente visibile agli utenti.

La piega si trova in luoghi diversi per dimensioni dello schermo e della finestra diverse, quindi visualizza il tuo sito Web su diversi dispositivi e usa il tuo giudizio per determinare da dove sulla pagina iniziare a caricare il contenuto in modo pigro.

Quando è necessario caricare le risorse in background

Qualsiasi codice o supporto speciale che viene eseguito in background nella tua pagina dovrebbe rientrare nel caricamento desideroso. Un esempio di ciò sono le applicazioni Web, che richiedono la maggior parte o tutte le funzionalità completamente caricate prima di essere eseguite.

Se la tua pagina web ha un contenuto minimo pesante

Non utilizzare il lazy loading se non ti serve. Esistono alcuni motivi per cui un caricamento eccessivo potrebbe influire negativamente sulle prestazioni del sito:

Un caricamento dinamico eccessivo sulla tua pagina provoca interruzioni e interrompe l’esperienza dei tuoi visitatori.

Nascondere troppi contenuti al caricamento della pagina potrebbe effettivamente funzionare contro la SEO. Se alcuni contenuti non vengono visualizzati, è possibile che non vengano indicizzati dai motori di ricerca. Per assicurarti che il tuo sito Web sia letto correttamente da Google, consulta la loro guida per i contenuti caricati.

Il caricamento lento comporta la modifica del codice del tuo sito Web. Avrai bisogno di risorse e / o tempo per apportare queste modifiche e testarle.

Riassumendo, se una pagina è corta e / o contiene contenuti prevalentemente leggeri (ad es. Testo dominante con immagini / video minimi), è meglio evitare un eccesso di ingegneria con caricamento lento. My Sausage Dog Blog funzionerà perfettamente senza di essa.

Come implementare il caricamento lento per le tue immagini

Esistono diversi modi per aggiungere il caricamento lento al tuo sito, a seconda che tu voglia interagire direttamente con il codice del tuo sito web. Alcuni browser potrebbero anche applicare il caricamento lento delle pagine Web automaticamente.

Usa un componente aggiuntivo

Per un’opzione facile e veloce, cerca un componente aggiuntivo affidabile e ben mantenuto per il tuo sistema di gestione dei contenuti o per la creazione di siti Web. Ad esempio, WordPress ha diversi plugin per immagini a caricamento lento che faranno gran parte del lavoro per te. Altre piattaforme CMS offrono plugin / moduli / estensioni per lo stesso scopo.

Utilizza l’attributo HTML “caricamento”

È possibile attivare / disattivare le procedure di caricamento con ciascuna immagine in una pagina Web con l’attributo “lazy”. Per specificare l’impostazione di caricamento di un <img>, aggiungere l’attributo al tag come segue:

Il caricamento lento è un’ottima opzione per migliorare i tempi di caricamento della pagina e mantenere i visitatori sul tuo sito. Se scegli il caricamento lento, assicurati di testare il tuo sito con questa nuova funzionalità prima di avviarlo.

Eventuali bug potrebbero impedire la visualizzazione del contenuto nascosto e nessun contenuto è peggiore del contenuto lento. Se fatto bene, però, il caricamento lento porterà le tue pagine da ritardo a vantarsi.