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.

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. Â»

Pour approfondir sur Outils de développement