Comment charger ses images en Lazy Loading

Titre Lazy Loading écris en gros sur un fond vert

Dans cet article, on continue à travailler les perfs, toujours sur le chantier des images. Précédemment je te montrais comment j’ai fait pour optimiser automatiquement les images de mon blog (compression + progressivité).

Et bien aujourd’hui je vais te parler de Lazy Loading.

Un truc connu depuis des lustres, mais malgré ça, il y a encore des millions de sites qui ne l’appliquent toujours pas et je trouve ça dommage.

Perso, j’n’ai jamais fait ça non plus. Et j’avais bien envie de le tester sur mon blog. Du coup j’ai été voir ce qui se cachait derrière tout ça. Et en fait, pour mettre ça en place, c’est ultra EASY 🙂.

Qu’est ce que le Lazy Loading?

En gros, le Lazy Loading, c’est charger des images que lorsque qu’elles arrivent au dessus de la ligne de flottaison. En faisant du Lazy loading, ça évite de tout charger d’un coup pour rien. Par exemple, si tu vas sur ma homepage et que tu ne scroll pas jusque tout en bas, ça ne sert à rien de charger toutes les images.

En optant pour le Lazy loading, ton navigateur fait moins de requêtes, télécharge moins de choses et le temps de chargement global devient carrément plus rapide.

Point de vue perfs, le gain de poids et de vitesse est vraiment intéressant!

Comment on fait pour faire du Lazy Loading?

Pour ma part, j’ai été voir les guidelines de Google à ce sujet.

En gros, ils expliquent que l’astuce consiste à exploiter l’attribut data-src. Je vais t’expliquer avec un exemple. Ce sera plus simple.

Alors voilà, imaginons que je veuille afficher une simple image sans faire de lazy loading. En temps normal j’aurais un truc comme ça dans mon code.

<img src="monimage.jpg">

Et maintenant, je veux faire du Lazy loading, du coup j’aurais ça.

<img src="placeholder.jpg" data-src="monimage.jpg">

En gros j’ai mis une image générique dans l’attribut src. Maintenant, admettons que j’aie 20 éléments images sur ma page. Et bien ces 20 éléments afficheront par défaut la même image générique. Du coup le navigateur, au moment de loader la page, ne chargera qu’une seule image.

Ensuite vient l’astuce!

Je vais dans un premier temps rajouter une class à ma balise <img>. Je vais l’appeler « lazy ». Cette class va permettre de m’indiquer que l’image est à charger en lazy loarding.

<img class="lazy" src="placeholder.jpg" data-src="monimage.jpg">

Suite à ça, il ne me reste plus qu’à développer un p’tio script JS qui va s’appliquer sur toutes les images comportant cette class.

Le concept est super simple. En gros, on va ajouter un événement sur le scroll de la page et détecter dés qu’une image arrive au dessus de la ligne de flottaison. Quand c’est le cas, on copie le contenu de l’attribut data-src dans l’attribut src.

En faisant ainsi, la vraie image se chargera automatiquement.

Et c’est là qu’arrive la cerise sur le gâteau.

Sur la page de guidline Google que je vous indiquait un peu plus haut, la firme nous met à dispo son scriiiipt! Je n’ai qu’à faire un p’tit copier/coller sur mon projet est c’est tout booooon!!!

Pour mon besoin, j’lai modifié que très légèrement. Voici ce que ça donne :

document.addEventListener('DOMContentLoaded', function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    let active = false;
    const lazyLoad = function() {
        if (active === false) {
            active = true;
            setTimeout(function() {
                lazyImages.forEach(function(lazyImage) {
                    if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.remove("lazy");
                        lazyImages = lazyImages.filter(function(image) {
                            return image !== lazyImage;
                        });
                        if (lazyImages.length === 0) {
                            document.removeEventListener("scroll", lazyLoad);
                            window.removeEventListener("resize", lazyLoad);
                            window.removeEventListener("orientationchange", lazyLoad);
                        }
                    }
                });
                active = false;
            }, 200);
        }
    };
    lazyLoad();
    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    window.addEventListener("orientationchange", lazyLoad);
});

Avec ça, mon Lazy loading marche impeccab’ 😎 .

Verdict

Temps de l’opération: 30 minutes. Pour un gain sur les performances juste… énorme! Perso j’en suis très content. Je ne pensais pas que c’était aussi rapide et facile à mettre en place.

Donc si t’as envie de booster tes perfs et ton SEO + faire gagner du temps de chargement à tes visiteurs et que t’as une petite heure devant toi… tu sais ce qu’il te reste à faire 😁 .

3 commentaires :
  • De Baptiste

    J’avais déjà vu cette fonctionnalité intéressante mais je ne m’y était jamais penché. Mais maintenant qu’il y a un petit tuto, je dis pas non ^^
    Le seul truc qui me gêne c’est que quand tu scroll, des fois on voit l’image du placeholder se remplacer par la bonne image :/ Il faudrait que ça charge un tout petit peu plus avant que l’image soit sur notre écran.

    De plus, je te donne une idée d’article : ton avis sur les formations developpeur web online (openclassroom, etc) et les formations rapides « en 3 mois pour devenir développeur »

  • De Devpizza

    Pas de souci, t’as entièrement raison! Je vois très bien comment faire en plus, ce serait rapide à faire. Dés que j’ai une minute, je teste ça et je rajoute ça dans l’article. Merci aussi pour l’idée! Effectivement, c’est un peu le topic à la mode en ce moment. Mais pour l’instant je ne peux pas trop donner mon avis là dessus. Pour ça, je préfères creuser un peu le sujet avant de partager mon opinion. C’est un très bon sujet d’article je te l’accorde. Je me le met sous le coude!

  • De Baptiste

    Parfait, merci 🙂

Laisser un commentaire