Comment Conforama optimise sa performance Web avec Fasterize
Bien connu pour ses 230 magasins dans les banlieues des grandes villes françaises, Conforama est aussi présent sur le Web où il peut encore beaucoup progresser. L'amélioration des performances de ses sites sur le Web, mais surtout sur mobile, est un axe clé pour y parvenir. En découle ainsi l'optimisation des serveurs, mais aussi une démarche de FEO (Front End optimisation).
Lorsqu'Amazon a annoncé, il y a quelques années, que 100 ms de temps de chargement supplémentaire sur une page représentaient une perte de 1 % de CA, tous les cybermarchands ont pris conscience de l’importance de soigner les performances de leurs sites de vente en ligne et Conforama ne fait pas exception. En 2016, le chiffre d'affaires du groupe réalisé sur internet était de 6 % (8 % pour la France). Le distributeur doit donc encore progresser.
Suite de l'article ci-dessous
Les clés pour une automatisation DevOps réussie
Avec un pipeline de développement et de déploiement continus (CI/CD) associé à une infrastructure programmable, les spécialistes de l’IT peuvent rapidement créer, développer des logiciels et les mettre à jour. Pour automatiser la pratique DevOps, il convient de se concentrer sur la livraison du code et sur la procédure de déploiement. Plus d'informations dans ce PDF.
Celui-ci a ainsi lancé une marketplace et son site marchand, conforama.fr, qui s'appuie sur SAP Hybris, enregistre une audience de 121 millions de visites par an. Depuis plusieurs années le distributeur travaille sur l'amélioration des performances de ses sites comme l'expliquait Aurélie Gaffory, directrice du SI digital et de la coordination internationale de Conforama lors du salon Paris Retail Week 2018 : « Notre démarche était orientée sur la performance serveur, avec des tests de montée en charge, un suivi des temps de réponse serveur, une vision essentiellement technique de la performance. Cette approche était assez loin du ressenti client et ne tenait pas compte de toutes les couches qui amènent une page à s'afficher sur son navigateur. Nous avons souhaité basculer d'une vision "WebPerf" totalement orientée serveur à une vision de bout en bout afin de tenir compte de ce qui apparaît sur l'écran du client, qu'il s'agisse du mobile ou du desktop. »
La montée en puissance du mobile rend le besoin de performance capital
Pour Conforama comme pour tous les marchands français, la montée en puissance du mobile oblige les équipes IT et métiers à en tenir compte. Les internautes mobiles sont particulièrement sensibles au problème des pages qui se chargent trop lentement et un site trop lent à s'afficher est synonyme de taux de rebond élevé et de taux de transformation en berne avec des clients qui finissent par se lasser à force d’attendre. « C'est d'autant plus important que lorsqu'on est sur mobile en 3G ou en 4G la qualité du réseau peut être très diverse quand on se déplace. Il faut vraiment faire une priorité des temps de réponse sur mobile. », explique Aurélie Gaffory.
Dans cette course à la performance, l’équipe IT de Conforama exploitait Dynatrace depuis des années afin d’optimiser la performance de ses serveurs et l’utilise désormais de manière bien plus poussée pour avoir une vision client de bout en bout et mieux identifier à quels niveaux se situent les goulets d'étranglement de la performance du site.
Par ailleurs, Aurélie Gaffory a opté pour la solution Dareboost afin de disposer d'une vision client de la performance de son site, c'est-à-dire identifier les éléments des pages qui prennent le plus de temps à s’afficher dans le navigateur.
Néanmoins, pour aller plus loin, la responsable a choisi de se tourner vers Fasterize, un expert de la performance Web . « Il y a énormément de pistes possibles à suivre quand on veut optimiser les temps de chargement. Il est difficile de savoir combien de millisecondes on va gagner en optimisant tel ou tel paramètre. Or nous ne voulions pas nous disperser mais être sûrs d'avoir un résultat significatif. C'est ce qui nous a poussé à nous adosser à un expert. »
Un poc sur la solution Fasterize est lancé en 3 mois
Initialement, il s’agissait de réaliser un audit de performance classique mais Stéphane Rios, ancien CTO de RueduCommerce.com et fondateur de Fasterize a su convaincre Aurélie Gaffory de lancer un poc pour tester la solution Fasterize, qui allie un CDN à de l’optimisation du front-end. Trois mois après cette décision, un test en production est en place afin d'évaluer les gains apportés par la solution aux clients du site, un test A/B permettant de mesurer précisément les gains. « Nous avons pu constater une grosse amélioration au niveau du ressenti de l'utilisateur. Celui-ci n'a pas à attendre que la page soit chargée pour commencer à s'afficher, on charge les éléments au fur et à mesure et cela permet de vraiment améliorer l'expérience client. »
Suite au poc, l'équipe digitale de Conforama prend la décision de poursuivre cette collaboration avec Fasterize. « Un point important, c'est que cette optimisation est une démarche qu'il faut poursuivre sur la durée, au fur et à mesure des évolutions du site. Nous travaillons en mode agile avec des releases toutes les 6 à 8 semaines et à chaque changement apporté sur le site, il faut repasser par la phase optimisation et intégrer les modifications. » Ce fonctionnement agile oblige à la fois une mesure des performances à chaque mise à jour du site et vérifier que celle-ci n'entraine aucune régression sur ce plan. Mais il pousse aussi à tenir une approche de planification sur le plus long terme pour améliorer la performance globale du site.
Optimiser la performance des serveurs ne suffit pas
Optimiser la performance serveur ne revient à traiter qu’une petite partie de la problématique comme l’explique Stéphane Rios, ancien CTO de RueduCommerce.com et fondateur de Fasterize : « Les métriques techniques telles que les temps de réponse serveur, la charge machine sont une chose, mais il faut bien garder à l'esprit que les internautes ne vivent pas dans les datacenters ! » En effet, lorsque l'on consulte le graphe waterfall de chargement d’une page Web, la partie frontend (traitement au niveau du navigateur) représente 80 à 90% du temps de chargement. « Même si vous faites le maximum au niveau des serveurs, si vous ne traitez pas la partie front-end, cela ne servira à rien. Une page classique représente entre 250 et 300 éléments à charger et outre le volet back-end, puis le chargement du frontend, viennent toutes les "third parties" sans lesquelles un site web ne peut plus fonctionner aujourd'hui. »
Si ces tags et autres widgets se chargent en mode asynchrone non bloquant et théoriquement ne freinent pas le chargement des pages, ceux-ci posent un vrai problème en termes de performance selon Stéphane Rios : « Le téléchargement de ces tags ne bloque pas le rendu de la page, par contre ceux-ci deviennent bloquants lorsque le chargement est fini. Tous les tags s'exécutent en même temps et quand il y a 25/30 tags qui se lancent au même moment, le navigateur semble figé, ce qui affecte bien évidemment l'expérience utilisateur. »
La performance, avant tout le fruit d’une collaboration entre IT et métier
La solution choisie par Conforama, Fasterize, est une solution Saas qui s'adapte au CMS et vient se placer en proxy entre le navigateur et les serveurs http. Tout le trafic du site passe par ce proxy. Celui-ci est analysé et optimisé à la volée dans un délai de 50 à 100 ms. Les techniques de compression des JavaScript, "lazy loading", http 2, Progressive jpeg, permettant de gagner quelques millisecondes implique des compétences techniques très pointues, mais pour Aurélie Gaffory cette démarche de recherche de la performance concerne tant l'IT que les métiers : « la performance dépend aussi du contenu qui est affiché sur les pages et la manière dont celui-ci est chargé dépend de l'IT, ce qui va en faveur d'un partenariat. »
Ainsi, récemment, une décision a été prise avec les métiers afin d'arrêter le défilement automatique du carrousel en page d'accueil car le chargement de l'ensemble des images demandait trop de temps de chargement. Désormais, le slider est fixe au chargement de la page. Si le client veut voir l'image suivante il doit cliquer pour passer à l'image suivante. Des ressources IT sont désormais dédiées à la performance et celles-ci doivent challenger l'équipe UX quand elles détectent qu'une nouvelle page est trop lourde.
« Il faut être en phase afin de faire évoluer le site du point de vue fonctionnel » ajoute la responsable qui conclut : « Si l'expérience client est mauvaise du fait de temps d'affichage trop longs, nous n'atteindrons pas les gains commerciaux attendus. Il y a eu une prise de conscience générale de cela au plus haut niveau. »
