Qu’est-ce que l’éco-conception web ?

Définition éco-conception web

D’une manière générale, l’éco-conception consiste à venir intégrer les fondements de l’écologie lors de la conception d’un produit, quel qu’il soit, et d’en limiter les effets négatifs sur l’environnement⁽¹⁾ . Cela se traduit par une diminution des matières premières utilisées, du matériel ainsi que de l’émission générale de CO².

L’éco-conception web repose sur le même principe, prendre en compte l’impact environnemental de ce dernier et tenter d’y remédier le plus possible en venant l’optimiser à la recherche d’efficience. L’idée générale, épurer au maximum tant les interfaces que le fonctionnement du site web.

Bien que lorsque l’on parle d’éco-conception, on parle presque principalement d’émission carbone des pages du site, cela va bien plus loin.

Un site éco-conçu offre de nombreux avantages :

• Amélioration de l’expérience utilisateur,
• Diminution de l’énergie utilisée sur tout le réseau,
• Diminution de sa facture électrique,
• Diminution de l’eau utilisée,
• Allègement de la bande passante,
• Plus grande accessibilité du site web dans le monde (premier effet kisscool),
• Limiter l’obsolescence du matériel informatique (second effet kisscool).

Nous verrons plus loin pourquoi se focaliser uniquement sur l’émission de carbone est une fausse bonne idée.

Avant cela, découvrons la première étape pour l’éco-conception de son site web : amélioration des performances.

Les 115 bonnes pratiques de l’éco-conception web

La problématique de performances des sites web a toujours fait partie de mes préoccupations, et cela, pour de nombreuses raisons que l’on pourrait résumer ainsi :

• Je déteste qu’un site mette du temps à s’afficher, encore plus le mien,
• La multiplication des ressources pour pallier un mauvais développement m’a toujours fait bondir.

C’est donc logiquement que je découvre en 2018 le guide “Les 115 bonnes pratiques de l’éco-conception web”. Avec le temps, ce guide s’est imposé comme une référence en la matière⁽²⁾ . L’ADEME met même la seconde édition du livre en accès libre⁽³⁾ , c’est-à- dire.

Voilà comment nous pourrions résumer 80% des actions en trois points :

• éliminer les ressources non essentielles (JS et CSS en tête),
• Adopter un design épuré,
• Assurer un développement technique orienté éco-conception.

Éliminer les fonctionnalités non essentielles

Saviez-vous qu’en moyenne sur le web mondial, 36% des octets JavaScript ne sont pas utilisés ?⁽⁴⁾ Soit environ 604 Kb sur desktop et 162 Kb pour le mobile, en moyenne, sur chaque page appelée dans le monde. L’utilisation de bibliothèques JS, chargeant trop de code n’y est pas pour rien.

Pire, ce résultat est obtenu à partir de données compressées. Cela pourrait être encore plus significatif dans la “réalité”.

À cela s’ajoutent les centaines de Kb de données non utilisés envoyés au travers des fichiers CSS des thèmes “qui peuvent tout faire” sur les CMS les plus populaires, WordPress en tête.

On se retrouve ainsi à véhiculer une quantité d’informations bien supérieure à ce qui serait juste nécessaire pour faire fonctionner son site.

Voilà une manière concrète de venir éliminer les fonctionnalités non essentielles. Cela ne signifie pas forcément se couper le bras sur une fonctionnalité pour être “dans les clous de l’éco-conception”.

Lorsque l’on sait que 45% des sites web utilisent un CMS⁽⁵⁾ , on comprend tout de suite que ce simple conseil peut être très pertinent.

En dehors de cet exemple qui reste très spécifique, l’éco-conception se fixe comme règle générale d’implémenter uniquement le minimum vital.

Less is more.

Avez-vous vraiment besoin de ces boutons de partage sur les réseaux sociaux ? Ce slider sur la page d’accueil que personne ne regarde ? Cette carte google maps sur votre footer ? De ces 4 polices d’écriture différentes.

La meilleure énergie étant celle que l’on n’utilise pas, ne pas implémenter certaines fonctionnalités, c’est la meilleure manière de l’économiser. #cqfd

Notre astuce pour créer des interfaces légères en fonctionnalité : penser mobile first.

Design épuré

Un site éco-conçu, c’est aussi un design qui ne vient pas surcharger inutilement ses pages. L’idée ? Éviter d’envoyer 4 Mo d’images alors qu’on a pris un grand soin à faire la page la plus légère possible.

Caricatural ? Non, mais pas tant que cela. En moyenne, 10% des pages d’un site web possèdent au moins une image dépassant le Mo⁽⁶⁾ . Ca laisse rêveur.

Pas besoin de compétences particulières pour faire passer ses images dans un outil comme TinyPNG⁽⁷⁾ et venir tout de suite agir sur cette valeur.

Bien évidemment, un design épuré ne se limite pas du tout au poids des images.

En dehors des choses évidentes comme venir limiter le nombre d’images ou venir utiliser certains formats modernes comme le webP, d’autres éléments sont à contrôler comme :

• la taille de la DOM,
• l’utilisation de sprite pour ses images de décoration,
• l’utilisation de font système.

Saviez-vous que Google Font était le tout premier service à être injecté comme JS tiers en pourcentage ? 62% des sites dans le monde l’utilise. Soit un point de plus que Google Analytics par exemple. Alors qu’il est possible d’utiliser des polices locales, l’utilisation d’une google Font, c’est des requêtes et des échanges en plus.

Limiter, voire éliminer, le recours à des services d’injection de code tiers JS est aussi une manière de penser à son design de manière épurée.

Développement technique

C’est ici que les 115 conseils prennent naissance. Nous ne détaillons pas l’ensemble ici. On y retrouve en vrac :

• des dizaines d’astuces JS,
• des dizaines d’astuces CSS,
• la gestion de sa DOM,
• la prise en compte de ses animations,
• La conception même des pages.

Bien que l’ensemble soit plutôt technique, voici comment nous pourrions résumer les choses :

• Favoriser les pages statiques,
• Compressez et minifiez vos fichiers CSS et JS,
• Évitez l’utilisation de CMS (ou tout mettre en cache),
• Utilisez les fonctions de stockage en RAM pour la configuration serveur.

Nous y reviendrons sur un prochain article, mais ces règles sont généralement très spécifiques et n’ont qu’une portée très limitée. Ce qui convient de retenir, c’est qu’une partie de l’optimisation de son site va passer par la production d’un code spécifique. Pour autant, une large partie des optimisations possibles sur la très grande majorité des sites serait faite en se concentrant déjà sur le design et le fonctionnel.

Notez que le guide des 115 pratiques mentionne également les hébergements verts ; nous y arriverons un peu plus loin dans le texte.

Ça ressemble à quoi un site web éco-conçu ?

Désireux et désireuses de voir un exemple de site éco-conçu ?

En fait, pas besoin de vous donner un exemple que vous ne connaissez pas car… vous êtes sur un site éco-conçu. Comme nous l’avons expliqué dans notre article sur l’utilisation de Jekyll comme CMS, nous recherchons à faire un site en phase avec nos convictions. L’éco-conception est l’une d’entre elle.

Comme vous pouvez le voir, nous l’espérons, l’éco-conception est capable de faire naître des sites au design évolué, moderne et fluide.

De la contrainte naît la créativité, ne l’oublions pas.

Le numérique : quel impact pour la planète ?

Un site éco-conçu est fréquemment présenté sous le prisme du gain de performance pur et du “poids carbone d’une page”. Si cela était son seul impact, alors ce serait bien dérisoire ; surtout pour un pays comme la France où 92%⁽⁸⁾ de l’énergie consommée est décarbonée.

Le carbone, faux combat de l’éco-conception ?

Qu’on se le dise, développer un site éco-conçu ne changera pas la face du réchauffement climatique en émettant moins de CO² à chaque appel d’une page.

Pourquoi ? Pour commencer parce que le numérique dans son ensemble représente “seulement” 4% des émissions de carbone dans le monde. S’il est vrai que son empreinte carbone va certainement doubler d’ici à 2025 et qu’il faut s’en préoccuper, quelle est la part des sites web là-dedans ?

Si lorsque l’on parle d’éco-conception web, cela tourne souvent autour d’optimisation technique de son site, on omet trop souvent que le vrai gain se trouve sur toute la chaîne.

Le chargement d’une page web est bien souvent insignifiant en termes d’émission carbone comparé à une séance de streaming par exemple⁽⁹⁾ .

Le vrai problème d’émission de CO² du numérique concerne avant tout les appareils utilisés pour se connecter au réseau. Dans une étude de 2020, le sénat estime que 70%⁽¹⁰⁾ de l’empreinte carbone d’une personne résidant en France était dû à ses équipements.

Si l’éco-conception d’un site web ne permettra jamais de limiter l’adoption du tout dernier téléphone portable juste parce qu’on aime être à la mode, il vient sérieusement limiter l’obsolescence. Comment ? En proposant un site très léger avec lequel un simple téléphone peut interagir avec fluidité et rapidité.

Sans oublier non plus les équipements réseaux très nombreux, allant du serveur web aux routeurs et switchs qui parsèment le parcours de la donnée. En étant moins sollicités grâce à un développement web éco-conçu, cela vient limiter la charge et le besoin de les multiplier.

Un non renouvellement de matière qui économise du carbone, mais aussi beaucoup d’eau. Un ordinateur, c’est en moyenne 20 000 litres d’eau⁽¹¹⁾ qu’il faut sur toute la chaîne pour le produire.

En parlant d’eau, et si l’on s’intéressait maintenant à son hébergement web ? Vous ne voyez pas le rapport ? Lisez la suite.

L’importance d’une infrastructure verte

Qu’on se le dise, tout “éco-conçu” que soit votre site web, s’il ne s’appuie pas sur un hébergeur green, cela n’aura pas servi à grand chose.

Si la réduction de performances nécessaires à faire tourner votre site permet de venir limiter l’obsolescence des matériels terminaux et une partie de la consommation des matériels du réseau, cela ne fait pas tout ; loin de là.

Le data-center que vous allez utiliser pour héberger votre site, stocker les données en base et faire transiter de l’information, pèse un poids significatif dans ce schéma d’éco-conception.

Pourquoi ? Car c’est lui qui va utiliser toutes les matières premières pour faire tourner votre site, et nous ne parlons pas que d’électricité, loin s’en faut.

Alors que l’on pourrait croire que choisir son hébergeur sera la partie la plus simple de son éco-conception, on se rend rapidement compte que cela ne va pas être le cas.

PUE : 3 lettres pour mesurer l’efficacité énergétique

Le PUE, ou Power Usage Effectiveness, est une métrique utilisée pour mesurer l’efficacité énergétique d’un data center⁽¹²⁾ . Créée par le consortium Green Grid⁽¹³⁾ , cette métrique se calcule assez simplement : la puissance totale de l’installation/l’énergie de l’équipement informatique = PUE⁽¹⁴⁾ .

“ La puissance totale de l’installation correspond à la quantité d’énergie utilisée par l’installation, qui comprend tout le matériel du centre de données, les composants d’alimentation électrique, les systèmes de refroidissement et les systèmes d’éclairage. L’énergie des équipements informatiques fait référence à la quantité d’énergie utilisée pour alimenter les équipements de stockage et de mise en réseau ainsi que les équipements de contrôle tels que les moniteurs et les postes de travail.”⁽¹⁵⁾

Le but ? Arriver le plus proche possible de 1.

Alors tout va bien, il existe un simple indicateur à prendre en compte pour choisir son hébergement web vert !

Hélas non, cela est loin d’être un bon indicateur. Pourquoi ?

• Il ne prend pas en compte l’origine de l’énergie,
• Il ne prend pas en compte la consommation d’eau,
• Il ne prend pas en compte le CO² dépensé dans l’achat de nouveaux matériels.

Trois facteurs indissociables d’une véritable infrastructure verte, en adéquation avec votre volonté d’éco-conception. Pourtant, vous allez vous rendre compte que les informations nécessaires à la prise de décision ne sont pas légions sur les sites des hébergeurs… qui ont pourtant parfois d’excellent PUE.

Consommation d’eau

Saviez-vous qu’en 2020, un datacenter de chez Microsoft a consommé 7 fois plus d’eau que prévu pour cause de canicule. Le résultat ? 84 000 000 de litres d’eau utilisé(16) ; pour un seul datacenter.

Cet exemple pour illustrer deux choses :

• Le PUE se concentre uniquement sur la consommation électrique,
• Les datacenter utilisent de l’eau pour ne pas utiliser des climatisations… qui utilisent de l’électricité.

Le résultat ?

660 000 000 000 de litres d’eau utilisés en 2020 dans le monde pour contrer l’effet joule⁽¹⁶⁾ . On comprendra donc rapidement que l’eau est une ressource des plus utilisée dans le monde des data center.

Un hébergement vert, ce n’est donc pas qu’une question de carbone, c’est aussi et surtout une question de consommation d’eau.

Petit problème en perspective : il va maintenant falloir trouver l’information. Le plus simple ? Si votre hébergeur n’en parle pas… parions qu’il ne s’en préoccupe pas beaucoup. Il y a fort à parier qu’un tel engagement aurait le droit à sa part de communication. Après tout, cela coûte assez cher à mettre en place.

Âge du matériel

Qu’on se le dise, même chez votre revendeur d’hébergement web préféré, la vraie question du CO² va se poser dans le matériel informatique. Un ordinateur, c’est entre 240 kg et 940 kg de CO² qui est émis à sa fabrication, si ce dernier est fait en europe ou en chine⁽¹⁷⁾ .

Pour vous faire une idée de l’importance de ce chiffre, il faut plus de 48 ans d’utilisation pour arriver à l’équilibre carbone sur un ordinateur⁽¹⁸⁾ .

On comprend tout de suite pourquoi l’âge de son matériel a une si grande importance… et pourquoi le PUE met un but contre son camp.

Encore une fois, en se focalisant uniquement sur la consommation énergétique, le PUE passe à côté d’un problème : le renouvellement de parc informatique pour abaisser la consommation globale. Cela conduit à produire de nouveaux ordinateurs et mettre au rebut du matériel pourtant encore largement utilisable.

Après tout, le meilleur serveur, c’est celui qu’on a pas besoin de fabriquer. Non ?

Je vous laisse imaginer l’impact du matériel et de son renouvellement fréquent dans les services en nuage.

Opter pour du matériel datant de quelques années est donc la seule solution possible si l’on souhaite vraiment appuyer sa démarche d’éco-conception.

Après tout, votre code sera léger comme l’air grâce à son éco-conception.

Pourquoi opter pour les machines de dernières générations.

Si cela semble plutôt logique d’inclure cela dans sa démarche, cela va tout de suite l’être beaucoup moins lorsque vous allez rechercher l’information.

Un indice pour le comprendre entre les lignes, parce que cela n’est pas très vendeur pour la plupart des gens : partir sur des offres “low cost” de fournisseurs qui vendent des offres de qualité. Pourquoi ? Car ces offres correspondent généralement à des serveurs recyclés.

L’électricité verte

Il y a fort à parier que lorsque nous avons évoqué les hébergements verts, ce soit la première chose qui vous ait traversé l’esprit. Pourtant, cela ne figure qu’en dernier de notre liste.

Pourquoi ?

Car le but affiché de l’éco-conception est clairement de venir faire chuter le bilan carbone de ses pages web. Il suffit de voir les différents calculateurs en ligne pour s’en convaincre^{(19) (20) (21) (22)} . Si l’on se limite à cela, alors la situation géographique de son data center suffira à régler ce problème.

Ainsi bien évidemment, opter pour une électricité renouvelable est un plus indéniable. Toutefois, cela est loin de régler la question d’un hébergement web vert. Et c’est bien trop souvent ce simple argument que l’on va prendre en compte pour se décider.

En avant vers l’éco-conception web

Que l’on soit pour les valeurs véhiculées, ou que l’on se limite à souhaiter réduire sa facture énergétique ainsi que ses temps de chargement, l’éco-conception web est la démarche que toute entreprise devrait mener sur son site web.

Les gains sont nombreux et une démarche d’éco-conception, même rapide, aura de nombreux bienfaits positifs.

Attention toutefois à votre hébergement web, clé de voûte d’une éco-conception pensée jusqu’au bout.