Odwiedź bezpośrednio główną treść Wyślij nam bezpośrednio wiadomość e-mail

Bhallot, étude de cas : optimisation, écoconception et e-commerce

Le numérique émet aujourd’hui 4 % des gaz à effet de serre du monde, et sa consommation énergétique s’accroît de 9 % par an (The Shift Project). L’empreinte du numérique reste relativement faible comparée à d'autres secteurs, mais la croissance du numérique est la plus rapide. Cette croissance devrait d'ailleurs être revue à la hausse avec la pandémie.
Le numérique accélère nos sociétés et nos échanges, ce qui participe aussi à l'augmentation des émissions de gaz à effet de serre et la consommation de ressources. Enfin, le numérique est un secteur qui ne prend pas en compte les limites de notre planète, car Internet a été présenté comme un outil limitant la pollution notamment avec l'image du Cloud (nuage). Ce manque de limite entraîne des mauvaises pratiques qui font que de 2010 à 2016, le poids d'une page internet a augmenté de 317% en moyenne (de 702 kb à 2232 kb). Tout comme les secteurs de l'énergie et du transport, il est nécessaire d'intégrer des objectifs de réduction de pollution.

C'est avec ce constat, que nous avons décidé de travailler avec Bhallot pour réduire la consommation de leur site et de documenter nos recherches et opportunités.

Un point important à noter est la nécessité de différencier un objectif d'optimisation des performances et d'écoconception. Les entreprises du numérique ont très bien intégré la culture de performance qui consiste à délivrer un service le plus rapidement possible, peu importe la taille de ce service. À l'opposé, l'écoconception cherche à réduire le poids d'un service, ce qui réduit mécaniquement son temps de chargement. L'optimisation compressera des images alors que l'écoconception réduira le nombre d'images tout en les compressant.

Enfin d'un point de vue éthique, même si tout travail d'écoconception d'un service est bénéfique pour l'utilisateur, le fait de rendre des services polluants plus accessibles rentre en contradiction avec une démarche écologique. Bhallot propose des produits écologiques, en utilisant des ressources moins polluantes ce qui en fait un projet cohérent avec l'écoconception.

La méthode et les tests

Nous avons basées nos tests sur les outils suivants :

Nous avons planifié les tests en se basant sur des principes d'optimisation web et d'Écoconception web (voir les 115 bonnes pratiques” de Frédéric Bordage). Une contrainte importante était de travailler avec le thème existant. C'est une contrainte forte, car dans le cas WordPress, le thème est un des facteurs les plus important dans l'écoconception. Le site est basé sur Storefront, le thème basique de WooCommerce. Il est plus léger que la moyenne des thèmes, mais il reste contraignant pour réduire l'impact énergétique d'un site. Ce projet s'inscrit dans une phase de tests courte avec le développeur du site de Bhallot. Un projet plus ambitieux pourrait permettre de retravailler complètement la structure du site et ainsi d'avoir un impact plus important. Mais l'objectif de la démarche est aussi de montrer qu'avec des moyens limités (temps et budget), il est déjà possible d'obtenir un résultat encourageant.

Après une première analyse du site, nous avons établi une liste des tests à effectuer pour réduire le poids de la page.

Les tests planifiés

Tests Description Impact Temps Avancement
GIF Remplacer le GIF par une vidéo en autoplay pour réduire le poids de la page Important Rapide En ligne
Font stack Remplacer le chargement d'une police par la police par défaut. Le design du site sera impacté Important Rapide Reporté (impact sur le design)
Améliorer et/ou supprimer le chargement des JS/CSS Réduire l'impact du chargement des JS et CSS Moyen Moyen En ligne
Optimisation du cache (htaccess) Le cache permet de réduire la bande passante pour les visiteurs qui retournent sur le site Important Moyen à Long En ligne
Nettoyage de l'index Les pages d'upload des medias sont dans l'index de Google Moyen (indirect) Moyen En ligne
Conversion du logo en svg Utiliser le format SVG pour réduire le poids , intégrer le svg comme une image Faible Rapide Abandonné (bugs et complexité)
Async more JS Bon candidat: wp-responsive menu, icomoon, Moyen Rapide Abandonné (non concluant)
Jetpack Voir s'il est utile et l'impact de la suppression Faible/Moyen Rapide En ligne avec une limitation de son chargement
Optimisations du design Carrousel en trois section, sans interactions et js Moyen Long Reporté (impact sur le design)

Les résultats des tests sont présentés dans le tableau ci-desssou :

Données Initiales (mai 2020) Après les tests (août 2020)
Temps de chargement* 13.000s 5.594s (+)
First Byte* 2.270s 2.270s (=)
Start Render* 2.270s 0.868s (+)
Requêtes* 58 46 (+)
Bytes in* 5,983 KB 2,593 KB (+)
Page Speed Mobile** 52 66 (+)
Page Speed Ordinateur** 85 92 (+)
Performance environnementale*** 40.3 D 37.9 D (+)
Empreinte GES*** 2,8 gCO2e 2.18 gCO2e (+)
Empreinte eau*** 3,66 cl eau 3.27 cl eau (+)
Bande passante*** 3848 Ko 3048 Ko (+)

* Webpagetest
** Google Page Speed
*** Ecoindex

Les explications des résultats

Deux tests ont été particulièrement concluants, le remplacement des GIFs par des vidéos optimisées qui représentent 30% du gain sur le temps de chargement complet. L'amélioration du cache a amélioré de 40% le temps de chargement complet, mais cette optimisation ne réduit pas le poids de la page. C'est le remplacement des GIFs et la suppression de scripts qui a permis de réduire la consommation de bande passante. Le nombre de requêtes a été réduit, mais dans une faible proportion.
À noter que nous aurions dû prendre en compte la complexité de la page dans les données du test. C'est une donnée à prendre en compte pour les prochains tests.

L'évolution rapide de l'e-commerce entraîne des changements rapides de la structure du site. Un nouveau système de livraison, un nouveau canal de paiement peuvent rapidement changer le poids du site ou d'une page et ainsi rendre le travail de réduction caduque. Actuellement, le site représente un score Google Page Speed moins bon suite à des mises à jour. À noter que ce changement peut aussi être dû à un changement dans le calcul du score, nous manquons d'information à ce sujet. En revanche, le poids de la page reste similaire, ce qui nous permet de conserver les gains du travail d'écoconception.

Les limitations

On remarque que nos tests restent plus proches d'une démarche d'optimisation que d'une démarche d'écoconception. En effet, il est quasi impossible d'avoir une démarche de réduction d'impact sans commencer par un travail de recherche en design et donc de prévoir un travail complet du design et des fonctionnalités. Ce travail reste difficile dans le secteur de l'e-commerce qui est ancré dans des processus qui doivent suivre les tendances du web (réseaux sociaux, vitesse, importance des images, etc.) qui rendent ce type de projet plus complexe comparé à un simple site vitrine.

Ce constat nous amène aux opportunités à discuter pour dépasser ces limitations.

Les opportunités

La difficulté avec l'e-commerce pour une entreprise est de tester des nouvelles hypothèses. Ces tests peuvent avoir des conséquences directes sur les ventes. Il convient donc de procéder progressivement et d'intégrer les utilisateurs au plus tôt du processus de design.

Une version écoconçue voire low-tech du site pourrait être proposée en parallèle du site actuel. Cela crée un doublon, mais permettrait de tester l'efficacité d'une démarche écoconçue pour l'e-commerce. Le risque d'offrir une version réduite unique pourrait être trop risqué pour une entreprise qui dépend des ventes en ligne. En revanche un travail de refonte du site basé sur un thème plus léger comme GeneratePress avec 30 kb pourrait permettre au site principal de réduire sa bande passante. SustyWp avec 6 kb serait aussi un candidat intéressant, mais il s'agirait d'un test plus expérimental. On pourrait imaginer une bascule, en fonction des retours des utilisateurs, entre les fonctionnalités du site de test vers le site principal pour intégrer des gains de bande passante. Jusqu'à arriver à une version unique moins énergivore.

On peut aussi imaginer de proposer une expérience écoconçue directement en intégrant les utilisateurs du site dans le processus de développement pour valider directement les principes appliqués pour réduire le poids du site.

La documentation et le partage seront la partie centrale de ce projet, car c'est en montrant la possibilité de penser l'e-commerce différemment que nous pouvons inspirer des projets similaires.
De plus, Bhallot a fait des choix commerciaux qui s'opposent aux habitudes de l'industrie textile. En proposant à la communauté de participer à la conception des produits pour éviter le gaspillage et proposer des produits adaptés aux besoins. Ce processus pourrait très bien être prolongée dans la conception du site internet. L'équipe de Bhallot prévoit déjà d'être de plus en plus transparent sur son activité ce qui augmente encore la cohérence de cette démarche.

Ce processus itératif permettrait de tester de nombreuses hypothèses comme la réduction du nombre d'images avec le remplacement par de l'illustration, des choix de navigations différents, une limitation des données collectées, et de nombreuses autres possibilités de penser l'e-commerce autrement.