L’éco-conception numérique

C’est quoi l’éco-conception ?

L’éco-conception ou conception écologique, est une approche générale qui vise a intégrer des considérations environnementales tout au long du cycle de vie d’un produit ou d’un service. Son principe fondamental repose sur les 3 R : Réduire, Réutiliser et Recycler.

  • Réduire : consiste à limiter l’empreinte écologique en utilisant moins de matières premières, d’énergie et en évitant le gaspillage.
  • Réutiliser : encourage l’utilisation prolongée des produits en les concevant pour être réparables, modulables ou transformables. Cela permet d’allonger leur durée de vie et de diminuer la quantité de déchets générés.
  • Recycler : consiste à valoriser les déchets en les transformant en nouvelles matières premières.

L’éco-conception est un pilier essentiel de la transition vers un mode de consommation responsable, car elle offre une voie concrète et pragmatique pour réduire l’impact sur l’environnement et favoriser l’essor de solutions durables.

C’est quoi l’éco-conception appliquée au numérique ?

L’éco-conception numérique qu’on peut appeler aussi “green IT”, est une approche qui vise à intégrer des critères environnementaux à la conception, au développement et à l’usage de solutions numériques.
Dans le monde du développement, cette approche cherche à réduire l’impact environnemental des applications tout en favorisant l’efficacité, la durabilité et la sobriété.

L’impact environnemental du numérique : des chiffres !

  • En 2016, Internet atteint 62% de la population mondiale. En 2021, 62% de la population était concerné, ce qui représentait déjà 4,9 milliards d’êtres humains. Sachant qu’il faut compter une croissance en terme de consommation de 9% par an.
  • Le numérique représente 3 à 4% des émissions de gaz à effet de serre (GES) dans le monde.
  • La consommation mondiale de streaming vidéo émet 300 millions de tonnes de CO₂ chaque année.
  • En France 41% des TPE, PME et ETI confirment que le recours au numérique est nécessaire pour transformer leurs actions business en croissance.
  • La quantité de déchets électriques ou électroniques représentait 52 millions de tonnes en 2021, contre 45 millions de tonnes en 2016.

Les bonnes pratiques

Conception

Limiter les fonctionnalités inutiles

45% des fonctionnalités demandées ne sont jamais utilisées. Il faut donc, avant toute chose, se demander si la fonctionnalité que l’on veut développer est vraiment utile, éventuellement sonder les utilisateurs finaux et enfin analyser l’usage de la fonctionnalité et ne pas hésiter à la supprimer si elle apporte peu de valeur. Cela fera du code en moins, des appels réseaux en moins, du temps de processeur en moins et au final une consommation d’énergie moindre.

Estimer l’impact environnemental de vos pages

En faisant ce travail d’analyse, vous pouvez prendre conscience de l’impact de votre application et visualiser la progression de vos améliorations. Il existe plusieurs outils permettant d’analyser et de noter l’impact environnemental des applications web. En voici quelques-uns :

Il est également possible de mesurer notre impact au niveau de l’intégration continue. Ainsi, il nous est possible de visualiser notre progression et de voir concrètement les progrès réalisés. Il existe différents scripts réalisant cette mesure disponible sur Github. Mais une solution un peu plus complète semble être GreenFrame.

Simplifier l’utilisation

Simplifier les parcours utilisateur permet de limiter les chargements de pages et les appels réseau non sollicités. Une utilisation fluide permet également de limiter la présence de l’utilisateur sur l’application et donc de limiter l’utilisation de ressources clientes comme serveur.

Mobile first

Une approche de conception mobile-first est, par essence, plus éco-conçue qu’une conception classique. Une telle approche doit mettre l’accent sur l’optimisation des performances, car la puissance de l’appareil et la consommation de données sont des facteurs limitants dans ce contexte. La taille de l’écran impose aussi de réfléchir à une interface plus simple, qui va a l’essentiel, donc avec moins d’interactions et de données à charger. Une interface plus simple permet un usage plus aisé et donc moins de temps passé par l’utilisateur à utiliser son appareil et solliciter les serveurs.

Réalisation

Choix des technologies

Faire un benchmark des solutions disponibles sur le marché avec comme premiers critères le poids et la vitesse d’exécution peuvent être des facteurs de réduction de l’impact environnemental. Utiliser un framework Javascript plutôt que du code vanilla n’est pas sans conséquences. On peut par exemple voir un écart de 27% de la consommation d’énergie dans cette étude (pdf), entre vanilla et React. 

Optimiser les poids des images

Les images et illustrations représentent une part importante du poids d’une application web. C’est pour cela qu’il est important de les optimiser :

  • La taille : si l’image doit-être redimensionnée via du CSS, c’est qu’elle n’est pas à la bonne taille. Il faut limiter cela en utilisant des fichiers déjà aux bonnes dimensions.
  • Le format : certains formats sont plus lourds que d’autres. Pour les photos, privilégiez JPEG ou WEBP. Pour les illustrations, le format SVG. Pour les icônes, plutôt GLYPHS, CSS ou SVG à défaut. Le SVG a aussi l’avantage de pouvoir être intégré dans le HTML directement au build de l’application, ce qui annulera le besoin de faire une requête pour l’utilisateur.
    Dans cet article nous pouvons voir l’impact en terme de consommation d’énergie en fonction de certains formats.

Il existe aussi des moyens en HTML pour charger la bonne image en fonction de la taille de l’écran. Ainsi l’élément source peut être associé à l’élément picture afin de charger la bonne image.

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Héberger ses images dans un CDN permet de réduire la distance entre l’utilisateur et le serveur et donc d’utiliser moins d’énergie pour charger l’élément (Ex: serveur d’image en Europe pour un utilisateur européen).

Charger ses images en mode lazy, donc seulement lorsque l’utilisateur cherche à l’afficher est également une bonne pratique.

<img src="image.jpg" alt="..." loading="lazy" />

Limiter les vidéos

Les vidéos représentent une part importante du trafic mondial. Plus de la moitié de la bande passante y est consacrée.

La première chose à faire est de n’en utiliser que lorsque c’est important. Peut-être qu’une illustration, une infographie ou encore mieux, un texte peut remplacer la vidéo. Il est possible d’optimiser la taille et le poids des vidéos si vraiment c’est nécessaire, mais en fonction de la durée, son poids restera important en comparaison des autres options possibles. Enfin, il ne faut pas que les vidéos se lancent automatiquement. Pourquoi charger une vidéo que l’utilisateur n’a pas demandé à visionner ?

Utiliser des polices natives

Certaines polices sont intégrées aux différents systèmes d’exploitation. Les utiliser permet de limiter le poids de certaines applications et l’usage du réseau nécessaire pour les charger. Voici une liste de polices présentent sur la majorité des systèmes d’exploitation :

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Limiter les interactions et les animations

Les applications web modernes font la part belle à l’interactivité. Mais cela a un coût énergétique non-négligeable. Il est essentiel de les limiter quand cela est possible. L’exemple des chatbots est très parlant, car il est là pour remplacer un parcours en général simple par un dialogue simulé. Cela nécessite beaucoup de requêtes et d’interactions au lieu de quelques clicks. Les animations consomment également de l’énergie, principalement sur le terminal client. Elles permettent souvent une interaction plus ludique, mais plus consommatrice d’énergie en contrepartie.

Limiter l’usage de script tiers

L’intégration de script tiers dans votre application peut embarquer parfois du code inutile pour vous. Un exemple est celui des intégrations de réseaux sociaux. Beaucoup de code est inséré dans la page là où une image (voire un texte) cliquable pourrait suffire.

Bundler et minification

Faire en sorte que le bundle de l’application soit le plus léger possible en n’y intégrant que ce qui est utile à l’application (Ex: tree shaking) et minifier son code permet de réduire le poids du bundle de 20 à 80%.

Les bénéfices non-environnementaux

SEO

La vitesse de chargement et la compatibilité mobile sont deux facteurs importants dans la SEO. Un site éco-conçu se doit d’optimiser ces deux aspects et donc, par essence, un site éco-conçu sera favorisé par les moteurs de recherche.

Accéssibilité

Une conception légère et une optimisation du code améliorent la compatibilité avec les lecteurs d’écran et tout autre dispositif d’assistance. Une interface plus simple, souvent une conséquence de l’éco-conception, limite les obstacles cognitifs pour les utilisateurs ayant des troubles de l’apprentissage ou de l’attention.

Conclusion

L’éco-conception numérique est une approche globale qui va de la conception, au développement, jusqu’à l’exploitation d’une application. C’est notre premier levier d’action à nous, artisans du numérique, dans un monde en quête de croissance infinie.

Pour aller plus loin