Comment Rue du commerce optimise sa performance web... et son SEO
Mi-2016, Rue du Commerce s'est lancé dans un vaste chantier de modernisation de sa plateforme web. L'objectif est alors d'évoluer d'une architecture relativement monolithique (combinant framework ColdFusion et infrastructures PHP maison) vers un environnement plus souple et modulaire, sous forme de microservices. Les différentes fonctionnalités du site sont découpées en composants : moteur de recherche, fiche produit, panier, espace client... Le tout est porté (à 90%) sur un socle applicatif PHP motorisé par Symfony3. Les environnements d'intégration sont gérés à partir d'images Docker. Quant aux serveurs de production, hébergés chez Equinix, ils sont redéployés sur la base d'un cloud privé virtualisé (VMware).
Un impact sur le référencement
Fin 2016, les résultats sont au rendez-vous : la performance de la plateforme, notamment, s'est largement améliorée, avec à la clé des temps de réponse serveur divisés par 25. "Seulement 50 millisecondes sont nécessaires pour charger une fiche produits côté serveur", se félicite Aniss Boumrigua, responsable front-office de Rue du commerce. L'impact sur le référencement se révèle positif. Les robots d'indexation Google parcourent le site beaucoup plus rapidement, et le nombre de pages crawlées par ces derniers s'accroît mécaniquement (voir les deux courbes ci-dessous).
Sous le capot, Rue du commerce décline chaque composant applicatif en deux services. Le premier se charge d'exposer "l'objet métier" (le panier, la fiche produit…) sous forme d'une API Rest. Le second se connecte à cette dernière et gère l'affichage HTML de la fonctionnalité correspondante. Rue du commerce dispose ainsi d'un système d'e-commerce "découplé" d'une grande souplesse. "Grâce à ce système d'API, nous pourrons basculer facilement sur une autre technologie que PHP pour gérer le rendu web si le besoin s'en fait sentir", souligne Aniss Boumrigua, qui évoque notamment les frameworks AngularJS ou React. Pour accélérer les performances de l'ensemble, l'architecture réplique les données (issues de la base MariaDB historique) au sein d'une seconde base, de type NoSQL et orientée documents (Couchbase). Mise à jour en quasi temps réel via le bus de messagerie RabbitMQ, elle joue le rôle de cache.
35 améliorations web
"Malgré cette refonte, nous étions toujours parmi les derniers du classement webperf du JDN. Ce constat nous a conduit à initier un deuxième projet courant 2017 centré sur l'optimisation de nos pages web", poursuit Aniss Boumrigua. En parallèle de la migration du site vers HTTPS puis HTTP/2, la direction technique s'attèle à un travail de fourmis dans le code HTML : minification et concaténation des CSS et JavaScript, rationalisation des images (conversion en SVG, compression et versionning), configuration en asynchrone du chargement de certains contenus (par exemple des avis en bas de page qui n'ont pas besoin d'apparaître immédiatement), etc. Pour identifier tous ces points d'amélioration (35 au total), Rue du commerce se fait accompagner par Fasterize.
"L'amélioration de la webperf a eu un impact positif sur le taux de transformation"
Pour suivre l'impact de ce travail et sa courbe progression face à la concurrence, Rue du commerce retient deux indicateurs de référence : le start render, ou temps d'affichage du premier pixel d'une page, et le speed index, ou rythme de chargement au-dessus de la ligne de flottaison. Le site a recours à l'outil de monitoring SpeedCurve.
Aujourd'hui, le bilan est jugé "très positif". Depuis mars 2017, le speed index de Rue du commerce est passé de 12 442 à 5 297. "D'ici deux mois, j'estime que nous allons pouvoir tendre vers une valeur de 4 150, et ainsi nous rapprocher du podium du classement JDN dans la catégorie e-commerce sur mobile", indique Aniss Boumrigua. En parallèle, le chantier s'est déjà traduit par une nette progression du taux de transformation. Entre le 1er janvier 2017 et le 1er janvier 2018, il progresse de 56% sur mobile. "Il est clair que l'amélioration de la webperf a contribué à cette hausse. Mais ce n'est sans doute pas la seule explication", estime Aniss Boumrigua.
Vers une gouvernance de la webperf
Dans l'optique de faire progresser encore sa webperf, Rue du commerce compte actionner plusieurs autres leviers dans les mois qui viennent. Via l'outil TagCommander, le site marchand optimisera l'ordonnancement du chargement des tags et surtout supprimera ceux qui se révèlent inutiles et alourdissent les pages. Autre initiative au programme, l'amélioration du temps de chargement des images via le déploiement d'une technique ad hoc. Enfin, pour tendre vers une performance proche d'une app native sur mobile, le responsable front-office envisage d'expérimenter les services worker. Une technique qui, via un système de cache, permet une navigation y compris hors connexion.
"En parallèle, nous avons pour objectif de créer un cellule webperf combinant profils techniques et métier", confie Aniss Boumrigua. "Via cette équipe mixte, l'idée est d'inscrire la question de la webperf dès la phase de conception marketing, et de disposer d'une structure de gouvernance globale pour arbitrer les choix." Dans le but de sensibiliser plus largement l'entreprise, et notamment les équipes marketing et graphique à la webperf, le responsable front-office compte également profiter de la lettre interne envoyée chaque semaine par les RH pour communiquer sur l'évolution de Rue du commerce dans le classement du JDN. "Dans la même logique, nous souhaitons installer des écrans projetant nos indicateurs de performance web un peu partout dans l'entreprise et pas seulement au sein de la cellule front-office", complète Aniss Boumrigua.
| Langage | PHP |
| Framework | Symfony3 |
| Hébergement | Equinix (redondé sur deux sites, et infogérés en interne) |
| Bases de données | MariaDB, Couchbase et ElasticSearch (pour le moteur de recherche) |
| Cloud privé | VMware (un projet est prévu en 2018 visant à migrer la plateforme de production vers des containers Docker) |