Caricamento differito con IntersectionObserver

Il lazy loading nativo copre <img> e <iframe>. Per tutto il resto, come immagini di sfondo, video, componenti costosi e widget di terze parti, IntersectionObserver è lo strumento adatto per rimandare il lavoro finché l'elemento non si trova vicino al viewport.

Contrassegni gli elementi da caricare in differita con un attributo data-src contenente la sorgente reale e visualizzi un piccolo segnaposto. Osservi ciascun elemento; quando si verifica l'intersezione, trasferisca data-src in src (o attivi l'elemento in altro modo) e rimuova l'osservazione, in modo che il callback non venga più eseguito.

CSS background-image non può essere sottoposto nativamente a lazy loading. Al verificarsi dell'intersezione, imposti el.style.backgroundImage = `url("${el.dataset.bg}")` oppure aggiunga una classe CSS che definisce background-image. L'immagine inizia a essere scaricata in quel momento.

Per i video sotto il livello visibile iniziale, ometta inizialmente src e gli elementi source. Al verificarsi dell'intersezione, inserisca i tag <source> e chiami video.load(). In caso contrario, i metadati del video potrebbero essere scaricati subito, prima ancora che l'utente scorra fino a raggiungere l'elemento.

I contenuti incorporati dei social media, i widget per i commenti e gli script delle chat possono scaricare megabyte di dati. Al verificarsi dell'intersezione, importi dinamicamente lo script di configurazione del widget: await import("/embed.js"). Il costo viene sostenuto solo quando l'utente scorre effettivamente fino alla sezione.

Il lazy loading nativo degli iframe scarica comunque il documento dell'iframe. Per i contenuti incorporati pesanti, come mappe e lettori video, utilizzi il pattern "facade": mostri un'immagine segnaposto e, al clic o al verificarsi dell'intersezione, la sostituisca con l'iframe reale. In questo modo riduce drasticamente il peso iniziale della pagina.

rootMargin: "200px" avvia il caricamento 200 px prima che l'elemento entri nel viewport. Lo regoli in base alla velocità di scorrimento: se è troppo piccolo, durante gli scorrimenti rapidi gli utenti vedranno i segnaposto; se è troppo grande, annullerà lo scopo del lazy loading perché verrà caricato tutto.

Esegua sempre observer.unobserve(element) dopo l'attivazione del caricamento differito. In caso contrario, il callback continuerà a essere eseguito ogni volta che l'elemento rientra nel viewport, sprecando CPU e causando potenziali bug se l'attivazione non è idempotente.

Imposti width e height sulle immagini con caricamento differito e una min-height sui contenitori con caricamento differito. Senza dimensioni esplicite, la pagina viene ridisposta quando il contenuto viene caricato, causando fastidiosi salti durante lo scorrimento e un punteggio Cumulative Layout Shift negativo.

Per un Progressive Enhancement completo, racchiuda l'elemento con caricamento differito in <noscript> includendo il src reale: <noscript><img src="/photo.jpg"></noscript>. Gli utenti senza JavaScript ricevono l'immagine con caricamento immediato; quelli con JavaScript ricevono la versione con caricamento differito. Abbini questa soluzione a un markup data-src appropriato.

Una singola istanza di observer può osservare centinaia di elementi in modo efficiente. Non crei un observer per ogni elemento. Crei un unico observer condiviso con le opzioni desiderate e utilizzi observe() per registrare ogni target.

Per gli elementi <img> in particolare, utilizzi loading="lazy" come meccanismo principale e riservi IntersectionObserver ai casi non coperti dal lazy loading nativo. Le due soluzioni si combinano senza problemi: il caricamento nativo gestisce le immagini sotto il livello visibile iniziale, mentre IntersectionObserver gestisce sfondi, componenti e altri loader personalizzati.

Perché è importante chiamare observer.unobserve(element) dopo l'attivazione di un elemento con caricamento differito?

IntersectionObserver estende il lazy loading oltre il semplice <img loading="lazy">, includendo sfondi, video, widget di terze parti e importazioni dinamiche di componenti. Utilizzi segnaposto data-src, trasferisca il valore quando si verifica l'intersezione e rimuova l'osservazione dopo l'attivazione. Pre-carichi con rootMargin, riservi spazio con width/height, fornisca un fallback noscript e combini il tutto con il lazy loading nativo nei casi in cui sia applicabile.