Un catalogue de cinq cents produits découpé en pages numérotées
Cliquer sur « page 2 », et repartir du haut du catalogue
C’est le fonctionnement par défaut d’une boutique : douze produits par page, une navigation en bas, et le reste derrière des numéros. Le visiteur descend, arrive au bout, clique sur « 2 ». La page se recharge entièrement et le repose en haut. Il redescend, regarde, clique sur « 3 ». Et ainsi de suite.
Chaque passage d’une page à l’autre est une coupure : ce qu’il regardait disparaît, autre chose arrive, et la comparaison entre deux produits vus à deux pages d’intervalle demande de refaire le chemin. Sur un catalogue que l’on parcourt pour se faire une idée avant de choisir, ce découpage impose un effort à chaque fois.
Tout afficher sur une seule page, et attendre qu’elle arrive
L’autre réflexe consiste à relever la limite : afficher cent, deux cents, cinq cents produits d’un coup. Le parcours redevient continu, mais la page contient alors l’intégralité du catalogue — cinq cents fiches, cinq cents visuels, cinq cents prix. Elle devient longue à venir, et lourde pour un téléphone en connexion mobile. La même difficulté se pose hors catalogue, dès qu’il faut afficher une liste de deux cents éléments sur une seule page.
Le problème se déplace donc sans se résoudre : d’un côté un parcours haché mais une page légère, de l’autre un parcours continu mais une page qui pèse tout le catalogue. C’est cet arbitrage qu’il s’agit de ne plus avoir à faire.
En rayon, on parcourt sans jamais tourner de page — Photo par Gustavo Fring via Pexels
Charger les produits par lots, au fil du défilement
Le visiteur descend, les produits suivants viennent d’eux-mêmes
Le principe consiste à garder la pagination de la boutique — celle qui découpe déjà le catalogue en pages de douze — mais à ne plus la faire cliquer. Quand le visiteur atteint le bas de la grille, le lot suivant est demandé et vient se placer à la suite. La page ne se recharge pas, la position ne bouge pas, et le parcours ne s’interrompt jamais.
C’est ce que fait l’Extension WordPress « Lazy load » sur les listings de produits : elle s’appuie sur la pagination existante de la boutique et va chercher les lots au fur et à mesure. La page servie au départ ne contient donc que les produits de la première page, pas tout le catalogue. Un bouton « Voir plus » peut remplacer le défilement automatique, pour laisser le visiteur décider.
S’adapter au thème de la boutique sans le modifier
Les boutiques ne balisent pas toutes leur catalogue de la même façon, et un thème sur mesure encore moins. Les repères utilisés pour trouver la grille de produits et sa navigation sont donc paramétrables depuis l’administration, avec les valeurs standard préremplies : dans la plupart des cas, il n’y a rien à changer.
Le réglage s’applique aussi bien aux pages boutique classiques qu’aux grilles de produits insérées dans une page, à condition qu’elles soient paginées. Plusieurs grilles peuvent coexister sur une même page sans se mélanger, chacune suivant sa propre navigation.
Ce chargement d’un catalogue par lots au défilement relève de la formule Pro de l’Extension WordPress « Lazy load », qui comprend aussi la sauvegarde et la reprise des réglages d’un site à l’autre. Une précision pour éviter un malentendu fréquent : ce mode ne rend pas la boutique plus rapide — chaque lot demande au serveur autant de travail qu’un clic sur « page suivante ». Ce qu’il apporte, c’est un parcours continu sans avoir à servir tout le catalogue dans la page. Si le besoin porte sur une simple galerie ou une liste d’articles, sans produits, afficher la liste par lots avec un bouton suffit et relève de la formule Essentiel.
Image à la une — Photo par Vitaly Gariev via Pexels