Les bonnes pratiques de Rakuten PriceMinister pour améliorer sa webperf
Quand PriceMinister a vu je jour en 2000, la webperf n'était pas vraiment d'actualité. Mais les choses ont changé. Et quand le marchand a décidé début 2017 de lancer une refonte complète de sa plateforme, il s'est donné d'ambitieux objectifs sur le SEO et la webperf. "Notre but, à terme, est de rejoindre les scores de speed index d'Amazon et de Rueducommerce", confie Cécile Béroni, SEO manager chez Rakuten PriceMinister. Et pour cela, "il valait mieux repartir sur une technologie complètement en accord avec nos besoins plutôt que de tenter de moderniser le site actuel", précise Pierre Bar, technical project lead. Avantage : la prochaine plateforme sera responsive et beaucoup mieux adaptée aux besoins de performance mobile.
Pour l'instant, un nombre réduit de pages est testé sur le nouveau site et les premiers résultats montrent un temps de chargement divisé par deux. "C'est encourageant, commente Cécile Béroni, mais la migration prendra au moins un an pour être complète. D'ici là, nous mettons d'autres actions en route pour stabiliser la webperf sur notre site".
Parmi les chantiers mis en œuvre, les équipes SEO ont reclassé les tags et les scripts qui alourdissent les pages. Sur un site e-commerce, il est normal d'avoir un très grand nombre de tags sur chaque page, pour les analytics, la monétisation, le CRM ou les partenariats. Quant aux scripts, ils sont indispensables pour afficher le contenu Javascript ou les images. En revanche, lorsqu'ils s'accumulent, ils finissent par ralentir le déclenchement du contenu interactif de la page, ce que Google appelle le "Time to Interactive". Cela dégrade non seulement la webperf mais aussi l'expérience utilisateur.
"Nous améliorons la gestion des priorités pour qu'il n'y ait plus aucun script qui bloque le chargement des pages. En les plaçant en fin de page, on accélère le temps de chargement, détaille Pierre Bar, mais ce n'est efficace que si le temps de chargement diminue significativement. Sinon, le risque est d'entrer dans un cercle vicieux : déplacés en bas de page, les tags ne s'activent qu'en fin de chargement. Si les pages ne se chargent pas assez vite, les utilisateurs abandonnent et les referment, mais comme le tag n'a pas encore pu se déclencher, nous perdons des données de tracking." Il y a donc un équilibre délicat à trouver entre la réorganisation des tags et des scripts et le maintien de l'expérience utilisateur.
"Réglementer le lancement des scripts d'A/B test, fermer et implémenter ceux qui ont fait leurs preuves est avant tout une question de rigueur"
Dans l'objectif de diminuer le start render, c'est-à-dire le temps de chargement du premier affichage, l'équipe SEO de Rakuten PriceMinister a également installé un système de cache destiné à améliorer les performances du serveur. Quelques centièmes de millisecondes gagnés dans le chargement des pages pour les robots de crawl leur permettent de visiter plus de pages. Même si cela n'a pas eu de réel impact sur le positionnement dans les SERP des pages mieux visitées par les robots, le temps de chargement a tout de même baissé.
"Une solution efficace mais onéreuse aurait été de tout mettre en RAM mais nous avons préféré stocker les pages sur des disques durs et recourir à une technique de streaming pour les faire crawler plus vite par les robots", précise Pierre Bar, avant d'ajouter que les données des pages ne sont, de ce fait, pas toujours parfaitement fraîches, ce qui n'est pas un problème pour le crawl. Les utilisateurs, eux, ont accès sur les pages à des données mises à jour en temps réel.
D'autres efforts visant à améliorer la webperf reposent surtout sur le respect de bonnes pratiques, à l'instar des outils d'A/B testing. Ils font partie des scripts, mais le technical lead de Rakuten PriceMinister les considère comme un axe facile d'amélioration. Lorsqu'ils sont trop nombreux à tourner sur une même page, ils en ralentissent le chargement. Par ailleurs, l'ancienne plateforme rend leur développement fastidieux. Il a donc fallu faire appliquer des règles strictes pour limiter leur nombre. L'accumulation peut aller vite car quand certains tests ont terminé leur mission ils peuvent être oubliés et continuer à tourner sur la page. Et les services marketing continuent à en lancer de nouveaux. Pour Pierre Bar, "réglementer le lancement de nouveaux tests, fermer et implémenter ceux qui ont fait leurs preuves est avant tout une question de rigueur."
"Pourquoi télécharger tous les éléments de la page si l'utilisateur trouve ce qu'il cherche tout en haut ?"
Une autre démarche a été d'inciter les équipes design et marketing à adopter une charte graphique et des guidelines pour que tout le merchandising intégré sur le site soit compatible avec les objectifs de webperf. "Il a fallu faire comprendre aux équipes qu'à l'unité, diminuer le poids des images ne comptait pas beaucoup, mais qu'à l'échelle du site, c'était un gain considérable", raconte Cécile Béroni. Dans un premier temps, ce discours a surtout levé des réticences : beaucoup d'outils de webdesign tolèrent mal la compression et les designers avaient peur que la qualité des images se dégrade. "Nous leur avons prouvé par l'exemple que ce n'était pas forcément le cas et peu à peu des solutions ont émergé. Pour améliorer la webperf, on ne peut pas travailler seul : tous les services doivent prendre conscience de l'impact sur l'expérience utilisateur et le taux de conversion."
Enfin, la dernière action déployée par l'équipe technique de Rakuten PriceMinister concerne le paramétrage du lazy load. Il s'agit de restreindre le nombre d'éléments chargés sur la page lorsqu'elle s'ouvre. Sur un site e-commerce, il est courant que les pages soient assez lourdes, car elles contiennent beaucoup de composants. Or, en ne déclenchant d'appel que lorsque l'utilisateur scrolle la page, le temps de chargement est divisé et réparti sur l'ensemble de la page. Pourquoi télécharger tous les éléments si l'utilisateur trouve ce qu'il cherche tout en haut de la page ?
"Sur la partie visible à l'écran, nous allégeons le CSS autant que possible. Le reste de la page n'envoie aucun appel tant que l'utilisateur n'a pas scrollé. Chaque partie s'affiche alors beaucoup plus vite. Pour ne pas dégrader l'expérience utilisateur, il faut paramétrer le chargement un peu en dessous de la ligne de flottaison. C'est très efficace… si les paramètres sont judicieusement choisis", conclue la SEO Manager.
Prochaine étape : Rakuten PriceMinister prévoit d'installer une progressive web app pour améliorer encore sa webperf et donc, l'expérience utilisateur des mobinautes.