Chargement différé avec `IntersectionObserver`

Le chargement différé natif couvre <img> et <iframe>. Pour tout le reste — images d’arrière-plan, vidéos, composants coûteux et widgets tiers — IntersectionObserver est l’outil adapté pour différer le travail jusqu’à ce que l’élément soit proche de la fenêtre d’affichage.

Marquez les éléments dont le chargement est différé avec un attribut data-src contenant la source réelle et affichez un petit espace réservé. Observez chaque élément ; lors de l’intersection, remplacez data-src par src (ou activez l’élément d’une autre manière), puis utilisez unobserve afin que la fonction de rappel ne soit plus jamais appelée.

CSS ne permet pas de charger background-image de manière différée nativement. Lors de l’intersection, définissez el.style.backgroundImage = `url("${el.dataset.bg}")`, ou ajoutez une classe CSS qui définit background-image. L’image commence alors à être téléchargée.

Pour les vidéos situées sous la ligne de flottaison, omettez initialement src et les éléments source. Lors de l’intersection, injectez les balises <source> et appelez video.load(). Sans cette précaution, les métadonnées vidéo peuvent être téléchargées immédiatement, avant même que l’utilisateur ne fasse défiler la page jusqu’à proximité de l’élément.

Les intégrations de réseaux sociaux, les widgets de commentaires et les scripts de discussion peuvent charger plusieurs mégaoctets. Lors de l’intersection, importez dynamiquement le script de configuration du widget : await import("/embed.js"). Le coût n’est payé que lorsque l’utilisateur fait réellement défiler la page jusqu’à cette section.

Le chargement différé natif d’une iframe télécharge tout de même le document de l’iframe. Pour les intégrations lourdes (cartes, lecteurs vidéo), utilisez un modèle de « façade » : affichez une image d’espace réservé et, lors d’un clic ou d’une intersection, remplacez-la par l’iframe réelle. Cela réduit considérablement le poids initial de la page.

rootMargin: "200px" commence le chargement 200 pixels avant l’entrée de l’élément dans la fenêtre d’affichage. Ajustez cette valeur en fonction de la vitesse de défilement : si elle est trop petite, les utilisateurs voient les espaces réservés lors des défilements rapides ; si elle est trop grande, vous annulez l’intérêt du chargement différé en chargeant tout.

Appelez toujours observer.unobserve(element) après l’activation du chargement différé. Sinon, la fonction de rappel continue d’être appelée chaque fois que l’élément réintègre la fenêtre d’affichage : cela gaspille du CPU et peut provoquer des erreurs si l’activation n’est pas idempotente.

Définissez la largeur et la hauteur des images à chargement différé, ainsi qu’une hauteur minimale pour les conteneurs concernés. Sans dimensions explicites, la page est réorganisée à mesure que le contenu se charge, ce qui provoque des sauts de défilement gênants et dégrade le score de décalage cumulatif de mise en page.

Pour une amélioration progressive complète, enveloppez l’élément à chargement différé dans <noscript> avec sa véritable source : <noscript><img src="/photo.jpg"></noscript>. Les utilisateurs sans JS obtiennent l’image immédiatement ; ceux qui utilisent JS bénéficient de la version à chargement différé. Associez cette approche à un balisage data-src approprié.

Une seule instance d’observateur peut surveiller efficacement des centaines d’éléments. Ne créez pas un observateur par élément. Créez un observateur partagé avec les options souhaitées et utilisez observe() pour enregistrer chaque cible.

Pour les éléments <img> en particulier, utilisez loading="lazy" comme mécanisme principal et réservez IntersectionObserver aux cas que le chargement différé natif ne couvre pas. Les deux mécanismes se combinent bien : le mécanisme natif gère les images sous la ligne de flottaison ; IntersectionObserver gère les arrière-plans, les composants et les autres chargeurs personnalisés.

Pourquoi est-il important d’appeler observer.unobserve(element) après l’activation d’un élément à chargement différé ?

IntersectionObserver étend le chargement différé au-delà de <img loading="lazy"> aux arrière-plans, aux vidéos, aux widgets tiers et aux imports dynamiques de composants. Utilisez des espaces réservés data-src, remplacez-les lors de l’intersection et appelez unobserve après l’activation. Préchargez avec rootMargin, réservez l’espace avec width et height, fournissez une solution de repli noscript et combinez cette approche avec le chargement différé natif lorsqu’il s’applique.