I modi migliori per personalizzare il tuo caricamento lento per i siti web
Pubblicato: 2019-07-29Il caricamento lento viene utilizzato per rinviare il caricamento di alcune immagini o elementi di una pagina Web per un secondo momento quando un utente visita una pagina Web. Questo di solito viene fatto per le immagini e gli elementi del sito Web below the fold. L'idea è che invece di caricare l'intera pagina Web in una volta, carichi alcune parti della pagina Web mentre l'utente continua a scorrere verso il basso.
Il vantaggio principale dell'utilizzo del caricamento lento è che riduce il tempo di caricamento del sito Web in generale. Il caricamento lento migliora le prestazioni del sito Web e offre una migliore esperienza utente caricando prima la parte superiore che i visitatori possono iniziare immediatamente a guardare o leggere. Quando i visitatori arrivano alla tua pagina web e devono aspettare a lungo, perdono il loro interesse e potrebbero andarsene. Tuttavia, se dai loro qualcosa da guardare o leggere all'istante mentre carichi il resto della pagina web, puoi tenerli agganciati al tuo sito web. Il secondo vantaggio del caricamento lento è la riduzione dei costi. Le immagini vengono scaricate solo se il visitatore del sito Web visita quella particolare sezione del sito Web. Quindi, se il visitatore non scorre verso il basso, vengono scaricati meno dati sul suo dispositivo, facendogli risparmiare denaro.
Grazie a questi vantaggi, il caricamento lento è un modo eccellente per migliorare l'esperienza utente e l'efficienza del tuo sito web.
Puoi personalizzare il caricamento lento per il tuo sito Web in due modi: utilizzando la proprietà di sfondo CSS o utilizzando il tag <img>. Tuttavia, il metodo del tag <img> è più comune dei due poiché questa tecnica è facile da usare.
Proprietà tag <img>:
Quando viene utilizzato il tag <img>, il browser utilizza l'attributo src per attivare il caricamento dell'immagine. Non importa se è la prima immagine o la centesima immagine nel tuo codice. Se il browser riceve l'attributo src, attiverà il caricamento dell'immagine. Quindi, per caricare in modo pigro queste immagini, aggiungi l'URL dell'immagine a un attributo diverso da src. Ad esempio, se inserisci l'URL dell'immagine nell'attributo data-src, il browser non attiva il caricamento dell'immagine poiché l'attributo src è vuoto.
Ora che il caricamento iniziale si è interrotto, dobbiamo comunicare al browser quando l'immagine deve essere caricata. Vogliamo attivare il caricamento dell'immagine non appena entra nel viewport. Ci sono due modi per controllare i tempi di un'immagine che entra nel viewport:
1. Utilizzo di eventi JavaScript:
In questa tecnica, i listener di eventi vengono utilizzati per ridimensionare, modificare l'orientamento e scorrere gli eventi nel browser. L'evento di scorrimento è il più ovvio. Viene utilizzato per controllare quando l'utente scorre la pagina web. Gli eventi 'orientationChange' e 'resize' sono ugualmente essenziali per il caricamento lento. L'evento di ridimensionamento viene attivato quando vengono apportate modifiche alle dimensioni della finestra del browser. L'evento 'orientationChange' si verifica quando il dispositivo viene ruotato dalla modalità verticale a quella orizzontale o viceversa. In questi casi, il numero di immagini visibili sullo schermo cambierà, quindi dovremo attivare il caricamento dell'immagine.
Quando si verifica uno di questi eventi, cerchiamo tutte le immagini presenti nella pagina che non sono state ancora caricate. Controllando tutte le immagini scaricate presenti nella pagina web che ora si trova nel viewport, scopriamo quelle che devono essere caricate istantaneamente. Questo viene fatto utilizzando lo scorrimento superiore del documento corrente, l'altezza della finestra e l'offset superiore dell'immagine.
Se un'immagine è entrata nel viewport, prendiamo l'URL dell'immagine dall'attributo data-src e lo posizioniamo nell'attributo src che attiva il caricamento dell'immagine. Quindi dobbiamo rimuovere la classe pigra dall'immagine poiché questa classe fa caricare le immagini in modo pigro. Quando tutte le immagini vengono caricate, i listener di eventi vengono rimossi.
In caso di scorrimento, l'evento di scorrimento si attiva continuamente. Quindi, per aumentare le prestazioni, possiamo aggiungere un piccolo timeout che ridurrà l'esecuzione del caricamento lento.
2. Utilizzo dell'API di osservazione dell'intersezione:
Intersection Observer API è un'API relativamente nuova nei browser. Questa tecnica rende molto semplice rilevare i tempi di un elemento che entra nella finestra. Questa tecnica offre prestazioni eccellenti senza utilizzare calcoli complessi rispetto al metodo precedente.
Innanzitutto, dobbiamo collegare l'osservatore a tutte le immagini che richiedono un caricamento lento. Quando l'API rileva che un'immagine è entrata nel viewport, preleva l'URL da data-src e lo inserisce nell'attributo src utilizzando il metodo 'isIntersecting' per attivare il caricamento dell'immagine. Successivamente, la classe pigra viene rimossa insieme alla rimozione dell'osservatore.
L'API di Intersection Observer funziona rapidamente senza far apparire il sito lento nello scorrimento rispetto all'utilizzo di eventi JavaScript. Con la tecnica dell'event listener, abbiamo dovuto aggiungere un timeout che aggiunge un leggero ritardo. Tuttavia, l'API di Intersection Observer non è supportata da tutti i browser. Pertanto, l'ascoltatore di eventi è diventato una scelta popolare per gli utenti.
Proprietà di sfondo CSS:
Per caricare le immagini di sfondo CSS, il browser deve creare CSS Object Model (CSSOM) insieme a Document Object Model (DOM) per decidere se lo stile CSS si applicherà a un DOM presente nel documento esistente. Se la regola CSS non si applica all'elemento, il browser non caricherà l'immagine di sfondo.
Con questa tecnica, applichiamo la proprietà CSS dell'immagine di sfondo quando un elemento arriva al viewport. C'è un elemento con ID bg-image (immagine di sfondo) nei CSS. Una volta aggiunta la classe lazy all'immagine, nella tecnica CSS, sovrascriviamo la proprietà bg-image e la rendiamo nulla.
L'aggiunta della classe .lazy all'immagine #bg è preferibile in CSS rispetto all'utilizzo della sola immagine #bg. Inizialmente, il browser applica l'immagine di sfondo: none all'elemento. Una volta che si scorre la pagina web, gli event listener o l'Intersection Observer rileva l'immagine presente nel viewport ed elimina la classe .lazy. Questo non è applicabile nella tecnica CSS poiché la proprietà bg-image viene applicata all'elemento che attiva il caricamento dell'immagine di sfondo.
Quindi, ecco i due modi in cui puoi personalizzare il tuo sito Web di caricamento lento. Entrambe queste tecniche forniscono risultati eccezionali. Tuttavia, se desideri una tecnica semplice, dovresti utilizzare il tag <img>. Ci sono molti plugin disponibili per gli utenti di WordPress per personalizzare le immagini di caricamento lento anche sui loro siti Web WordPress. L'ottimizzazione delle immagini per il tuo sito Web WordPress utilizzando questi plug-in, insieme al caricamento lento, migliorerà le prestazioni del tuo sito Web, fornirà un'esperienza migliore e aiuterà anche con la SEO.