Comment éco-concevoir un site web ? (+ cas pratique)

Le sujet reste malheureusement beaucoup trop peu connu des développeurs et des autres acteurs de la tech. Chez Steply, nous sommes convaincu que l'avenir de la technologie passera par l'éco-conception. Il ne peut pas en être autrement.

L'importance de l'éco-conception de nos produits et services

Jusqu'ici l'évolution dans le secteur de la tech est toujours passée par plus de performances, plus d'animations, plus d'effets wow. On utilise pour cela toujours plus de données qui transitent par des réseaux toujours plus énormes et sont traitées par des machines toujours plus puissantes.

Le problème aujourd'hui c'est que notre planète ne suit pas. Elle n'est plus capable.

Pour avoir une idée de l'impact environnemental de la technologie. Voici une statistique "locale" que je trouve très parlante :

Si tous les sites internet français réduisaient de 64% leurs émissions de CO2, on pourrait retirer l’équivalent des émissions carbone de 13 M de véhicule chaque année
— dalkia.fr

Alors bien sûr, personne ici ne dit qu'il faut arrêter de créer ou d'innover, mais plutôt que la gestion des ressources à notre disposition doit faire partie des étapes de conception de nos services et de nos produits.

Il faut optimiser, contraindre, limiter : être sobre. Cela s'appelle l'éco-conception. Concevoir en pensant et en prenant des mesures concrètes pour la planète.

Les principes de l'éco-conception appliqués chez Steply

L'idée de Steply c'est de proposer à nos utilisateurs un assistant écolo qui les aide pas à pas à réduire leur empreinte environnementale sans culpabilité.

Cela nécessite un produit (l'application) mais également tout le matériel pour l'héberger et le vendre. Comme ce site web par exemple.

Nous ne pouvions pas créer tout ça — on le rappelle, dans le but d'aider les autres a réduire leur empreinte — en contribuant sans limite à l'empreinte environnementale énorme de la tech de notre côté. Nous ne pouvions pas ne pas éco-concevoir.

Nous avons donc décidé d'intégrer les considérations environnementales dès les premières étapes du processus de développement de tous nos produits ou services.

Pour illustrer quelques principes de l'éco-conception, reprenons l'exemple de ce site web (steply-app.com).

Minimiser nos besoins en énergie

Un site web, comme celui de Steply, est constamment disponible pour les lecteurs car il est hébergé et servi par un ordinateur constamment allumé et connecté à internet. On appelle généralement cet ordinateur un serveur web.

Déjà ça, ça consomme pas mal d'énergie. Mais continuons.

L'analogie du serveur qui sert un site web comme s'il servait un plat au restaurant, permet de comprendre qu'il y a une transmission de la donnée lorsque nous visitons un site web. Notre site web n'est qu'un tas de données (organisées sous forme de fichiers) qui circule du serveur web vers mon ordinateur à chaque fois que je recharge ma page.

Faire transiter cette donnée du serveur web vers mon ordinateur nécessite aussi de l'énergie.

Une fois les fichiers sur mon ordinateur, je n'ai pas envie de lire du code. Ce n'est pas intéressant. Alors mon navigateur web va lire ce code à ma place et l'interpréter de façon plus visuelle et agréable.

Ce travail d'interprétation qu'on appelle aussi "le rendu", consomme également plus ou moins d'électricité en fonction de la complexité de ma page.

Voilà la difficulté devant laquelle nous nous sommes retrouvés : minimiser les besoins en énergie d'un produit qui en consomme à chaque étape de son cycle de vie.

Au niveau de l'hébergement, nous ne pouvons pas faire grand chose si ce n'est choisir un hébergeur qui utilise des énergie vertes pour alimenter ces datacenter. Nous travaillons aujourd'hui avec OVH qui alimente ces serveurs avec au minimum de 77% d'énergie verte.

OVH n'est pas l'hébergeur le plus "vert" du marché mais c'est celui qui répond le mieux à nos besoins tout en faisant l'effort de diminuer son empreinte environnementale.

En tant que développeur et éditeur d'une solution logicielle, nous avons beaucoup plus d'actions à implémenter sur les deux autres étapes : la communication entre le serveur et le client (les requêtes HTTP), et l'exécution de notre code sur la machine du client.

Nous avons utilisé le bundling des fichiers sources pour réduire au maximum les aller-retour entre le serveur web et le navigateur client. Au lieu de demander au serveur de fournir un à deux fichier de styles, des fichiers de polices d'écriture, ainsi que nos différents scripts JavaScript, le bundler met toutes les ressources ensemble pour n'avoir qu'un seul fichier de chaque type à charger.

Au final, le navigateur ne chargera que:

1. 1 fichier HTML (la structure de la page)
2. 1 fichier CSS (la style / la décoration de la page)
3. 1 fichier JS (la logique de la page / les interactions)
4. 1 fichier de police

Après avoir diminué les requêtes HTTP, nous avons voulu diminuer la quantité de données qui transite à chaque requête. Pour cela nous utilisons ce que l'on appelle le code spliting.

Cette technique consiste à ne fournir que le code nécessaire pour la page qui est demandée par l'utilisateur. Par exemple, il y a beaucoup de code dans nos fichiers de styles qui est utilisé uniquement sur la homepage de steply-app.com. Ce code est inutile sur les autres page, le serveur ne l'envoie donc pas.

Nous pouvons encore optimiser le code spliting sur notre site mais les résultats sont déjà significatifs avec un début d'implémentation.

Réduire la consommation en ressource matérielle

Lorsque l'on creuse sur le sujet de l'éco-conception, on se rend vite compte que la façon dont nous développons nos applications a aussi un impact sur les habitudes de consommation de nos utilisateurs.

Une application ou un site web qui demande beaucoup de ressources va ramer et être compliqué — voir impossible — à utiliser sur les appareils les plus anciens. Ce qui va pousser l'utilisateur à renouveler son matériel pour un autre appareil plus performant.

En 2021, 37% des Français achetaient un nouveau smartphone parce que l'ancien ne fonctionnait plus correctement (lenteur, bug…) ou parce que le système d’exploitation n’était plus à jour.
— Baromètre du numérique 2021

Sauf que la majorité de l'empreinte carbone de la tech est concentrée sur l'étape de fabrication des appareils :

• infrastructure réseaux = 5.5% de l'empreinte
• datacenters = 15.8% de l'empreinte
• usage quotidien = 10% de l'empreinte
• fabrication des appareils = 51% de l'empreinte

En tant que développeur, je sais que la majorité du code qui demande beaucoup de ressource matérielle n'est en fait que du code pas optimisé. Du code que l'on a pas retravaillé et optimisé parce que, comme on ne l'a testé que sur des appareils récents, on n'en a pas ressenti le besoin. Optimiser ? Pourquoi faire, ça fonctionne.

Alors pour steply-app.com, l'idée c'était justement d'utiliser le code le plus simple possible. Et ensuite de l'optimiser au maximum.

Pour aller encore plus loin, nous avons pris une décision radicale : utiliser le moins possible JavaScript.

Moins de JavaScript, c'est moins de données qui transitent déjà. Mais c'est aussi moins de code exécuté sur la machine de l'utilisateur.

La modification de la page par du JavaScript est aussi une des opérations les plus lourdes en termes de ressources car elle nécessite une modification du HTML (donc une étape supplémentaire de rendu HTML) et une modification du CSS (donc une étape supplémentaire de rendu du CSS).

Et puis, nous sommes parti d'une observation simple. On ne peut pas supprimer le CSS puisqu'un site moche ne vend pas. Donc essayons de supprimer un maximum de JavaScript.

C'est ce que nous avons fait par exemple pour la roadmap ou le carrousel de la page d'accueil sur mobile. Tout fonctionne sans un gramme de JavaScript.

Nous ne disons pas qu'il ne faut pas utiliser de JavaScript. Il reste le langage de la logique sur le web et pour beaucoup de besoin il reste la meilleure option. Mais le limiter a été l'une des façons de limiter l'impact environnementale de steply-app.com.

Optimiser l'expérience utilisateur en tenant compte de l'environnement

Concevoir c'est réfléchir et décider de ce que sera le produit, mais également réfléchir et décider de comment on va le construire. C'est donc la bonne étape pour éviter de construire quelque chose qu'il sera difficile d'optimiser ensuite.

Je pense à certains choix d'apparence d'anodine que nous avons fait. Comme ne pas mettre d'infinite scroll sur la page listant les articles de blog. Ce choix nous a, comme pour les étapes précédentes, permis de :

• réduire la quantité de code JavaScript
• réduire la quantité de données qui transite sur le réseaux
• réduire également la quantité de ressource en énergie utilisé

L'avantage par rapport aux étapes précédentes, c'est que ces choix ont été fait avant le développement du site web. Nous avons donc également économisé du temps et de l'argent.

La pagination des listes d'article est une alternative moins moderne que l'infinite scroll, peut-être moins "belle" pour certains designers. Mais elle est tout aussi bien pour l'expérience utilisateur, beaucoup mieux pour l'accessibilité et moins consommatrice de ressource.

Conclusion

L'éco-conception des applications et site web n'est pas un luxe mais plutôt une nécessité pour réduire l'impact environnemental de la tech.

C'est aussi quelque chose de tout à fait réalisable simplement en utilisant les bonnes techniques de conception et de développement :

• optimiser le code de l'application
• limiter la quantité de code nécessaire pour faire fonctionner l'application
• simplifier le code au maximum
• diminuer le nombre de requêtes HTTP nécessaires pour servir le code de l'application
• limiter l'utilisation de JavaScript quand c'est possible
• choisir des fonctionnalités plus respectueuses des besoins de l'utilisateur et de la planète

Des techniques que nous avons utilisé lors du développement de steply-app.com et que nous utilisons en ce moment même pour développer l'application mobile de Steply.

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.