Questa tecnica migliora le prestazioni della pagina web caricando le immagini solo quando sono visibili o vicino allo schermo dell'utente.

Nel frenetico mondo digitale di oggi, avere un sito web ad alte prestazioni è essenziale. Un aspetto fondamentale di ciò è garantire che le immagini vengano caricate in modo efficiente. Gli utenti si aspettano un'esperienza di navigazione fluida e veloce e questo articolo ti mostrerà come ottenerla.

Esplorerai il concetto di caricamento lento delle immagini e imparerai come implementarlo utilizzando HTML e JavaScript con l'API Intersection Observer.

Cos'è il caricamento lento?

Il caricamento lento ritarda il caricamento di elementi, come le immagini, fino a quando richiesto. Invece di caricare tutte le immagini quando viene caricata una pagina, il caricamento lento carica solo le immagini attualmente visibili o vicine all'area di visualizzazione dell'utente. Questo miglioramento delle prestazioni del sito Web riduce il tempo di caricamento iniziale e conserva la larghezza di banda.

instagram viewer

Perché utilizzare il caricamento lento?

Esistono diversi motivi convincenti per utilizzare il caricamento lento delle immagini sul tuo sito Web, ad esempio:

  • Caricamento della pagina iniziale più rapido: il caricamento lento impedisce il caricamento di tutte le immagini contemporaneamente, riducendo il tempo di caricamento della pagina iniziale. Gli utenti possono iniziare a interagire prima con il tuo sito, offrendo così un'esperienza utente migliore.
  • Reattività della pagina migliorata: caricando le immagini mentre gli utenti scorrono, il sito web rimane reattivo e fluido, garantendo uno scorrimento e una navigazione fluidi senza la necessità di attendere il caricamento di tutti i contenuti.
  • Risparmio di larghezza di banda: il caricamento lento conserva la larghezza di banda, rendendolo ideale per gli utenti mobili e quelli con connessioni Internet lente. Questo può riduci il consumo di dati del tuo sito web, a vantaggio degli utenti.
  • Vantaggi SEO: Motori di ricerca come Google considera la velocità della pagina come un fattore di ranking. Lattina di caricamento lento avere un impatto positivo sulle prestazioni SEO del tuo sito migliorando i tempi di caricamento.

Ora che hai capito perché il caricamento lento è vantaggioso, esploriamo come implementarlo.

Implementazione del caricamento lento: il markup HTML

Per iniziare, dovrai modificare il codice HTML per includere il file caricamento="pigro" attribuire sul tuo tag.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

IL caricamento L'attributo viene utilizzato in HTML per controllare il comportamento di caricamento degli elementi su una pagina Web. Quando imposti caricamento="pigro" su a tag, dice al browser di rinviare il caricamento della risorsa fino a quando non sarà necessaria.

Al momento la pagina si presenta così:

Implementazione del caricamento lento: l'implementazione di JavaScript

Per portare il tuo caricamento lento al livello successivo, utilizza l'API Intersection Observer. Questa API ti consente di controllare quando un elemento entra o esce dal viewport.

La logica alla base dell'utilizzo dell'Intersection Observer per il caricamento lento delle immagini è semplice: quando la pagina viene caricata, recupera un'immagine di qualità inferiore.

Quindi, non appena l'immagine diventa visibile all'interno del viewport, JavaScript la sostituisce con la versione di qualità superiore. Per metterlo in pratica, modifica il tuo codice HTML.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

In questo caso, la fonte dell'immagine primaria è la versione di bassa qualità e l'immagine di alta qualità è la fonte secondaria. La pagina quindi apparirà così:

Successivamente, seleziona tutte le immagini che desideri caricare lentamente:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Successivamente, crea un file IntersectionObserver oggetto.

const observer = new IntersectionObserver();

Quindi passare le voci (un array di IntersezioneOsservatoreEntry oggetti, che rappresentano gli elementi osservati e la loro intersezione con il viewport) e osservatore (the IntersectionObserver istanza stessa).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Successivamente, controlla le intersezioni e scambia l'immagine di bassa qualità con quella di alta qualità ogni volta che quell'elemento si interseca.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Infine, inizializza l'osservazione per ciascun elemento.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

E con ciò, hai implementato il caricamento lento con JavaScript.

Considerazioni sul caricamento lento

Quando si integra il lazy load, diventa fondamentale considerare i seguenti aspetti:

  • Accessibilità: per garantire l'accessibilità, fornire testo alternativo per le immagini con estensione alt attributo. Queste informazioni costituiscono un punto di riferimento per gli screen reader.
  • Compatibilità del browser: Prima dell'implementazione del caricamento lento, verificare la sua compatibilità con diversi browser. Non tutti i browser estendono il supporto per questa funzionalità. In alcuni casi, l'inclusione di un polyfill può diventare fondamentale, soprattutto per i browser più vecchi. Uno strumento come Posso usare è una risorsa preziosa per valutare la compatibilità del browser.
  • Test: Il test completo dell'implementazione del caricamento lento su un'ampia gamma di dispositivi e dimensioni dello schermo assume un'importanza fondamentale.

Migliorare la velocità del sito web e l'esperienza utente

Quando incorpori il caricamento lento per le immagini sul tuo sito web, puoi velocizzare il tuo sito e migliorare l'esperienza dell'utente. Tempi di caricamento più rapidi ed esperienze di navigazione più fluide sono ciò che gli utenti desiderano e questa tecnica offre lo stesso risultato.

Inoltre, potrai usufruire di una migliore SEO e risparmiare sull'utilizzo della larghezza di banda. Quindi, perché aspettare? Inizia oggi stesso a ottimizzare il tuo sito web con questo metodo semplice ma potente.