Cette technique améliore les performances des pages Web en chargeant les images uniquement lorsqu'elles sont visibles ou proches de l'écran de l'utilisateur.

Dans le monde numérique en évolution rapide d’aujourd’hui, disposer d’un site Web performant est essentiel. Un aspect essentiel est de garantir que vos images se chargent efficacement. Les utilisateurs attendent une expérience de navigation fluide et rapide, et cet article vous montrera comment y parvenir.

Vous explorerez le concept de chargement différé d'images et apprendrez à l'implémenter à l'aide de HTML et de JavaScript avec l'API Intersection Observer.

Qu’est-ce que le chargement différé?

Le chargement différé retarde le chargement des éléments, tels que les images, jusqu'à ce qu'ils soient requis. Au lieu de charger toutes les images lors du chargement d'une page, le chargement différé ne charge que les images actuellement visibles ou proches de la zone de visualisation de l'utilisateur. Cette amélioration des performances du site Web réduit le temps de chargement initial et économise la bande passante.

instagram viewer

Pourquoi utiliser le chargement différé?

Il existe plusieurs raisons impérieuses d’utiliser le chargement paresseux des images sur votre site Web, telles que :

  • Chargement initial de la page plus rapide: Le chargement différé empêche le chargement de toutes les images en même temps, réduisant ainsi le temps de chargement initial de la page. Les utilisateurs peuvent commencer à interagir avec votre site plus tôt, ce qui se traduit par une meilleure expérience utilisateur.
  • Réactivité améliorée des pages: En chargeant les images au fur et à mesure que les utilisateurs font défiler, le site Web reste réactif et fluide, garantissant un défilement et une navigation fluides sans avoir à attendre que tout le contenu se charge.
  • Économies de bande passante: Le chargement différé préserve la bande passante, ce qui le rend idéal pour les utilisateurs mobiles et ceux disposant de connexions Internet lentes. Ceci peut réduisez la consommation de données de votre site Web, au profit des utilisateurs.
  • Avantages du référencement: Les moteurs de recherche comme Google Considérez la vitesse des pages comme un facteur de classement. Le chargement paresseux peut impacter positivement les performances SEO de votre site en améliorant le temps de chargement.

Maintenant que vous comprenez pourquoi le chargement paresseux est bénéfique, explorons comment l'implémenter.

Implémentation du chargement différé: le balisage HTML

Pour commencer, vous devrez modifier votre code HTML pour inclure le chargement="paresseux" attribut sur votre Mots clés.

<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>

Le chargement L'attribut est utilisé en HTML pour contrôler le comportement de chargement des éléments sur une page Web. Lorsque vous définissez chargement="paresseux" sur un balise, elle indique au navigateur de différer le chargement de la ressource jusqu'à ce qu'elle soit nécessaire.

Pour le moment, la page ressemble à ceci :

Implémentation du chargement différé: l'implémentation JavaScript

Pour faire passer votre chargement paresseux au niveau supérieur, utilisez l'API Intersection Observer. Cette API vous permet de surveiller quand un élément entre ou sort de la fenêtre.

La raison derrière l'utilisation d'Intersection Observer pour le chargement paresseux d'images est simple: lorsque la page se charge, elle récupère une image de qualité inférieure.

Ensuite, à mesure que cette image devient visible dans la fenêtre, JavaScript la remplace par la version de meilleure qualité. Pour mettre cela en pratique, modifiez votre code 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>

Ici, la source d'image principale est la version de basse qualité et l'image de haute qualité est la source secondaire. La page ressemble alors à ceci :

Ensuite, sélectionnez toutes les images que vous souhaitez charger paresseusement :

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

Après cela, créez un IntersectionObservateur objet.

const observer = new IntersectionObserver();

Passez ensuite les entrées (un tableau de IntersectionObserverEntry objets, représentant les éléments observés et leur intersection avec la fenêtre) et l'observateur (le IntersectionObservateur instance elle-même).

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

Ensuite, vérifiez les intersections et remplacez l'image de mauvaise qualité par celle de haute qualité chaque fois que cet élément se croise.

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
 }
 });
});

Enfin, initialisez l’observation pour chaque élément.

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

Et avec cela, vous avez implémenté le chargement différé avec JavaScript.

Considérations sur le chargement paresseux

Lors de l’intégration du chargement paresseux, il devient essentiel de considérer les aspects suivants :

  • Accessibilité: Pour garantir l'accessibilité, fournissez un texte alternatif pour les images avec le alt attribut. Ces informations servent de point de confiance pour les lecteurs d’écran.
  • Compatibilité du navigateur: Avant la mise en place du lazy chargement, confirmez sa compatibilité avec les différents navigateurs. Tous les navigateurs ne prennent pas en charge cette fonctionnalité. Dans certains cas, l'inclusion d'un polyfill peut devenir impérative, notamment pour les navigateurs plus anciens. Un outil comme Puis-je utiliser est une ressource précieuse pour évaluer la compatibilité des navigateurs.
  • Essai: Les tests complets de l’implémentation du chargement différé sur un éventail d’appareils et de dimensions d’écran revêtent une importance primordiale.

Améliorer la vitesse du site Web et l'expérience utilisateur

Lorsque vous intégrez le chargement paresseux des images sur votre site Web, vous pouvez accélérer votre site et améliorer l'expérience utilisateur. Un temps de chargement plus rapide et des expériences de navigation plus fluides sont ce que souhaitent les utilisateurs, et cette technique offre la même chose.

De plus, vous bénéficierez d'un meilleur référencement et économiserez sur l'utilisation de la bande passante. Alors pourquoi attendre? Commencez à optimiser votre site Web dès aujourd'hui avec cette méthode simple mais puissante.