Produits Durables, un site éco-conçu

Produits Durables, un site éco-conçu
Avec Produits Durables, HOP a décidé de se lancer dans l’aventure du site éco-conçu. Si ce choix nous paraissait évident pour mettre en pratique la sobriété numérique que nous prônons, la mise en œuvre n’a pas toujours été simple. Nous vous expliquons notre démarche.

Un site éco-conçu, c’est quoi ?

L’éco-conception d’un site consiste à limiter au maximum ses impacts environnementaux. Cela passe par différents efforts au niveau de la performance, de l’hébergement ou encore de l’ergonomie du site.

Dans une société de plus en plus dépendante aux nouvelles technologies, la pollution numérique est en constante augmentation. Selon le collectif GreenIt et le consortium NegaOctet, le numérique représenterait 40% du budget GES soutenable d’un européen (le budget GES soutenable, c’est la quantité maximale d’émissions de CO2 pour rester en dessous d’un réchauffement climatique de 1,5°C). D’ici 2050, si rien n’est fait, l’empreinte carbone du numérique pourrait tripler selon l’Ademe et l’Arcep. HOP a décidé de faire sa part.

Il n’existe pas un outil universel pour mesurer les impacts d’un site, cependant plusieurs initiatives existent et permettent de donner une évaluation intéressante. Chacune a ses particularités, ses critères et son barème.

Par exemple, l’EcoIndex du collectif Green IT (dont la méthode de calcul est détaillée sur son site) prend en compte :

  • La complexité de la page et donc la quantité d’efforts que doit fournir le processeur de l’ordinateur pour afficher la page.
  • Le poids des données transférées du serveur qui les stocke au navigateur de l’ordinateur qui affiche la page (plus les données sont lourdes, plus ce transport nécessite de l’énergie).
  • Le nombre de requêtes HTTP, ce qui permet de prendre en compte l’effort fourni par les serveurs pour afficher la page (plus il y a de requêtes, plus il faudra de serveurs).

Le poids d’une page web a été multiplié par 155 entre 1995 et 2022 selon Green IT.

De son côté, Website carbon englobe le transfert de données par câble, l’intensité énergétique des données web, la source d’énergie utilisée par le centre de données, l’intensité de carbone de l’électricité et le trafic du site web. Cependant, des travaux ont montré qu’il n’y avait pas de corrélation entre la quantité de données échangées sur liaison fixe et la quantité d’impact. Nous avons donc décidé de privilégier l’EcoIndex plutôt que Website carbon.

Les bonnes pratiques à respecter

Si les critères pris en compte par les scores d’éco-conception diffèrent, il existe tout de même un certain nombre de bonnes pratiques à avoir en tête dès l’élaboration du site internet. La littérature ne manque pas sur le sujet. Parmi les classiques, le guide “Ecoconception web : les 115 bonnes pratiques » de Frédéric Bordage ou encore celui des Designers Éthiques. Voici un florilège non exhaustif des bonnes pratiques que nous avons cherché à respecter.

Home sweet home

La question de l’hébergement est importante car les serveurs sont la deuxième source de pollution numérique (16%) après les terminaux (79%). Pour des raisons de fiabilité, nous avons décidé de rester chez OVH qui est dans une démarche d’amélioration constante de ses pratiques. Ce choix nous garantit un hébergement en France, au plus près de la majorité de nos lecteurs, ce qui permet de booster la performance du site. Pour les personnes résidant loin de nos serveurs, nous avons mis en place un CDN (content distribution network).

Adieu le superflu

Eco-concevoir un site, c’est faire des choix et c’est surtout apprendre à renoncer. Tant pis pour les fonctionnalités non essentielles, le maître-mot doit être la sobriété. Sur la page d’accueil, nous avons par exemple décidé de ne pas mettre notre carte “Près de chez moi”, bien trop gourmande. Cela signifie aussi qu’elle est un petit peu moins visible, même si on peut y accéder via le menu.

Sage comme des images

Qui dit site léger, dit éviter les vidéos et les images à foison, particulièrement lourdes. Nous avons donc fait le choix d’utiliser seulement une photo par article, compressée, en format webp et en noir et blanc. Pour aller encore plus loin, les photos sont automatiquement optimisées quand nous les mettons sur le site. Pour éviter qu’elles n’apparaissent floues, nous avons mis un effet de “grain”. Design et malin !

Vous n’avez pas les codes

Là, on entre dans le dur. Pour un site éco-conçu, mieux vaut éviter le JavaScript qui alourdit les pages. Or, renoncer au JavaScript, c’est aussi renoncer à certaines animations qui permettent de rendre le site plus vivant et interactif. Pour ne pas sacrifier la créativité sur l’autel de la sobriété, nous avons dû user de stratagèmes. Cela explique par exemple le choix de couleurs vives pour les grandes catégories de conseils. Lorsque nous avons été contraints de supprimer les “sliders” (des blocs horizontaux qui permettent le défilement d’articles de gauche à droite) de notre page d’accueil, nous les avons remplacés par une disposition permise par du CSS, bien plus légère. Un site éco-conçu certes, mais pas barbant !

Choix de l’extension WordPress, sélection de plugins adaptés, optimisation à tous les niveaux… Nombreuses, les actions engagées sont le fruit de nombreux allers-retours entre le développeur web, le graphiste et la chargée de communication avant, pendant et après la conception du site.

Éco-conception : casse-tête et compromis

Comment concilier accessibilité, éco-conception et design soigné ? L’équilibre n’a pas été simple à trouver.

Par exemple, dans la première version du site, mise en ligne en décembre 2022, nous avions choisi de faire un “mega menu” pour que l’internaute puisse arriver directement vers les conseils qui l’intéressent depuis n’importe quelle page du site, en fonction du produit et du type de conseils (acheter durable, faire durer, réparer, donner une seconde vie). Or, le mega menu était trop lourd et mettait à mal notre note d’éco-conception. Mais comment supprimer le mega menu tout en conservant notre approche par objets ? La solution que nous avons trouvée a consisté à mettre en place une barre de recherche sur la page d’accueil, ainsi que de figurer les 5 catégories de produits pour que l’internaute continue de trouver facilement le bon article au bon moment.

Ce questionnement s’est aussi posé pour l’accessibilité du site. Nous voulions un site accessible à tous, car chaque consommateur doit avoir la possibilité de reprendre le pouvoir sur ses produits quelle que soit sa condition physique. Pourtant, le module d’accessibilité (symbolisé par un œil en bas à droite) affaiblissait notre score d’éco-conception. Nous avons tout de même décidé de le garder pour que le site soit le plus inclusif possible.

Réaliser un site éco-conçu, c’est avant tout une affaire de compromis.

C’est également le cas de la page “Près de chez moi” qui était forcément assez lourde puisque réaliser une carte intéractive demande des ressources techniques. Cette fonctionnalité nous semblant essentielle, nous l’avons conservée.

Vous l’aurez compris, tout est affaire de compromis et d’arbitrage.

Et Produits Durables dans tout ça ?

Après toutes ces péripéties, la note d’éco-conception de Produits Durables est de 64/100 (65/100 pour la page d’accueil), c’est-à-dire C !

Un très bon score selon Frédéric Bordage (GreenIT) : “L’EcoIndex répartit les évaluations sur une courbe de Gauss. Les extrêmes A-B et F-G sont difficiles à atteindre et la moyenne est à D. Un score de C signifie qu’on est nettement au-dessus de la moyenne en termes de performance environnementale”.

Évidemment, la finalité du site est à prendre en considération. Produits Durables est un site média, ce qui implique la mise en ligne régulière de nouveaux contenus et la nécessité de proposer un système de filtres pour que le lecteur trouve facilement l’information dont il a besoin. Rien à voir donc avec un site “one page” (avec une seule page) ou un site institutionnel. A l’inverse, un site d’éco-commerce aura du mal à avoir une bonne note s’il héberge des milliers de références.

Le bilan

Créer un site éco-conçu ne se fait pas sur un coup de tête. Beaucoup de facteurs sont à prendre en compte avant même de réfléchir à son architecture. Chaque fonctionnalité doit être mûrement réfléchie et le compromis devient une seconde nature. Cela demande aussi de penser dès le début aux potentielles évolutions du site.

Si nous sommes fiers du résultat final, nous continuerons à faire des efforts pour que notre site pèse le moins possible sur l’environnement tout en apportant à vous lecteurs une expérience agréable et surtout utile !

Aller au contenu principal