Che cos'è il caricamento lento? Un concetto chiaro

Pubblicato: 2021-07-12

Un concetto chiaro su cosa sia il caricamento lento. Come migliorare la velocità di caricamento del sito applicando la tecnica di caricamento lento. Quali sono i plug-in per il caricamento lento delle immagini consigliati e altro?

Il caricamento lento è una tecnica in cui le immagini, i video e altri file multimediali vengono caricati solo quando richiesto (in questo caso la pagina viene fatta scorrere verso il basso fino all'immagine).

Il caricamento lento è stato reso popolare da Google. Google lo ha implementato sulla maggior parte del sito Web ad alto traffico di cui è proprietario.

In realtà è un ottimo modo per migliorare le prestazioni del tuo sito Web per i tuoi utenti.

Questo è un modo migliore per implementare il caricamento dinamico delle risorse rispetto al precaricamento perché è di natura pigra e carica le risorse solo quando richiesto.

Scorrendo la pagina verso il basso, vengono caricati i file multimediali e le immagini in particolare. Ciò riduce significativamente il tempo di caricamento della pagina iniziale riducendo il numero di richieste effettuate per risorse HTML, CSS e JavaScript.

Il caricamento lento delle immagini può sempre essere implementato utilizzando plug-in di terze parti, ma in realtà è piuttosto semplice da implementare sul tuo sito Web esistente se hai dimestichezza con il codice HTML/CSS.

Perché dovrei aggiungere il caricamento lento al mio sito?

Per molto tempo, caricare tutti gli elementi della pagina in parallelo è stata la migliore pratica. Ma oggi è molto comune per gli utenti avere una connettività limitata e reti mobili veloci.

Per questo motivo, è una buona idea caricare inizialmente solo ciò di cui hai bisogno, quindi caricare risorse aggiuntive in un secondo momento quando sono necessarie.

Il caricamento lento può anche ridurre la quantità di lavoro che deve essere eseguita dal browser al momento del caricamento della pagina. Ciò significa in definitiva che otterrai un caricamento della pagina più veloce per l'utente.

What Is Lazy Loading? A Clear Concept 1

Puoi implementare molti modi per implementare il caricamento lento sul tuo sito web. Come ogni tecnica, ci sono alcuni pro e contro associati a ciascun metodo.

Come aggiungere il caricamento lento nel sito WordPress?

Puoi aggiungere il caricamento lento a qualsiasi sito Web con alcune semplici aggiunte di codice CSS e JavaScript. Tutto ciò di cui hai bisogno è anche un po' di codifica HTML.

Ma in questo post parlerò solo dei plugin di caricamento lento di WordPress che ti consentono di godere dei vantaggi del caricamento lento delle immagini su un sito WordPress.

Come aggiungere il caricamento lento usando il plug-in?

Sono disponibili molti plugin per WordPress che aggiungeranno automaticamente la funzionalità di caricamento lento al tuo sito Web con un clic.

Se desideri aumentare il tempo di caricamento complessivo del sito, ti consiglio il plug-in di ottimizzazione della velocità Permatters. Questo plugin ottimizzerà il tuo sito web per una migliore esperienza utente e prestazioni. Ha anche alcune funzionalità aggiuntive come il caricamento lento, la compressione gzip, ecc...

perfmatters lazy load
Opzione di carico pigro permanente

Se vuoi sporcarti le mani con il codice o avere qualche requisito in anticipo, ti consiglierò altri plugin seguenti.

WP Rocket è uno dei plugin di cache di WordPress più popolari. È anche il plugin più popolare per il caricamento lento delle immagini. Ti aiuterà a ridurre la velocità di caricamento e ad aumentare le visualizzazioni di pagina totali. Puoi leggere WP Rocket Review.

wp rocket image lazy load
Opzione di carico pigro WP Rocket

Puoi anche utilizzare il plug-in Light Speed ​​Cache, un altro plug-in popolare tra gli utenti di WordPress. Ti consente di utilizzare regole avanzate di memorizzazione nella cache per il tuo sito Web che aiuta a migliorare il tempo di caricamento della pagina e riduce anche l'utilizzo della larghezza di banda.

lazy load by litespeed cache
Opzione di caricamento lento della cache LiteSpeed

Inoltre, i plugin di cui sopra aiutano a caricare iFrame. Ti consiglio questi plugin per quello.

Caricamento lento vs caricamento dinamico vs precaricamento JavaScript vs caricamento lento desideroso

La grande differenza tra i quattro termini è cosa succede quando un utente visita per la prima volta il tuo sito.

Caricamento lento: con il caricamento lento, le risorse vengono caricate come richiesto (come suggerisce il nome). Ciò significa che, a seconda delle azioni degli utenti, alcuni elementi potrebbero non essere caricati affatto.

Caricamento dinamico : con il caricamento dinamico, dovrai precaricare tutto, anche se non è necessario. Quindi, a seconda della quantità di dati che devi inviare, ciò potrebbe aumentare significativamente il tempo di caricamento della pagina, anche se alcuni di quei contenuti non vengono mai visualizzati da nessuno.

Precaricamento JavaScript:

Il precaricamento JavaScript è una parte importante del processo di caricamento lento dell'immagine. Facilita la cache del browser fornendo HTML (e CSS se stai utilizzando una soluzione basata sullo stile).

Utilizza AJAX per fornire un file separato per ogni immagine sulla tua pagina. Ciò consente ai browser di iniziare a scaricare le immagini prima che siano state caricate completamente, aumentando così il numero di immagini che possono essere caricate su una connessione di rete lenta o con un computer client lento.

Caricamento lento desideroso : è simile al caricamento lento e caricherai le risorse secondo necessità. La differenza è che con il metodo desideroso, non devi preoccuparti se qualcosa è visibile o meno in questo momento. Se è già caricato, bene e bene, altrimenti caricalo solo quando diventa necessario.

Capire il caricamento lento per la SEO

Alcune persone temono che il caricamento lento delle immagini abbia un impatto negativo sulla capacità di un SEO di accedere ai suoi contenuti.

Google fa un ottimo lavoro nel memorizzare nella cache le risorse del tuo sito web ogni volta che esegue la scansione, quindi se carichi gli elementi in un modo che rimane veloce nel tempo e non cambia troppo spesso, non credo che nessuno dovrebbe preoccuparsi di influenzare la propria ricerca rango motore.

Caricamento pigro e CDN

Ci sono alcuni CDN utili nel settore che possono aiutarti a distribuire le tue immagini e file multimediali. La maggior parte di questi servizi offre un'esperienza utente eccezionale implementando la funzionalità di caricamento lento per te.

Cloudflare CDN è uno che vorrei evidenziare tra gli altri servizi CDN.

Cloudflare è una rete di distribuzione di contenuti che offre CDN gratuita ea pagamento per tutti gli utenti del suo account. Ottimizza anche il tuo sito Web e migliora la sicurezza implementando alcune strategie avanzate come l'ottimizzazione della velocità della pagina, HTTP/2 e molti altri. Ti aiuta anche a caricare in modo pigro l'immagine del tuo sito Web e i file multimediali.

caricamento pigro su desktop o dispositivi mobili: in che modo influisce sulla SEO di Google?

Il caricamento lento è in circolazione sui desktop da molto tempo. È una funzionalità disponibile nella maggior parte dei principali browser, ma ci sono alcune funzionalità, come il precaricamento e il caricamento parziale, che non sono disponibili per tutti i browser.

Con i dispositivi mobili, tuttavia, il caricamento lento è qualcosa a cui dovrai prestare attenzione.

È importante che tu lo consideri un fattore di ranking SEO perché Google sta ora prestando attenzione al caricamento lento delle immagini sui dispositivi mobili.

La chiave qui non è solo implementare il caricamento lento, ma anche assicurarsi che carichi le risorse in modo rapido ed efficiente. In caso contrario, è possibile che il posizionamento del tuo motore di ricerca venga influenzato negativamente.

Immagine di caricamento lento in diverse dimensioni

Un altro motivo per cui dovresti concentrarti sul caricamento lento delle immagini è a causa del maggiore utilizzo dei dispositivi mobili.

Alla gente piace navigare e cercare con i loro telefoni, ma non sono così veloci o precisi quando si tratta di fare clic sui collegamenti, quindi avere immagini più grandi significa che le persone probabilmente faranno clic prima che l'immagine completa venga caricata.

Quindi avere immagini più piccole sarà ovviamente migliore per i dispositivi mobili, anche se significa che è necessario caricare più dati, a lungo termine ne vale la pena perché le persone faranno clic invece di lasciare del tutto il tuo sito web.

Quali framework vengono utilizzati nel carico pigro?

Ci sono alcune opzioni a tua disposizione:

1. Picturefill (per impostazione predefinita)

Picturefill è uno script che fornisce funzionalità di caricamento lento per le tue immagini. Questa libreria JavaScript leggera funzionerà con quasi tutti i principali browser ed è anche reattiva. Quindi cambierà il suo comportamento a seconda del tipo di dispositivo che stai utilizzando.

2. LazyLoadJS (per impostazione predefinita)

LazyLoadJS è uno script che fornisce funzionalità di caricamento lento per le tue immagini, è molto leggero e funziona con tutti i principali browser. Quindi non devi preoccuparti di problemi durante l'utilizzo.

Dispone inoltre di code multiple per migliorare le prestazioni complessive del tuo sito web ed è molto facile da usare: gli sviluppatori di tutti i livelli non dovrebbero avere problemi ad usarlo.

3. LoadCSS (per impostazione predefinita)

LoadCSS è uno script che fornisce funzionalità di caricamento lento per i tuoi fogli di stile, a differenza di altre librerie che funzionano solo con immagini o file video. Questo precaricherà anche HTML e JavaScript.

4. SlimerJS (non disponibile)

SlimerJS è uno script che fornisce funzionalità di caricamento lento per le tue immagini e non utilizza alcuna libreria JavaScript, ma ha una propria API che puoi utilizzare per configurare il modo in cui funziona il caricamento lento dell'immagine.

È anche molto leggero e veloce, quindi non influirà in alcun modo sulle prestazioni del tuo sito web.

Il caricamento lento funziona nelle immagini di sfondo?

Sì, funzionerebbe nelle immagini di sfondo.

Conclusione

Il caricamento lento è una delle tecniche di ottimizzazione delle prestazioni più sottoutilizzate quando si tratta di WordPress e dei siti Web in generale.

È molto facile da implementare una volta che sai come fare, ma non molte persone lo sanno. Se vuoi migliorare la velocità di caricamento della tua pagina, ti consiglio vivamente di implementare il caricamento lento per i file di immagine e multimediali.