Lazy Loading en JavaScript, Accélérer le chargement d’images

Le lazy loading est une technique essentielle pour optimiser la performance des sites web, notamment en ce qui concerne le chargement des images. En différant l’affichage des images jusqu’à ce qu’elles soient visibles dans la fenêtre d’affichage (viewport), cette approche réduit la consommation de bande passante et améliore le temps de chargement des pages.

Dans ce tutoriel complet, nous allons explorer en détail le lazy loading, son importance pour le SEO, et comment l’implémenter efficacement en JavaScript avec des exemples concrets.

1. Qu’est-ce que le Lazy Loading ?

Le lazy loading, ou chargement différé, est une méthode qui consiste à ne charger les ressources (images, vidéos, iframes, etc.) que lorsqu’elles deviennent visibles dans la fenêtre de l’utilisateur. Contrairement au chargement classique (eager loading), où toutes les images d’une page sont chargées dès le début, le lazy loading charge uniquement les éléments nécessaires.

Pourquoi utiliser le Lazy Loading ?

Le lazy loading permet :

• D’accélérer le temps de chargement en ne chargeant que les ressources visibles.
• De réduire l’utilisation de la bande passante, particulièrement utile pour les utilisateurs mobiles.
• D’améliorer l’expérience utilisateur (UX) en évitant les longues attentes.
• D’optimiser le référencement naturel (SEO), notamment avec Google qui valorise les sites rapides.

2. Implémenter le Lazy Loading en HTML (Solution Native)

Depuis HTML5, il est possible d’implémenter le lazy loading sans JavaScript grâce à l’attribut loading="lazy" sur les balises <img> et <iframe>.

Exemple :

<img src="image.jpg" alt="Exemple d'image" loading="lazy">

Avantages de cette approche :

✅ Simplicité : Il suffit d’ajouter loading="lazy" aux balises.
✅ Compatibilité : Fonctionne sur les navigateurs récents (Chrome, Firefox, Edge).
✅ Aucune surcharge JavaScript : Moins de scripts = meilleure performance.

Limites :

❌ Ne fonctionne pas sur certains anciens navigateurs (ex : Safari < 15.4).
❌ Pas de gestion avancée (ex : animations de chargement).

Pour tous comprendre sur le lazy loading en HTML, consulter notre tutoriel : Le lazy loading en HTML5.

3. Lazy Loading avec JavaScript et Intersection Observer

Pour un contrôle avancé, nous pouvons utiliser l’API Intersection Observer en JavaScript. Elle permet de détecter quand un élément entre dans le viewport et de charger dynamiquement son contenu.

Étape 1 : HTML de base

<img data-src="image.jpg" alt="Exemple d'image" class="lazy">

Ici, on utilise data-src au lieu de src, pour éviter que l’image ne soit chargée immédiatement.

Étape 2 : Script Lazy Loading

document.addEventListener("DOMContentLoaded", function() {
    let images = document.querySelectorAll("img.lazy");

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.getAttribute("data-src");
                img.classList.remove("lazy");
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => {
        observer.observe(img);
    });
});

Explication du code :

1. Sélection de toutes les images avec la classe .lazy.
2. Utilisation de Intersection Observer pour surveiller l’apparition des images dans le viewport.
3. Lorsqu’une image est visible, on remplace data-src par src, puis on désactive l’observation de cette image.

Résultats :

✅ Amélioration de la performance en chargeant les images uniquement au bon moment.
✅ Compatibilité avec tous les navigateurs modernes.
✅ Plus de flexibilité (possibilité d’ajouter des animations).

4. Lazy Loading avec une Animation CSS

Pour une meilleure expérience utilisateur, on peut ajouter une animation de chargement avec CSS.

CSS pour un effet de flou progressif :

.lazy {
    filter: blur(10px);
    transition: filter 0.5s;
}
.loaded {
    filter: blur(0);
}

Modification du script JavaScript :

document.addEventListener("DOMContentLoaded", function() {
    let images = document.querySelectorAll("img.lazy");

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.getAttribute("data-src");
                img.classList.remove("lazy");
                img.classList.add("loaded");
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => {
        observer.observe(img);
    });
});

Résultat :

L’image s’affiche progressivement avec un effet de flou lorsqu’elle est chargée.

5. Lazy Loading des Images en Background

Si vous utilisez des images en arrière-plan (background-image), la méthode classique ne fonctionne pas. Il vous faut passer par une solution en JavaScript :

HTML :

<div class="lazy-bg" data-bg="background.jpg"></div>

CSS :

.lazy-bg {
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0; /* Placeholder */
}

JavaScript :

document.addEventListener("DOMContentLoaded", function() {
    let lazyBackgrounds = document.querySelectorAll(".lazy-bg");

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let bg = entry.target;
                bg.style.backgroundImage = `url(${bg.getAttribute("data-bg")})`;
                observer.unobserve(bg);
            }
        });
    });

    lazyBackgrounds.forEach(bg => {
        observer.observe(bg);
    });
});

6. Lazy Loading et SEO : Impact sur le Référencement

Google encourage les sites à utiliser le lazy loading pour optimiser la vitesse de chargement. Cependant, certaines précautions sont nécessaires pour éviter des impacts négatifs sur le SEO.

Bonnes pratiques SEO :

• ✔ Toujours ajouter un alt aux images (important pour l’accessibilité et le référencement).
• ✔ Utiliser des images aux formats adaptés (Format Webp, …).
• ✔ Utiliser des images responsives.
• ✔ Prévoir un contenu noscript pour les images, au cas où JavaScript est désactivé :

<noscript>
    <img src="image.jpg" alt="Exemple d'image">
</noscript>

Attention à ne pas retarder les images essentielles (ex : logo, images au-dessus du pli). Pensez à le précharger pour optimiser le temps de chargement de votre page web.

Comment précharger une image en HTML ?

Le préchargement d’image est une technique qui permet de charger une image en arrière-plan avant qu’elle ne soit affichée sur la page. Cela améliore la rapidité d’affichage et évite l’effet de clignotement ou de chargement tardif des images.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

1. Utiliser <link rel="preload"> (Méthode recommandée)

La méthode moderne et recommandée pour précharger une image est d’utiliser la balise <link> avec rel="preload".

Exemple :

<head>
    <link rel="preload" as="image" href="image.jpg" type="image/jpeg">
</head>

Explication :

✔ rel="preload" : Indique au navigateur de charger l’image avant qu’elle ne soit nécessaire.
✔ as="image" : Spécifie que la ressource est une image.
✔ href="image.jpg" : L’URL de l’image à précharger.
✔ type="image/jpeg" : Facultatif, mais peut aider le navigateur à optimiser le chargement.

🚀 Avantages :
✅ Améliore le temps de chargement pour les images importantes (ex : logo, bannière).
✅ Compatible avec les navigateurs modernes.
✅ Aucune surcharge JavaScript.

⚠ Limites :
❌ Ne fonctionne que pour les images déjà utilisées dans le document.

2. Charger une image en cache avec JavaScript

Si vous voulez précharger une image sans l’afficher immédiatement, vous pouvez utiliser JavaScript.

Exemple :

const img = new Image();
img.src = "image.jpg";

Explication :

✔ new Image() crée un nouvel élément image en mémoire.
✔ img.src = "image.jpg" demande au navigateur de charger l’image immédiatement.

3. Utiliser CSS pour Précharger une Image d’Arrière-Plan

Si vous utilisez une image en background-image, vous pouvez la charger en avance avec CSS.

Exemple :

.preload {
    background-image: url('image.jpg');
    position: absolute;
    width: 1px;
    height: 1px;
    visibility: hidden;
}

Puis, ajoutez cette div cachée dans votre HTML :

<div class="preload"></div>

🚀 Avantage : Permet de précharger une image utilisée plus tard comme arrière-plan.

4. Utiliser <img style="display: none;">

Une autre méthode simple consiste à cacher une image dans le DOM :

<img src="image.jpg" style="display: none;">

💡 Astuce : L’image est bien chargée par le navigateur mais ne s’affiche pas.

Pour résumé :

👉 Recommandation : Utilisez <link rel="preload"> pour les images importantes et new Image() en JavaScript pour un préchargement contrôlé.

Conclusion

Le lazy loading est une technique incontournable pour optimiser la performance des sites web en JavaScript. En combinant les solutions HTML5 natives et des implémentations avancées avec Intersection Observer, on peut considérablement améliorer la rapidité de chargement, réduire la consommation de bande passante et offrir une expérience utilisateur fluide.

Récapitulatif des techniques abordées :

✅ loading="lazy" pour une implémentation rapide et simple.
✅ Intersection Observer pour un contrôle avancé.
✅ Effet de chargement progressif avec CSS.
✅ Lazy loading des images en background.
✅ Optimisation SEO pour garantir un bon référencement.

En appliquant ces méthodes, vous pourrez booster la performance de votre site et offrir une navigation plus rapide et plus fluide à vos visiteurs.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr