Cos'è il caricamento lento e come migliora l'esperienza dell'utente?

Se c'è un aspetto di un sito web che la maggior parte dei proprietari di siti web ignora, è il tempo di caricamento della pagina. Spendi molto tempo e denaro per ottenere il design perfetto per il nostro sito Web e aggiungere diversi tipi di contenuti per coinvolgere i visitatori. E se ciò non bastasse per convertire i tuoi visitatori in utenti?

Gli studi dimostrano che per ogni secondo in più impiegato per caricare il tuo sito web, diminuisce la possibilità di convertire un visitatore in un cliente. Secondo Portent , la possibilità di conversione è del 40% dopo un secondo di caricamento, mentre scende al 34% dopo, e al 29% dopo tre secondi. Forse ti starai chiedendo: "Qual è la soluzione, allora?"

Ed è qui che entra in gioco il concetto di Lazy Loading. È un modo più veloce per caricare il tuo sito web senza sacrificare la qualità dei tuoi contenuti.

In questo articolo esploreremo il Lazy Loading, perché utilizzarlo e come si confronta con altri metodi. Entriamo nel vivo!

Sommario

• Cos'è il caricamento lento?
• L'importanza del caricamento lento
• Caricamento desideroso e caricamento lento
• Come funziona il caricamento lento
• Implementazione del caricamento lento

Cos'è il caricamento lento?

Il caricamento lento è un modo per risparmiare tempo caricando solo le parti di un sito Web di cui hai bisogno immediatamente. Invece di caricare tutto in una volta, il che può essere lento e utilizzare molte risorse, questo metodo carica i contenuti poco a poco

Le immagini o i video che non vengono caricati immediatamente spesso hanno elementi segnaposto finché non sono necessari. Ad esempio, il caricamento lento non carica tutte le immagini contemporaneamente. Carica solo quelli che puoi vedere sullo schermo. Il resto non verrà caricato finché non scorri verso il basso

Invece di aspettare che tutto venga caricato, puoi vedere subito cosa c'è già sullo schermo.

Suggerimento dell'esperto: controlla come funziona il caricamento lento su vari browser e dispositivi.Questo per assicurarti che non ci siano problemi di compatibilità.

L'importanza del caricamento lento

Sappiamo già che il Lazy Loading può aiutarti ad aumentare la conversione. Ma questo non è l’unico vantaggio che ha. Ecco alcuni altri motivi per cui dovresti implementare il Lazy Loading sul tuo sito web.

Ottimizza le prestazioni

Il caricamento lento riduce i trasferimenti di dati quando qualcuno visita il tuo sito web. Questo è fondamentale per le persone che utilizzano dispositivi mobili con Internet lento e piani dati ridotti.

Ridurre la larghezza di banda e il carico del server

Il caricamento lento consente di risparmiare dati e ridurre il lavoro del server. Ciò riduce i costi per i proprietari e gli utenti dei siti Web impedendo il caricamento dei contenuti quando non sono necessari.

Migliora la SEO

I motori di ricerca come Google danno così tanta priorità ai siti web a caricamento rapido che rappresentano un fattore di ranking ufficiale. Utilizzando la tecnica Lazy Loading, puoi aumentare la velocità di caricamento della pagina, ridurre la frequenza di rimbalzo e portare il tuo sito web a un posizionamento più elevato.

Cos'è il caricamento impaziente?

Il caricamento rapido è l'esatto opposto del caricamento lento. Inizialmente carica tutte le risorse richieste contemporaneamente, inclusi file multimediali, script e stili. Ciò significa che tutti gli elementi necessari della pagina sono immediatamente disponibili. Pertanto non è previsto alcun caricamento aggiuntivo quando gli utenti scorrono o interagiscono.

Il caricamento rapido era il metodo convenzionale utilizzato in passato e molti siti Web lo utilizzano ancora oggi.

Sebbene sia facile da implementare, il caricamento impaziente è diventato meno rilevante a causa di diversi fattori, tra cui:

Aumento delle dimensioni della pagina web

I siti Web moderni utilizzano più contenuti multimediali e parti interattive. Ciò significa che la pagina web media è molto più grande di prima. Pertanto, il caricamento impaziente può comportare tempi di caricamento iniziale della pagina più lunghi. Soprattutto per gli utenti con connessioni Internet più lente.

Impatto negativo sulle prestazioni

Tempi di caricamento delle pagine più lunghi possono compromettere importanti misure delle prestazioni del sito Web , come First Contentful Paint (FCP) e Largest Contentful Paint (LCP). Questi sono fondamentali per la SEO e l’esperienza dell’utente.

Aumento degli utenti mobili

Con l'uso massiccio della navigazione mobile, caricare le cose molto velocemente fin dall'inizio è diventato cruciale.

Caricamento impaziente e caricamento lento

Ecco un rapido confronto tra Eager Loading e Lazy Loading:

Il caricamento lento e il caricamento desideroso sono due diversi metodi di caricamento delle risorse con la propria serie di pro e contro. Tuttavia, dal punto di vista tecnologico odierno, il Lazy Loading è considerato la tecnica preferita per la maggior parte dei siti Web moderni grazie alla sua efficienza, ai vantaggi in termini di prestazioni e alla migliore esperienza utente.

Come funziona il caricamento lento

Ora che sai perché Lazy Loading garantisce risultati migliori tra i due, diamo un'occhiata a come ci riesce.

Navigazione e interazione dell'utente : il caricamento lento dipende dal modo in cui gli utenti utilizzano la pagina web.Spesso inizia quando gli utenti scorrono o muovono il mouse. Mentre scorrono, il browser sospetta che siano necessari nuovi contenuti nell'area che possono vedere. Quindi inizia a caricare tali risorse. Il caricamento lento può anche iniziare con altre azioni, come fare clic su un pulsante o passare il mouse su un elemento.

Implementazione tecnica per le immagini : il Lazy Loading funziona in modo diverso per diversi tipi di contenuto.Per le immagini, che sono molto comuni, di solito si inizia mostrando un segnaposto di bassa qualità o una semplice icona di caricamento. Quando l'utente scorre vicino all'immagine reale, viene caricata quella chiara e di alta qualità. In questo modo, gli utenti non aspettano immagini che non possono ancora vedere.

Applicazione di diverse risorse Web : il caricamento lento è un metodo flessibile che può essere utilizzato per vari elementi, non solo per le immagini.Funziona altrettanto bene con video, iframe e persino elementi che richiedono molti script. Caricare questi elementi solo quando necessario significa che puoi migliorare notevolmente la velocità di caricamento della tua pagina e gestire in modo efficiente le tue risorse. Ciò è particolarmente cruciale per risorse pesanti come i video ad alta definizione.

Implementazione del caricamento lento

In questa parte ti mostreremo i diversi modi per implementare il Lazy Loading sul tuo sito web.

Metodo 1 – Implementazione manuale del Lazy Loading

Il modo manuale di implementare il Lazy Loading non è per tutti. È complesso e dovresti avere almeno una conoscenza di codifica intermedia.

Per fare ciò, utilizzerai principalmente HTML e JavaScript. Prima di iniziare, assicurati di avere accesso ai file dei temi del tuo sito WordPress e di poter modificare tranquillamente HTML e JavaScript.

Ecco una guida dettagliata per aiutarti durante il processo:

Passaggio 1 : esegui il backup del tuo sito

Esegui sempre il backup del tuo sito WordPress prima di apportare qualsiasi modifica ai file del tema per evitare di perdere dati in caso di errore.

Passaggio 2 : modifica il file Functions.php del tema

• Accedi ai file del tuo sito WordPress (utilizzando un client FTP o un File Manager nel pannello di controllo del tuo hosting).
• Passare a /wp-content/themes/your-theme/ e trovare il file Functions.php .
• Apri Functions.php per la modifica.

Passaggio 3 : aggiungi lo script Lazy Loading

In Functions.php , aggiungi una funzione per accodare un file JavaScript per il Lazy Loading. Ecco un esempio di base:

funzione add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

Questo codice presuppone che tu abbia un file JavaScript denominato lazy-load.js in una cartella js all'interno della directory del tema.

Passaggio 4 : crea il file JavaScript

• Crea un nuovo file denominato lazy-load.js nella cartella js della directory del tema.
• Aggiungi JavaScript per gestire il caricamento lento. Ecco un esempio di base utilizzando IntersectionObserver :

document.addEventListener("DOMContentLoaded", funzione() {

let lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if (“IntersectionObserver” nella finestra) {

let lazyImageObserver = new IntersectionObserver(funzione(voci, osservatore) {

voci.forEach(funzione(voce) {

se (entry.isIntersecting) {

lascia che lazyImage = entry.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove("pigro");

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(funzione(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

Passaggio 5 : aggiorna i tag delle immagini in WordPress

Modifica i tag delle immagini per supportare il caricamento lento. Nei tuoi modelli PHP o direttamente nei tuoi post/pagine, modifica i tag delle immagini come segue:

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”descrizione immagine”>

Sostituisci placeholder-image.jpg con un'immagine a bassa risoluzione o un elemento grafico in caricamento e original-image.jpg con l'effettivo URL dell'immagine.

Suggerimento dell'esperto: utilizza segnaposto reattivi per le immagini caricate lentamente per garantire che il layout rimanga stabile.

Passaggio 6 : prova le modifiche

• Se hai installato un plug-in di memorizzazione nella cache, assicurati di svuotare la cache del tuo sito.
• Quindi, vai al tuo sito Web e scorri verso il basso fino alla sezione in cui si suppone che un'immagine venga caricata in modo lento.
• Prenditi un momento per vedere se le immagini si caricano senza problemi mentre scorri.

Appunti

• Assicurati di testare sempre prima in un ambiente di sviluppo, prima di farlo sul tuo sito web live.
• Considera l'idea di creare un tema figlio mentre lo fai. Gli aggiornamenti al tema potrebbero sovrascrivere le modifiche.
• Per altri tipi di contenuto come video o iframe, è possibile utilizzare un approccio simile in cui l' attributo src viene sostituito con un attributo data-src e caricato tramite JavaScript quando si trova nel viewport.

Questa tecnica è un modo semplice per incorporare il Lazy Loading. Se disponi di siti Web più complessi o requisiti specifici, potresti voler esplorare una soluzione più potente o un plug-in.

Metodo 2 – Utilizzo di un plugin WordPress per implementare il Lazy Loading

Questo è il metodo più semplice dei due, poiché puoi utilizzare un plug-in WordPress per abilitare il Lazy Loading in modo sicuro. Più plugin ti consentono di farlo, ma in questo esempio utilizzeremoWP-Optimize .WP-Optimize è un potente plugin per WordPress che ti aiuta ad aumentare la velocità del tuo sito web e a migliorare l'esperienza dell'utente.

Offre un metodo semplice e facile per impostare il caricamento lento di immagini, iframe e video. La sua funzionalità Lazy Load integrata ritarda automaticamente il caricamento delle risorse Web finché non sono visibili, con tempi di caricamento della pagina significativamente più rapidi. Questa è, tuttavia, una funzionalità premium di WP-Optimize.

Per abilitare la funzione:

• Apri la schedaWP-Optimize > Immagini dalla dashboard di amministrazione di WordPress
• Apri la sottoscheda Lazy Load Immagini
• Da qui puoi abilitare il caricamento lento sia per immagini che per video/Iframe

Se devi disabilitare il caricamento lento per determinate immagini, immagini di sfondo, video o iframe, abilitalo da qui. Puoi anche scegliere di saltare determinate classi di immagini.

Prima e dopo

Abbiamo testato la velocità di un sito Web di esempio prima e dopo l'implementazione di Lazy Load. Il sito web era già abbastanza veloce, con un tempo di caricamento First Contentful Paint (FCP) di 1,5 secondi,secondo GTMetrix.

Dopo aver abilitato il Lazy Loading, il FCP è diventato di 344 ms, ovvero molto più veloce di quello che avevamo prima. I risultati possono variare a seconda della quantità di contenuti presenti sulla tua pagina, ma nella maggior parte dei casi il tuo punteggio FCP migliorerà.

Pronto per accelerare il tempo di caricamento della pagina?

Quindi, questo è tutto! Abbiamo parlato di cos'è il Lazy Loading e dell'importante ruolo del Lazy Loading per i siti moderni. Aspettando di caricare le cose finché non ne hai bisogno, velocizza il caricamento delle pagine, risparmia i dati Internet e rende la navigazione più fluida, soprattutto sui telefoni con dati limitati.

Abbiamo anche dato alcuni consigli utili su come utilizzare il Lazy Loading in WordPress. Copriremo tutto, dal fai da te con il codice all'utilizzo di un plugin come WP-Optimize.

Prova ad aggiungere il Lazy Loading al tuo sito web e spiegaci come influisce sulle tue prestazioni. Hai domande? Sentiti libero di chiedere nei commenti.

Domande frequenti

Il caricamento lento è positivo o negativo?

Il caricamento lento è generalmente considerato una buona pratica in quanto presenta numerosi vantaggi. Aiuta a migliorare i tempi di caricamento delle pagine Web e migliora l'esperienza dell'utente caricando il contenuto solo quando necessario.

Cos'è il caricamento lento nell'interfaccia utente?

Il caricamento lento nell'interfaccia utente si riferisce alla pratica di caricare elementi visivi come immagini e video solo quando si trovano (o sono vicini) al riquadro di visualizzazione dell'utente.

Il Lazy Loading influisce sulla SEO?

Se implementato correttamente, il Lazy Loading può avere un impatto positivo sulla SEO migliorando i tempi di caricamento delle pagine e migliorando l’esperienza dell’utente, entrambi importanti fattori di ranking.

Dovresti caricare pigramente tutte le immagini?

Anche se è utile caricare lentamente le immagini fuori schermo, non è necessario per le immagini immediatamente visibili al caricamento della pagina. Il caricamento immediato di queste immagini può evitare qualsiasi ritardo nella loro visualizzazione.

Quali sono i problemi con il caricamento lento?

Alcuni problemi con il caricamento lento includono ritardi nel caricamento del contenuto durante lo scorrimento degli utenti, potenziali problemi con l'indicizzazione dei motori di ricerca se non è implementato correttamente e la dipendenza da JavaScript, che potrebbe non essere supportato da tutti i browser.