Lazy Load Prestashop

Le Lazyload Prestashop pour un chargement rapide (ép. 96)

Raccourcir le temps de chargement des pages sur votre Prestashop peut être un vrai casse-tête pour plusieurs raisons… Soit les méthodes recommandées sont vraiment trop complexes techniquement à mettre en place, ou soit c’est trop cher… mais j’ai une solution « FUN » juste pour vous.

C’est énervant de devoir optimiser sa boutique

Est-ce que vous êtes d’accord avec moi ? On ne peut jamais être tranquille, à chaque fois il faut optimiser des performances pour obtenir une vitesse de chargement correcte. C’est agaçant d’autant plus que bien souvent c’est coûteux à mettre en place, il faut changer de serveur, payer un développeur, acheter un module… et ça n’en finit pas (pire encore Google continue à en demander toujours plus).

Une boutique Prestashop = beaucoup d’images

Comme la plupart des sites web, un site e-commerce regorge d’images à charger et forcément à un moment donné le navigateur ne peut pas charger plus vite que tant malgré toute la bonne volonté du monde (même en compressant les images). Sur le principe il y a un problème de base fondamental qui n’est pas géré par les navigateurs… Pourquoi charger une zone de contenu de la page qui ne sera pas lue par l’internaute ? Hé oui, le visiteur ne va pas forcément consulter le contenu jusqu’au bas de la page… et ce contenu « non-consulté » n’aurait pas besoin d’être chargé logiquement.

Lazyload est une bombe atomique

Ahahah… en fait Lazyload fait exactement ce qu’on a besoin, c’est-à-dire qu’il charge uniquement le contenu nécessaire à l’écran (pour les ressources images). Au fur et à mesure que vous scrollez dans la page, les images sont chargées en temps réel. Cela permet de diminuer le nombre de requêtes du navigateur lors du 1er chargement de page et évite d’attendre le chargement intégral des images de la page. Plus la page est longue, plus le comportement est efficace.

+ de produits dans les listings

Avec cette méthode, ce qui est intéressant c’est de pouvoir envisager d’augmenter le nombre de produits affichés dans les listings (catégories / recherche)… au lieu de 20 on peut imaginer en afficher 100 par page sans forcément avoir une dégradation des performances (c’est à tester). Cela permet aussi de réduire le Crawl de Google, car il aura moins de pages à parcourir. Ce n’est pas une science exacte, il faut trouver l’équilibre qui vous convienne.

Lazyload mauvais pour le référencement?

D’un côté ce qui est super c’est que la boutique Prestashop se charge beaucoup plus vite, mais l’inconvénient c’est qu’on supprime une balise fondamentale HTML « src ». En finalité, ce n’est pas dramatique pour le référencement de vos images à condition que la fiche produit ne soit pas elle aussi chargée en Lazyload (car au moins à cet emplacement l’image reste clean & accessible pour le SEO). Comme je le montre dans la vidéo, le Lazyload prend tout son sens si la page est longue… une fiche produit « courte » ne justifie pas cette intégration (utilisez cette méthode uniquement dans les listings).

Pour ce tutoriel Prestashop vous avez à disposition :

  • 1 x fichier pour charger Lazyload (layout-both-columns.tpl)
  • 1 x fichier pour ajouter le comportement aux produits (product.tpl)

Télécharger

Résumé de la vidéo : Lazyload permet de diminuer le temps de chargement de vos pages sur Prestashop

  • Pour commencer, on fait le test dans un fichier « index.php » simple pour voir comment la librairie Lazyload réagi afin de mieux comprendre le comportement.
  • Ce qui est important c’est de supprimer l’attribut « src » et mettre à la place « data-src » et ajouter une classe « lazy » sur l’image.
  • Une fois l’optimisation en place on compare les performances avant / après et on peut constater le chargement progressif dans la page lors du scrolling (c’est très satisfaisant).
  • La contrainte c’est qui faut taguer la balise des images, c’est pour cela qu’on applique la modification à un emplacement stratégique afin de toucher le coeur du problème (les listings des produits).
  • C’est quand même fou qu’un petit bout de code pareil puisse offrir un tel confort… j’adore et valide le concept.

22 commentaires sur “Le Lazyload Prestashop pour un chargement rapide (ép. 96)”

  1. Bonjour Germain,

    Encore une fois, super idée et simple à mettre en place…

    Cependant, je ne peux pas l’utiliser comme proposé, car cela génère dans mes pages référencées par Google trop de « Error – Element img is missing required attribute src » avec W3C.

    Par contre, votre idée est parfaite pour certaines de mes pages CMS trop lourdes, comme celles des galeries photo – que je n’ai pas indexées.

    J’ai dû faire manuellement l’intégration dans le code source des pages – très rapide avec par exemple NetBeans via l’onglet « remplacer/remplacer tout » – pour changer dans mon cas les : src en data-src et les class= »img-responsive » en class= »img-responsive lazy » (pour ceux qui voudraient faire la même chose).

    (faire des petites sauvegardes de vos pages en format « code source », car si cela nous vous convienne pas, vous pourrez revenir en arrière par un simple copier/coller)

    En tout cas, grâce à vous Germain, mes pages photos qui étaient beaucoup trop lourdes pour du -4G, sont maintenant « uploadables » rapidement 🙂

    Merci et bon week-end

    Eric

    Répondre

    1. Bonjour,

      Difficile de satisfaire tous les critères, dans ma vision le W3C est relayé en général au second rang, parce qu’il n’influe pas le positionnement de la boutique Prestashop… Avoir la perfection sur les 2 axes est impossible, mais chacun pourra bien sûr trouver l’équilibre qui lui convient 😉

      Merci pour le retour d’expérience !

      Répondre

  2. Bonjour Webbax, le résultat de cette classe est top pour la première page des produits des catégories il y a un vrai gain cependant lorsque l’on passe à la pagination suivante, les images ne se chargent pas directement, je dois faire un F5 sur la page pour que les images apparaissent.
    Est ce normal?
    Pierre

    Répondre

    1. J’ai aussi ce problème et j’utilise la navigation a facette.
      cela doit etre la raison et ce serait super q’une solution existe.

      Répondre

    2. Bonjour,

      Il est vrai que je n’ai pas approfondi cette problématique de navigation à facettes avec la pagination…

      OUPS… il faudra que je regarde ça une fois à l’occasion… (le temps encore, le temps)

      A bientôt !

      Répondre

    3. Salut et merci pour le tuto !
      pour ceux que ça intéresse si vous voulez régler le soucis avec la pagination, il faut initialiser la fonction lazyload aussi au moment de l’event « updateProductList ». Pour moi ça marche bien 🙂
      Il faut donc modifier le code de Webbax ainsi :

        //initialize lazyload
  function add_lazyload() {
    var lazyLoadInstance = new LazyLoad({
      elements_selector: ".lazy",
    });
  }
  add_lazyload();
  if (typeof prestashop !== "undefined") {
    prestashop.on("updateProductList", function (event) {
      add_lazyload();
    });
  }
      Répondre

      2. Bonjour
        je remet mon commentaire car il a disparu
        je rencontre toujurs le probleme avec la pagination, obliger d’actualisé la page pour voir les images quand on selectionne la deuxieme page produit.
        voila le code

        <a href="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js" rel="nofollow ugc">https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js</a>
    
        function add_lazyload() {
  var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy",
  });
}
add_lazyload();
if (typeof prestashop !== "undefined") {
  prestashop.on("updateProductList", function (event) {
    add_lazyload();
  });
}

        je suis sur presta 1.7.5
        cordialement

        Répondre

      3. Bonjour
        je rencontre problème avec la pagination
        j’ai modifier le fichier avec votre conseille mais ca ne marche pas
        il y a t il une erreur sur mon code ?
        merci pour votre aide

        <a href="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.0/dist/lazyload.min.js" rel="nofollow ugc">https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.0/dist/lazyload.min.js</a>
	 
		function add_lazyload() {
  var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy",
  });
}
add_lazyload();
if (typeof prestashop !== "undefined") {
  prestashop.on("updateProductList", function (event) {
    add_lazyload();
  });
}
        Répondre

      5. Difficile de dire pourquoi cela ne marche pas chez vous. Il y a une multitude de possibilité de bug… Pour ma part le code était placé dans mon fichier theme/montheme/_dev/js/theme.js avant d’être compilé via webpack :

        import LazyLoad from "vanilla-lazyload";
$(document).ready(() => {
//initialize lazyload
function add_lazyload() {
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
});
}
add_lazyload();
if (typeof prestashop !== "undefined") {
prestashop.on("updateProductList", function (event) {
add_lazyload();
});
}
});

        Attention ce code ne peut pas fonctionner sans la compilation des sources js via webpack.

        Pour votre code, j’ai l’impression qu’il manque simplement autour du code l’inistialisation de la fonction :

        $(document).ready(() => {
});

        Pour ma part j’ai depuis retiré le plugin js lazyload afin d’alleger le code. A la place j’utilise la balise HTML5 loading= »lazy » qui demande aux navigateurs modernes de faire la même chose. Je vous invite à regarder cela de plus prêt.

        Répondre

  3. Bonjour merci pour ton tuto, pour moi qui suis débutant,
    Dommage que tu n’as pas montré l’installation de la librairie lazyload, où tu l’installais après dans ton site..

    Si tu peux me montrer ou m’expliquer ca serait top 😉
    Merci !

    Répondre

    1. C’est bon j’ai trouvé puisqu’il fallait mettre la librairie dans le dossier JS du thème. Mais c’est vrai du coup je me retrouve avec le même soucis concernant la page 2. Merci beaucoup si tu prends le temps de nous montrer comment tu fais 😉 a+

      Répondre

      1. Hello,

        Voir mon précédent commentaire… Par contre, effectivement le coup de la page 2 avec le filtre à facettes de Prestashop j’ai pas eu l’occasion de tester.

        A bientôt !

        Répondre

          1. Si un jour tu le met en place sur les pages > 1 , tiens nous au courant 😉 merci déjà pour ton super investissement pour la communauté !

  5. Hello 🙂

    Quid du lazy load (en passant par l’attribut natif load= »lazy ») avec les images responsives et les attributs width= » » et height= » » dans le tag …?

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *