Si internet était un pays, il serait le troisième plus gros consommateur d’électricité au monde. Internet consomme en effet 10 à 15% de l’électricité mondiale ; et quand on sait que toute l’électricité produite n’est pas verte – loin de là – on n’a aucun doute sur le fait qu’il contribue à la pollution.
Il existe cependant des solutions pour pallier à cette surconsommation qui augmente chaque année. L’une d’elle se trouve à la racine de cette consommation : lors de la conception des sites et plateformes qui nécessitent cette électricité.
Il s’agit de l’éco-conception web : concevoir les solutions web avec une approche écologique.
C’est le sujet de cet article, dans lequel nous allons expliquer comment mesurer l’empreinte écologique de son site, et surtout, comment la diminuer.
Quelques chiffres sur l’empreinte carbone d’internet
Pour bien se rendre compte de l’impact écologique qu’ont internet et le numérique, voici quelques chiffres :
- Le numérique (qui inclut également tout ce qui concerne les appareils physiques) est responsable de 4% des émissions de CO2 (avec une estimation à 8% en 2025) ;
- Le streaming, qui représente 60% des flux de données échangées, a une pollution équivalente à un pays comme l’Espagne ;
- Envoyer un e-mail avec une pièce-jointe de 1 Mo revient à laisser une ampoule allumée pendant 25 minutes.
On comprend donc l’enjeu de plus en plus important de l’écoconception.
Vérifier l’empreinte écologique de son site
Avant d’expliquer comment améliorer l’empreinte écologique de son site (et donc de faire de l’éco-conception), voyons déjà comment la mesurer.
Pour ça, il existe plusieurs outils.
WebPageTest
WebPageTest est un site permettant de simuler une connexion à votre site avec divers paramètres.
Une fois cette connexion testée, WebPageTest renvoie tout un tas de données vous donnant une idée de ce qui transite vers votre site, de l’état de compression de vos images, etc.
Tout ça est important, car plus il y a de données échangées entre le navigateur et votre site, plus l’énergie nécessaire pour le faire fonctionner sera importante.
Website Carbon Calculator
Website Carbon Calculator est un outil en ligne mesurant lui, ou estimant, la consommation en carbone de votre site.
Une fois ce dernier testé, vous savez à quel point votre site est « propre » comparé au reste du web, et sa consommation en CO2 à chaque fois que quelqu’un viste la page.
Le site donne également des comparaisons, pour mieux comprendre ce que votre page web consomme, et donne aussi des conseils en éco-conception.
Lighthouse
Lighthouse est un outil de développement intégré à Google Chrome, permettant de mesurer plusieurs données d’un site web, notamment ses performances.
Il donne donc le même type de données que WebPageTest, avec des conseils d’optimisation. L’intérêt de Lighthouse est que c’est un outil destiné aux développeurs freelance, et il peut donc être utilisé lors des phases de développement, ce qui est essentiel lorsqu’on veut faire de l’éco conception.
L’éco-conception web en 6 étapes
Maintenant qu’on a compris les problématiques liées à l’écoconception, il est temps de voir comment l’implémenter lors du développement.
Pour ça, nous avons choisi 6 actions à mettre en place pour concevoir un site web de manière écologique.
Mais avant de les lister, voyons déjà quels sont les objectifs de ces actions. Il y en a trois principaux :
- Réduire le nombre de requêtes échangées via votre site ;
- Diminuer le volume de ces données échangées ;
- Limiter le traitement de l’information.
En respectant ces 3 objectifs, on tend d’avantage vers un site propre, durable.
1) Choisir les bonnes technos
La première étape lors de la conception d’un projet web, c’est d’en choisir les technos, la stack technique.
Et c’est dès cette étape qu’on peut intégrer l’écoconception à notre site. En effet, toutes les technos n’ont pas le même impact en terme de consommation de ressources, et donc d’énergie.
Sans faire ici de comparatif poussé, il y a une techno qui pourrait être privilégiée pour un développement plus vert. Il s’agit des PWA.
En effet, les Progressive Web Apps possèdent certains avantages :
- Le même code quelle que soit la plateforme ;
- Un développement rapide (et donc moins de consommation de ressources numériques lors de cette étape) ;
- Leur poids très faible ;
- Un fonctionnement hors-ligne (pas besoin d’échanges de données pour qu’elles fonctionnent).
Ainsi, si vous voulez prendre en compte l’éco-conception lors de votre développement, envisager cette techno dès le début est une bonne idée.
2) Le lazy loading
Une fois le développement commencé, il y a des pratiques à mettre en place dès le début. Le lazy loading est l’une d’entre elles.
Le lazy loading (chargement paresseux, littéralement), vous le savez probablement, est une technique permettant de charger les éléments seulement lorsqu’on a besoin d’eux.
Par exemple, cela peut être ne charger des images que lorsqu’elles doivent apparaitre à l’écran. Il en est de même avec les composants de frameworks JavaScript ; il faudrait les charger uniquement lorsqu’on en a besoin.
3) Utiliser le cache pour une éco-conception efficace
Ce conseil peut paraitre évident, mais il est bon de le rappeler. Le cache est un excellent moyen de réduire les données échangées, car elles sont stockées, et il n’y a plus besoin, par exemple, d’appeler une base de données pour retourner les résultats d’une requête.
Il existe plusieurs types de cache, notamment :
- Via le navigateur ;
- Par le serveur qui héberge le site ;
- Ou directement par le fournisseur d’accès internet.
4) Les images
Ce n’est pas une surprise, les images représentent une grosse partie de la bande passante lors du chargement d’un site web. Suivant les sites et leur optimisation, elles sont parfois plus lourdes que le site lui-même !
Il est donc important de :
- Réduire la taille des images (inutile d’avoir une image 4k pour afficher l’aperçu d’une photo) ;
- Les compresser, également ;
- Les charger uniquement lorsqu’on en a besoin (utiliser le lazy loading dont on a déjà parlé).
5) Le design en éco-conception
En dehors du développement pur et pur, il faut également intégrer l’UX et l’UI à sa logique d’éco conception.
En effet, les animations, et le style en général, ont un impact non négligeable sur la consommation de ressources d’un site web.
Listons quelques règles qu’il est important de suivre :
- Privilégier les effets CSS aux effets JavaScript, pour les animations, par exemple ;
- Tout en évitant les effets CSS trop complexes (ils peuvent augmenter l’utilisation du CPU) ;
- Éviter l’utilisation de vidéos (et ne pas les charger automatiquement à l’ouverture de la page) ;
- Se passer de certains éléments, comme les carrousels.
6) Minimiser le code
Cela est aujourd’hui fait automatiquement via les frameworks JavaScript, mais on n’utilise pas toujours ces frameworks.
Ainsi, il est important pour une écoconception efficace, de minimiser son code source, comme ses fichiers JavaScript et CSS.
Il existe pour cela des outils, qu’ils soient en ligne ou disponibles à travers des bibliothèques.
Il y a bien évidemment d’autres techniques faisant de la conception web une conception propre, verte, comme le choix de l’hébergeur, la configuration du serveur, etc.
À vous aussi d’adapter votre développement en fonction de votre cas, chaque projet étant différent et nécessitant des ressources différentes !
Les problèmes de l’éco-conception web
S’il existe des solutions pour faire de l’écoconception, elles ne sont pas toutes toujours faciles à mettre en place.
En effet, tout projet de développement fait face à des contraintes propres à ses besoins fonctionnels.
Par exemple, un site dont le but est que des photographes partagent des clichés pourra difficilement se contenter de peu d’images et d’images de qualité réduite.
De plus, qu’on travaille en freelance ou dans une agence, un client peut avoir des exigences qui vont contre ce principe d’éco conception.
C’est à l’équipe de développement de trouver le juste milieu.
Et vous, utilisez-vous des techniques spécifiques à l’éco-conception ? Dites-le nous en commentaire !
