Comprendre
l’éco-conception de site en 3 min…

Qu’est-ce que l’éco-conception d’un site web et comment l’appliquer ?

L’éco-conception de site web consiste à adopter dès la création de l’interface des pratiques permettant de réduire son impact environnemental : consommation d’eau, émissions de gaz à effet de serre, utilisation de ressources non renouvelables…

Chaque année, on compte entre 1 et 1,5 milliard de sites en ligne(1). La majorité sont des sites vitrines, c’est-à-dire des sites relativement simples, composés de quelques pages : une page d’accueil, une présentation des offres ou services, des informations sur l’entreprise, une page de tarification et un formulaire de contact.

Une seule visite sur ce type de site, s’il n’est pas éco-conçu(2), consommerait en moyenne 0,025 litre d’eau bleue et émettrait environ 1,9 g de CO₂e.

Environ 20 % des sites web sont des sites vitrines, soit entre 300 et 400 millions. Si chacun de ces sites reçoit une seule visite, cela représenterait :

  • 7,5 à 10 millions de litres d’eau bleue consommés ;
  • 570 à 760 tonnes de CO₂e émis.

À titre de comparaison, une seule visite sur la page d’accueil d’Amazon.com consommerait environ 0,03 litre d’eau bleue et générerait 2,84 g de CO₂e.

Or, Amazon.com reçoit environ 2,3 milliards de visites chaque mois(3). Ce trafic massif équivaut à :

  • 69 millions de litres d’eau bleue consommés ;
  • 6 532 tonnes de CO₂e émis par mois.

Cela signifie qu’il suffirait d’environ 6 à 7 visites sur chacun des 400 millions de sites vitrines pour atteindre un impact environnemental équivalent à un seul mois d’activité d’Amazon.

On sous-estime souvent l’impact cumulé des « petits » sites dans le paysage du numérique responsable. Individuellement inoffensifs, ils forment collectivement un véritable levier d’action vers une meilleure sobriété numérique.

Il est donc temps que chacun prenne sa part de responsabilité : le changement ne repose pas uniquement sur les épaules des géants du web. Des millions de petites actions, comme la création de sites éco-conçus, peuvent produire un impact global significatif.

La bonne nouvelle concernant votre site ? Adopter les bonnes pratiques de l’éco-conception, va aussi servir vos intérêts ;).

Quels sont les facteurs qui influencent l’impact environnemental d’un site web ?

Si on laisse de côté ici la production, l’utilisation et la fin de vie des équipements numériques, les 2 principaux postes de « pollution » d’un site Web sont :

  • les émissions de gaz à effet de serre ;
  • la consommation d’eau.

Pourquoi ? Parce qu’un site entraine une consommation d’énergie importante (tout cela ne fonctionne pas avec l’opération du Saint-Esprit) et que l’eau alimente les systèmes de refroidissement des serveurs pour éviter qu’ils ne surchauffent…

L’hébergement web : un critère majeur d’impact carbone

Pour fonctionner, un site Web est hébergé sur les serveurs des datacenters. Ces grosses infrastructures composées de pièces entières remplies d’ordinateurs et d’espace de stockage, qui consomment énormément d’électricité produite la plupart du temps avec des énergies fossiles.

C’est de cette manière que le Web contribue à augmenter les émissions de gaz à effet de serre. En 2010, les centres de données utilisaient 1 % de l’électricité mondiale et, selon certaines sources, cette consommation pourrait monter jusqu’à 13 % en 2030.(4)

Ajoutons à cela que plus les serveurs sont utilisés, plus ils chauffent, plus il faudra les refroidir pour éviter une surchauffe. La consommation d’eau augmente donc également.

Le nombre de requêtes HTTP et de scripts chargés

Les requêtes HTTP sont les demandes codées formulées par votre navigateur (Chrome, Firefox, etc.) au serveur pour qu’il effectue une action. Par exemple, si un site utilise une police d’écriture Google Font pour les textes de votre site, le navigateur devra envoyer 2 types de requêtes :

  • une vers le serveur de votre hébergeur pour récupérer le fichier HTML ;
  • une vers le serveur où sont hébergées les polices Google pour afficher les textes dans la bonne police d’écriture.

Tout ce qui n’est pas hébergé en local sur votre site implique donc des requêtes supplémentaires pour que votre site soit tout beau sur l’écran de vos visiteurs. Or, plus il y a de requêtes, plus votre site consomme de l’énergie.

Le poids des données : images, vidéos, fichiers

Votre page Web est composée d’un ensemble de fichiers et de données stockés sur les serveurs : fichiers HTML, CSS, JavaScript, photos, vidéos, etc. On vient de le voir pour afficher tout ça, le navigateur envoie une requête au serveur. Mais plus il y aura de données et plus elles seront lourdes, plus le transfert sera « difficile » et plus il nécessitera de consommer de l’énergie.

C’est comme vous, la grosse armoire Louis XV de votre grand-mère vous demandera plus d’efforts et donc plus d’énergie au moment de la déménager que votre petite table de nuit Ikea…

La complexité des pages et des animations

Lorsqu’un site s’affiche dans votre navigateur, celui-ci transforme le code HTML en une sorte de maquette dynamique appelée le DOM (Document Object Model). Plus ce document contient d’éléments visuels, d’animations, de boutons, de pop-ups ou de contenus chargés au défilement, plus il devient complexe. Et plus la page est complexe, plus elle est lourde à charger, augmentant ainsi sa consommation d’énergie pour fonctionner.

Pour rendre la chose plus concrète, imaginons notre site web comme une maison intelligente :

  • Le code HTML, ce sont les plans de votre maison ;
  • Le navigateur, c’est le constructeur qui lit les plans et bâtit la maison ;
  • Le DOM représente votre maison construite ;
  • Chaque élément visuel de votre page web : images, textes, boutons, etc., représente les éléments de la maison (lampe, canapé, volets…) ;
  • Le code JavaScript c’est le système de domotique de la maison : il allume les lumières quand vous entrez dans une pièce, ferme les volets quand vous appuyez sur un bouton, change la température automatiquement, etc.

Plus vous avez d’éléments connectés dans votre maison, plus elle devient gourmande en électricité. C’est pareil pour votre site web : plus il est interactif et visuellement chargé, plus il consomme de ressources.

Comment éco-concevoir un site web efficace et responsable ?

Vous l’aurez compris pour pouvoir limiter et réduire l’impact environnemental de votre site, vous allez devoir agir sur les éléments dont on vient de parler.

Choisissez un hébergeur web écologique (green hosting)

Nous l’avons vu, les hébergeurs (datacenters) consomment beaucoup d’énergie produite à partir d’énergie fossile. L’un des principaux leviers d’éco-conception est donc de choisir un prestataire éco-responsable, c’est-à-dire un hébergeur écologique qui s’engage pour la planète :

  • Utilisation d’énergies renouvelables (énergie éolienne, énergie solaire, etc.) ;
  • Optimisation des systèmes de refroidissement des serveurs ;
  • Achat d’équipement issu de l’économie circulaire (construit à partir d’éléments recyclés, matériel reconditionné, etc.) ;
  • Optimiser l’utilisation des serveurs et augmenter leur temps d’utilisation ;
  • Réutilisation de la chaleur produite par les serveurs ;
  • Infrastructure construite en évitant de détériorer les écosystèmes existants ;
  • Compensation de leurs émissions carbone ;
  • Soutien et engagement pour des projets en faveur de l’écologie.

Voici une liste non exhaustive d’hébergeurs considérés comme « vert » : (6)

Optimisez l’expérience utilisateur

Éco-concevoir un site ne doit évidemment pas nous éloigner de notre objectif premier : construire une interface utile pour nos utilisateurs, qui leur offre les fonctionnalités, services et informations dont ils ont besoin.

Ça tombe bien parce que créer un site « sobre » c’est justement créer une interface optimale qui répond aux besoins de vos utilisateurs et uniquement à ces besoins. Alors exit les options et gadgets inutiles, les pages contre-intuitives et incompréhensibles, les dizaines de clics nécessaires pour accéder à l’information souhaitée, les pop-up dans tous les sens, les publicités insupportables, etc.

Pour cela il faut donc :

  • Déterminer précisément l’objectif que vous souhaitez atteindre avec votre site ;
  • Etudier la cible d’utilisateurs pour connaître leurs besoins, leurs envies, leurs habitudes en ligne, etc. Ils ne doivent plus avoir de secrets pour vous.
  • Intégrer dans votre site les fonctionnalités, services, médias, interactions, qui font sens pour votre cible afin de vous permettre d’atteindre votre objectif.

Un seul mot d’ordre : on va à l’essentiel !

Optez pour un design épuré et fonctionnel

Là encore, rassurez-vous, il n’est pas question de faire une croix sur la créativité, l’innovation et l’originalité. Au contraire, faire mieux avec moins, c’est aussi ça l’innovation.

Là encore cela va rendre service à vos visiteurs : on le sait, un design trop complexe, trop lourd et qui apporte trop d’information est désagréable pour l’utilisateur. Vous connaissez cette phrase : « trop d’information, tue l’information ».

Voici donc quelques bonnes pratiques qui seront à la fois bonnes pour la planète et vos utilisateurs :

  • ne multipliez pas les polices d’écriture : cela augmente le nombre de requêtes et honnêtement ce n’est pas très lisible pour vos utilisateurs ;
  • n’abusez pas des animations : des éléments qui arrivent dans tous les sens alourdissent votre site et perturbent l’attention de votre visiteur ;
  • optimisez la taille de vos images : ne chargez pas des images dans une résolution plus grande que celle dans laquelle elles vont vraiment s’afficher. Cela alourdit votre site avec des fichiers volumineux et le navigateur doit fournir « un effort » supplémentaire pour afficher l’image dans la bonne taille. On utilise donc des ressources inutilement ;
  • ne mettez pas vos vidéos en « autoplay » et si vous le pouvez hébergez-les sur un site comme YouTube puis affichez uniquement une image avec un bouton « play » pour que la vidéo ne charge qu’au moment où l’utilisateur clique sur l’image. Cela allègera votre page ;
  • privilégiez les formats d’images et de vidéos les moins lourds : WebP, SVG, WebM, Lottie, etc.

Privilégiez un développement technique léger et réduisez les requêtes externes

De plus, nous l’avons dit plus haut, plus il y a de requêtes pour afficher les éléments d’un site, plus il consomme de l’énergie. Il est donc important de les réduire au maximum.

Pour cela vous pouvez :

  • héberger votre police d’écriture en local sur le serveur de votre site ;
  • réduire les animations et les médias trop complexes ;
  • éviter d’utiliser trop de plug-ins pour ajouter des fonctionnalités à votre site ;
  • réduire l’utilisation de widgets externes ;
  • Favoriser la mise en cache du navigateur : cela évite au navigateur de renvoyer des requêtes pour recharger les mêmes fichiers à chaque visite, etc.

Quels bénéfices pouvez-vous tirer de l’éco-conception de votre site web ?

Réduire votre empreinte environnementale

Disons-le clairement : l’éco-conception n’est pas une solution miracle.

Le numérique représente aujourd’hui 3 à 4 % des émissions de gaz à effet de serre dans le monde, et pourrait atteindre jusqu’à 14 % d’ici 2040, selon certaines estimations.

L’éco-conception s’inscrit donc dans une démarche globale, complémentaire aux autres actions nécessaires pour un numérique plus responsable.
Il ne s’agit pas non ici de « greenwashing », mais d’une brique de plus, accessible, concrète, que vous pouvez mettre en place dès maintenant pour réduire l’impact environnemental du digital… et le vôtre.

Comme nous l’avons vu en intro de cet article, agir sur un site peut sembler anodin.
Mais collectivement, à l’échelle de millions, ces petits gestes peuvent véritablement faire la différence.

Améliorer la performance et la vitesse de chargement

Vous l’avez compris, éco-concevoir un site consiste à l’alléger au maximum pour qu’il consomme le moins possible. Or, s’il est plus léger il est aussi plus performant et donc plus rapide.

Ces caractéristiques sont particulièrement appréciées par :

  • les moteurs de recherche : cela favorise donc le référencement de votre site ;
  • les utilisateurs : la patience n’est pas toujours notre qualité première, un site réactif est donc beaucoup plus agréable.

Offrir une meilleure expérience utilisateur

Nous l’avons vu plus haut, on va à l’essentiel et vos utilisateurs apprécieront. Ils pourront trouver rapidement l’information qu’ils cherchent, accéder facilement aux services dont ils ont besoin, acheter l’article qui leur correspond parfaitement, etc.

Or lorsqu’on apprécie un service, on y retourne et on en parle. Je vous donne un exemple. Récemment nous avons réservé un voyage type séjour tout inclus pour cet été. Nous avons fait une multitude de sites de voyage différents. Dans l’ensemble on y trouvait à peu près les mêmes offres, les mêmes destinations dans les mêmes budgets…

Mais en terme d’expérience utilisateur on a eu de tout :

  • des sites complexes et contre-intuitifs, avec trop d’infos dans tous les sens ;
  • des sites avec des fonctionnalités qui ne marchaient pas ;
  • des sites sur lesquels le choix des critères était incompréhensible ;
  • d’autres sur lesquelles on ne trouve pas, ou difficilement, certaines informations importantes ;
  • un site facile d’utilisation, sur lequel on a pu trouver des offres en fonction de nos critères facilement, obtenir un devis clair et qui paraissait transparent notamment au sujet des bagages, des vols et des assurances, des infos sur ce qui était compris dans le prix et ce qui ne l’était pas, etc.

Bon, il n’y a pas trop de suspense… Sur quel site avons-nous réservé notre voyage à votre avis ? Et sur lequel on retournera pour réserver nos futures vacances ? Et enfin… lequel recommanderons-nous à nos proches ?

Booster votre référencement naturel (SEO)

Pour rendre votre site compétitif en matière de référencement naturel il vous faut bien sûr des contenus optimisés, des balises bien placées, des textes contenant des titres travaillés, etc. mais également :

  • un site performant comme nous l’avons vu un peu plus tôt ;
  • une bonne expérience utilisateur : une navigation claire et agréable pour favoriser l’augmentation du nombre de visites, un bon taux de rétention (temps passé sur la page), un faible taux de rebond (les gens ne repartent pas de votre site aussitôt), etc.
  • un design lisible et léger ainsi que des contenus faciles à lire et des visuels optimisés ;

Valoriser une image de marque responsable

N’oublions pas le petit bonus pour votre activité.

Un site web éco-conçu envoie un message fort : votre entreprise ne se contente pas de parler d’écologie, elle agit. En optant pour un site sobre, rapide et responsable, vous montrez que vos valeurs environnementales se traduisent aussi dans vos outils numériques.

Ce positionnement renforce la cohérence de votre communication, attire une clientèle sensible à ces enjeux, et peut même devenir un facteur de différenciation sur des marchés de plus en plus attentifs à l’éthique digitale. L’éco-conception devient alors un véritable atout de marque.

Comment mesurer l’impact environnemental de votre site web ?

Maintenant vous savez, adopter des pratiques d’éco-conception pour votre site est à la fois bénéfique pour la planète, pour vos utilisateurs et donc pour votre business. Si vous avez déjà un site en ligne, pas de panique, il n’y a pas besoin de tout jeter et de tout recommencer, vous pouvez déjà commencer par mesurer son impact environnemental.

Les outils d’analyse :

Plusieurs sites gratuits existent aujourd’hui pour mesurer le « score » écologique de votre site Web. En voici quelques uns :

Attention ces sites ne sont pas fiable à 100 %, et ne sont pas toujours précis, mais ils permettent de vous donner un bon ordre d’idée d’où se situe votre site.

Réaliser un audit de votre site :

Si vous souhaitez obtenir un audit plus complet retraçant plus en détail les performances de votre site ainsi que l’empreinte environnementale de chaque page, avec quelques tips et bonnes pratiques pratiques à mettre en place pour la réduire, vous pouvez remplir le formulaire sur la page suivante :

https://ecodesign.foxaya.fr/audit-site-web/

FAQ

Questions fréquentes :

L'éco-conception est-elle utile pour un "petit site" ?

Chaque accompagnement démarre par une phase d'écoute de vos besoins, suivie d'un audit, puis d'une co-construction des solutions adaptées. Vous êtes guidé à chaque étape.

Peux-t-on éco-concevoir un site sans le rendre moche ?

Sites internet, supports de formation, jeux interactifs, vidéos en motion design, plateformes pédagogiques, contenus juridiques simplifiés, espaces immersifs en 3D… et bien plus encore.

Dois-je changer d'hébergeur pour que mon site soit plus durable ?

Sites internet, supports de formation, jeux interactifs, vidéos en motion design, plateformes pédagogiques, contenus juridiques simplifiés, espaces immersifs en 3D… et bien plus encore.

L'innovation, le design et la créativité sont-ils compatibles avec l'éco-conception ?

Sites internet, supports de formation, jeux interactifs, vidéos en motion design, plateformes pédagogiques, contenus juridiques simplifiés, espaces immersifs en 3D… et bien plus encore.

L'éco-conception à t-elle un impact sur le référencement de mon site ?

Sites internet, supports de formation, jeux interactifs, vidéos en motion design, plateformes pédagogiques, contenus juridiques simplifiés, espaces immersifs en 3D… et bien plus encore.

Sources de l’article :

(1) – Nombre de sites en ligne : www.statista.com
(2) – Les chiffres ont été calculés à partir d’un site vitrine pris au hasard sur internet et regroupant les caractéristiques citées. Ces calculs ont été fait par le site : ecoindex.fr
(3) – Site de Fédération du e-commerce et de la vente à distance : https://www.fevad.com/barometre-3eme-trimestre-2023/
(4) – Articles de Anders S. G. Andrae et de Tomas Edler – On Global Electricity Usage of Communication Technology: Trends to 2030 : https://www.mdpi.com/2078-1547/6/1/117
(5) – https://lp.independant.io/