Introduction à l'éco conception de site web

L'éco conception : une petite définition

Avant toute chose, mettons nous d'accord sur le terme. Il peut s'appliquer à différents secteurs d'activité, mais ici, c'est bien l'éco conception numérique qui nous intéresse.

On en trouve une bonne définition sur le site eco-conception.fr :

Intégration systématique des aspects environnementaux dès la conception et le développement de produits (biens et services, systèmes) avec pour objectif la réduction des impacts environnementaux négatifs tout au long de leur cycle de vie à service rendu équivalent ou supérieur. Cette approche dès l’amont d’un processus de conception vise à trouver le meilleur équilibre entre les exigences, environnementales, sociales, techniques et économiques dans la conception et le développement de produits

La notion d'équilibre me semble importante, car comme nous allons le voir, certaines facettes d'un produit numérique ont plus d'impact que d'autres sur l'environnement. Tout l'enjeu sera alors de savoir quels leviers actionner pour diminuer efficacement l'empreinte écologique du produit, tout en conservant un certain degré de qualité.

Pourquoi avons nous besoin de l'éco conception numérique ?

Dans son livre Écoconception web : les 115 bonnes pratiques, le collectif GreenIT nous rappelle quelques chiffres sur l'impact environnemental du secteur du numérique :

1500 millions de tonnes équivalent CO2 par an, soit ce que produiraient 150 millions de français (± 2 fois la France)
7.8 milliards de m3 d'eau utilisée par an, soit l'équivalent de 145 millions de français (encore ± 2 fois la France)

Même si pour nous, utilisateurs, le web est intangible, on comprend que son impact sur notre planète est bel et bien réel.

Une des raisons qui explique cette consommation hors norme est l'épidémie d'obésité qui touchent les sites internet depuis quelques années. En effet, en 1995 une page web pesait en moyenne 14Ko. En 2022, elle en fait 2200Ko, soit 155 fois plus lourd !

Certes, les services se sont améliorés de manière générale, mais le problème vient du fait que la plupart des pages ne sont pas vraiment optimisées. Aujourd'hui, pour une simple page de vente faite sous Wordpress, on peut rapidement atteindre les 1Mb (faites le test pour des vendeurs que vous connaissez, les résultats sont surprenants). Pourtant les fonctionnalités sont très basiques (on parle d'afficher un simple texte et quelques images), et il serait facile de diviser par 2 le poids de ces pages, sans trop d'effort.

Quoiqu'il en soit, les pages web deviennent trop lourdes, et c'est un problème, car ce faisant, elles nécessitent plus d'énergie pour être transférées via le réseau. De plus, elles vont être plus gourmandes en ressources côté client, donc utilisateur avec un ordinateur ou téléphone trop ancien ne pourra pas afficher correctement la page. Cela favorise l'obsolescence programmée, et pousse à acheter du matériel neuf, qui a un coût très fort pour l'environnement.

Quels leviers d'action ?

La nécessité de revoir la manière dont nous concevons les produits numériques est sans appel. En tant que développeurs, c'est nous qui en portons la responsabilité.

On peut séparer nos leviers d'action en deux grandes thématiques.

Côté client

Avant même de produire la moindre ligne de code, nous devons réfléchir au projet dans son ensemble, et questionner la pertinence de chaque fonctionnalité.

Le but est de créer l'application la plus légère possible. L'avantage, c'est que cela nous pousse à nous demander comment on peut résoudre le problème de l'utilisateur final le plus efficacement possible. En toute logique, cela devrait nous conduire à produire une meilleure UX, ce qui devrait se traduire en une satisfaction de la clientèle, et améliorer la notorieté de l'entreprise.

Ensuite, il s'agira de choisir les bons outils et méthodes, afin de produire des pages légères et optimisées. De mon côté, j'utilise des frameworks frontend comme NextJs, qui permettent de générer des sites statiques ultra légers et performants.

Enfin, on cherchera à créer des sites mobile first. Car n'oublions pas que, de nos jours, la majorité des visites se font via smartphone. De cette manière, on se force à aller à l'essentiel, et éviter les contenus superflus (typiquement, des images de décoration).

Bien entendu, il existe mille et une autres optimisations techniques à appliquer pour optimiser l'empreinte environnementale du produit. L'idée est de la mesurer régulièrement grâce à des outils comme websitecarbon.com, puis d'itérer pour essayer de l'améliorer.

Côté serveur

La partie frontend est importante, surtout pour un site qui a énormément de traffic (son impact est tout simplement multiplié par le nombre de visiteurs), cependant, c'est du côté de l'hébergement que l'on peut probablement avoir le plus d'impact.

On peut se renseigner sur la démarche environnementale de notre hébergeur. J'ai remarqué que les plus gros acteurs du secteur ont l'air d'aller dans le bon sens. Par exemple, AWS et OVH prévoient d'alimenter entièrement leur infrastructure grâce aux énergies renouvelables d'ici 2025. Quant à Google et Microsoft, ils compensent 100% déjà leurs émissions de gaz à effet de serre depuis 2007 et 2012, respectivement, et cherchent désormais à compenser toutes leurs émissions depuis leur création.

Par ailleurs, il peut être intéressant d'utiliser un Content Delivery Network (CDN), plutôt qu'un serveur traditionnel. En effet, le contenu sera servi depuis un lieu proche du visiteur (disseminés à travers le monde), alors que si l'utilisateur visite un site hébergé aux États-Unis, sa requête devra faire l'aller retour, ce qui consomme inévitablement plus d'énergie.

Des services comme Vercel ou Netlify permettent de servir un site static via CDN. Il convient néanmoins de vérifier les politiques environnementales de l'infrastructure derrière le CDN. En ce qui concerne Vercel, ils utilisent Microsoft et AWS, tandis que Netlify passe par Google et AWS.

Comme expliqué juste au dessus, chacune de ces entreprises, malgré leurs nombreux défauts, ont au moins le mérite d'avoir des politiques environnementales ambitieuses.

Conclusion

Pour terminer, je voudrais partager ma philosophie sur l'éco conception de services numériques.

Adopter une telle démarche demande inévitablement plus de travail de la part des développeurs, ce qui, à mon avis, amène deux problèmes majeurs :

La contrainte supplémentaire risque de décourager de nombreux développeurs. Nous avons déjà assez à gérer avec la veille technologique, la sécurité, le RGPD...
Le prix du service risque d'augmenter, et simplement décourager des potentiels clients.

Heureusement, je pense qu'il existe une solution : j'ai nommé la Jamstack. J'en ai un peu parlé au cours de cet article, et si le terme ne vous dit rien, j'y reviendrai en détail prochainement.

Pour faire bref, la Jamstack permet de créer des sites statiques légers et performants, servis par CDN. On coche donc toutes les cases pour des sites moins gourmands en énergie.

Qui plus est, cette stack technique offre aux développeurs une productivité accrue, ainsi qu'une expérience de développement plus agréable. On évite ainsi les deux problèmes dont j'ai parlé juste au dessus 🙂

Par exemple, j'ai utilisé NextJs pour ce site web, et j'obtiens un EcoIndex de 75 avec l'extension GreenIT. Certes, ce n'est pas parfait, et j'ai vu des sites allant jusqu'à 90.

Mais comme le dit l'adage, "Fait est mieux que parfait".

Clairement, je pense qu'il vaut mieux avoir de nombreux sites qui vont dans le bon sens, et que les clients veulent acheter, plutôt qu'une poignée de sites parfaits, mais qui restent confinés à un marché de niche.

Dans le web comme ailleurs, je pense que nous devons démocratiser l'écologie, même avec des solutions imparfaites. Car c'est de cette manière qu'on pourra avoir un impact à l'échelle de l'humanité.