L’éco-conception web consiste à concevoir un site internet en limitant sa consommation d’énergie et ses émissions de gaz à effet de serre, depuis le choix de l’hébergeur jusqu’à la façon dont les images sont compressées et le code est écrit. Cette approche ne demande pas de renoncer à un beau design, et la plupart des actions qui réduisent l’empreinte environnementale d’un site le rendent aussi plus rapide, mieux référencé sur Google, et plus agréable à utiliser sur un téléphone. Voici par où commencer, avec des mesures concrètes que vous pouvez appliquer cette semaine.
Qu’est-ce que l’éco-conception web ?
L’éco-conception web, c’est appliquer à un site internet le même raisonnement que celui qu’on applique à un produit physique quand on veut réduire son empreinte écologique : on considère tout le cycle de vie, du serveur qui héberge les fichiers au terminal de l’utilisateur qui affiche la page, en passant par le réseau qui transporte les données, et on cherche à consommer moins à chaque étape.
Concrètement, cela touche cinq domaines. Le choix de l’hébergeur, d’abord, parce que c’est le serveur qui consomme de l’électricité vingt-quatre heures sur vingt-quatre pour servir vos pages. Le poids des fichiers ensuite, parce que chaque kilo-octet transféré consomme de l’énergie sur le réseau et force le téléphone ou l’ordinateur du visiteur à travailler davantage. Le design et l’ergonomie, parce que le nombre de polices de caractères, la résolution des images et la quantité d’animations influencent directement le volume de données à transférer. Le code, parce qu’un site construit avec des bibliothèques inutiles charge des centaines de kilo-octets de JavaScript que personne n’utilise. Et le contenu, parce qu’une page qui affiche une vidéo en lecture automatique de trente secondes pèse parfois autant que cinquante pages de texte.
La bonne nouvelle, c’est que ces cinq domaines recoupent presque parfaitement les bonnes pratiques de performance web, de référencement naturel et d’accessibilité. Un site plus léger se charge plus vite, Google le classe mieux, et les visiteurs avec une connexion lente ou un téléphone ancien y accèdent sans difficulté. Ce n’est donc pas un sacrifice, c’est un investissement qui rapporte sur plusieurs tableaux à la fois.
Quel est l’impact environnemental d’un site internet ?
Le secteur numérique dans son ensemble est responsable d’environ 3,5 à 4 % des émissions mondiales de gaz à effet de serre, un chiffre comparable à celui de l’aviation civile, selon les estimations du Shift Project. Votre site internet, pris isolément, ne pèse évidemment pas grand-chose dans ce total, mais la logique de l’éco-conception repose sur l’effet de masse : quand 1,9 milliard de sites existent sur le web, chaque gramme de CO2 économisé par page vue finit par compter.
Website Carbon Calculator, un outil gratuit qui estime l’empreinte d’une page web, situe la moyenne mondiale autour de 0,36 gramme de CO2 par page vue. Pour un site vitrine qui reçoit 10 000 visites par mois, cela représente environ 43 kilogrammes de CO2 par an, l’équivalent de 300 kilomètres en voiture. Un site e-commerce avec des pages produit plus lourdes et un trafic plus important peut facilement dépasser une tonne par an.
Trois postes concentrent l’essentiel de cette consommation. Le centre de données (data center) qui héberge votre site consomme de l’électricité pour faire tourner les serveurs et les refroidir. Le réseau qui transporte les données entre le serveur et le navigateur du visiteur consomme de l’énergie à chaque relais. Et le terminal du visiteur (téléphone, ordinateur, tablette) consomme de l’électricité pour afficher la page, exécuter le JavaScript et rendre les animations. Quand vous allégez votre site, vous réduisez la consommation à ces trois niveaux simultanément.
Ce qui rend le sujet urgent, c’est que la tendance naturelle va dans le mauvais sens : le poids moyen d’une page web a été multiplié par plus de quatre en dix ans, selon HTTP Archive, principalement à cause des images non optimisées, du JavaScript tiers (publicité, analytique, widgets de chat, réseaux sociaux) et des vidéos embarquées. Sans intervention consciente, chaque refonte de site tend à produire un site plus lourd que le précédent.
Comment choisir un hébergement web plus sobre ?
Le choix de l’hébergeur est le premier levier, et probablement le plus simple, parce qu’il ne demande aucune modification de votre site : vous changez de prestataire, et toute l’énergie consommée par votre serveur passe d’une source à une autre.
Le critère le plus important est la source d’énergie qui alimente le centre de données. Un hébergeur qui fonctionne à l’énergie renouvelable (hydraulique, solaire, éolien) réduit l’empreinte carbone de votre site de façon considérable par rapport à un hébergeur alimenté au charbon ou au gaz. En Suisse, Infomaniak est le choix le plus évident : l’entreprise est basée à Genève, ses centres de données fonctionnent à l’énergie renouvelable, et elle compense 200 % de ses émissions carbone restantes. En France, o2switch exploite son propre centre de données à Clermont-Ferrand avec des équipements basse consommation. Parmi les hébergeurs européens qui affichent des engagements vérifiables, on trouve aussi Scaleway (Paris) et PlanetHoster (qui propose des serveurs en France et au Canada).
Vérifiez deux choses avant de choisir : les certifications ISO 14001 (management environnemental) et ISO 50001 (management de l’énergie), qui attestent d’un engagement audité par un tiers, et la localisation géographique du centre de données par rapport à votre public, parce qu’un serveur situé plus près de vos visiteurs réduit la distance parcourue par les données sur le réseau et donc la consommation d’énergie à chaque requête.
Le coût d’un hébergement sobre n’est pas plus élevé qu’un hébergement classique. Les offres d’Infomaniak commencent autour de 7 francs par mois pour un hébergement mutualisé, et celles d’o2switch sont à prix fixe autour de 6 euros par mois. Vous ne payez pas plus cher pour un hébergeur responsable, vous payez simplement un hébergeur qui a fait des choix d’infrastructure différents.
Comment alléger les images et les polices de caractères ?
Les images représentent en moyenne entre 40 et 60 % du poids total d’une page web, ce qui en fait le premier poste à optimiser si vous voulez réduire l’empreinte de votre site sans toucher au design ni au contenu.
Le format d’image fait une différence considérable. Le format AVIF, supporté par tous les navigateurs modernes depuis 2023, produit des fichiers 30 à 50 % plus légers que le JPEG à qualité visuelle équivalente. Le format WebP, un peu moins performant mais compatible avec davantage de navigateurs anciens, offre une réduction de 25 à 35 % par rapport au JPEG. Si votre site utilise encore des images au format PNG pour des photographies (ce qui arrive plus souvent qu’on ne le pense), la différence de poids avec l’AVIF peut atteindre 80 %. Un audit de votre site révélera rapidement les images qui pèsent le plus lourd.
Le dimensionnement est l’autre levier. Une image affichée en 400 pixels de large sur un téléphone n’a pas besoin d’être envoyée en 2 000 pixels : servir des tailles adaptées à chaque écran (ce qu’on appelle les images responsives avec l’attribut srcset en HTML) réduit le volume transféré sans aucun impact visuel pour le visiteur. Et le chargement différé (lazy loading) évite de télécharger les images qui se trouvent en bas de page tant que le visiteur n’a pas fait défiler jusque-là.
Les polices de caractères passent souvent sous le radar, mais elles pèsent lourd. Chaque fichier de police complète pèse entre 50 et 250 kilo-octets, et un site qui utilise quatre polices différentes (une pour les titres, une pour le corps de texte, une pour les citations, une pour les boutons) charge facilement 500 kilo-octets de polices avant même d’afficher le moindre mot. Deux mesures réduisent ce poids de façon importante : limiter le nombre de polices à deux maximum (une pour les titres, une pour le texte courant), et appliquer le subsetting, une technique qui consiste à ne conserver dans le fichier de police que les caractères réellement utilisés (les lettres de l’alphabet latin, les chiffres, les accents) en supprimant les glyphes cyrilliques, grecs, arabes et les variantes que votre site n’utilise pas. Cette opération seule peut diviser le poids d’une police par trois ou quatre.
Faut-il supprimer les animations et les vidéos ?
Non, pas systématiquement, et cette question mérite une réponse honnête parce que certains guides d’éco-conception donnent l’impression que tout élément visuel au-delà du texte brut est un gaspillage. Ce n’est pas vrai, et un site visuellement pauvre n’est pas un site vertueux si personne n’a envie de le consulter.
La question pertinente n’est pas “faut-il supprimer cette animation ?” mais “cette animation aide-t-elle le visiteur à comprendre quelque chose, à se repérer dans la page, ou à interagir avec un élément ?”. Une animation de transition qui guide l’attention d’un bloc à l’autre a une fonction. Un carrousel qui fait défiler six témoignages en boucle alors que personne ne clique sur les flèches n’en a aucune. Une vidéo de démonstration de votre produit qui dure trente secondes et que le visiteur lance volontairement a une valeur réelle. Une vidéo en arrière-plan qui se lance automatiquement pour faire joli consomme des mégaoctets de bande passante sans apporter d’information.
En pratique, trois règles permettent de garder un site vivant sans alourdir inutilement. La première : ne jamais lancer automatiquement une vidéo ou une animation lourde, laisser le visiteur décider de la lire. La deuxième : préférer les animations CSS (qui utilisent le processeur graphique du terminal et consomment très peu) aux animations JavaScript complexes qui exécutent du code à chaque image. La troisième : respecter la préférence utilisateur prefers-reduced-motion, un réglage du système d’exploitation qui permet aux personnes sensibles aux mouvements (et à celles qui veulent économiser leur batterie) de désactiver les animations, et que votre site devrait écouter pour couper automatiquement les effets visuels non essentiels.
Comment réduire le poids du code ?
Le JavaScript est devenu le principal facteur de surpoids sur le web contemporain. Le navigateur doit télécharger le code, l’analyser, le compiler et l’exécuter, et chacune de ces étapes consomme de l’énergie sur le terminal du visiteur, en particulier sur les téléphones où le processeur est moins puissant et la batterie limitée.
Le premier réflexe consiste à examiner ce que votre site charge réellement. L’onglet “Réseau” des outils de développement de votre navigateur (Chrome, Firefox, Safari) affiche la liste de tous les fichiers téléchargés à l’ouverture d’une page, triés par taille. Très souvent, on y découvre des scripts tiers qui pèsent des centaines de kilo-octets : widgets de chat en direct que personne n’utilise, pixels de suivi publicitaire accumulés au fil des campagnes, bibliothèques de polices chargées depuis Google Fonts alors qu’on pourrait les héberger localement, plugins de partage social qui se chargent sur chaque page alors qu’un simple lien suffirait.
Chaque script tiers que vous supprimez allège le site et réduit aussi le nombre de requêtes HTTP, c’est-à-dire le nombre de connexions que le navigateur doit établir avec des serveurs distants pour afficher la page. Moins de requêtes signifie moins d’énergie consommée sur le réseau.
Sur le code que vous contrôlez (votre propre site), trois techniques réduisent le poids de façon significative. Le code splitting découpe le JavaScript en petits morceaux et ne charge que celui dont la page courante a besoin, au lieu d’envoyer tout le code du site à chaque visiteur. Le tree shaking (secouer l’arbre, littéralement) identifie les fonctions importées mais jamais utilisées dans les bibliothèques et les élimine du fichier final. Et la minification compresse les fichiers en supprimant les espaces, les commentaires et les noms de variables inutilement longs, ce qui réduit le poids de 20 à 40 % supplémentaires.
Si votre site vitrine est construit avec un framework JavaScript lourd (React, Angular, Vue) mais n’a besoin d’aucune interactivité complexe, la refonte la plus sobre consiste parfois à revenir à du HTML statique généré au moment de la compilation, sans JavaScript côté client, ce qui donne des pages qui pèsent souvent moins de 50 kilo-octets et se chargent en moins d’une seconde.
Comment mesurer l’empreinte de votre site ?
On ne peut pas améliorer ce qu’on ne mesure pas, et heureusement, plusieurs outils gratuits permettent d’évaluer l’empreinte environnementale d’un site web en quelques secondes.
Website Carbon Calculator (websitecarbon.com) est le plus connu. Vous entrez l’adresse de votre site, et l’outil estime les grammes de CO2 émis par page vue en se basant sur le poids de la page, le nombre de requêtes et le type d’hébergement. Il utilise la version 4 du modèle Sustainable Web Design pour son calcul. Un bon score se situe en dessous de 0,20 gramme par page vue, et la moyenne mondiale est autour de 0,36 gramme.
EcoIndex (ecoindex.fr), développé par le collectif GreenIT.fr, va plus loin en attribuant une note de A à G (comme l’étiquette énergie d’un réfrigérateur) en analysant trois indicateurs : le poids de la page, le nombre d’éléments dans le DOM (la structure HTML), et le nombre de requêtes HTTP. Son approche est complémentaire de Website Carbon parce qu’elle prend en compte la complexité du code et pas seulement le volume de données transféré.
Lighthouse, l’outil de Google intégré dans Chrome (accessible via les outils de développement), ne mesure pas directement le CO2, mais son score de performance est un indicateur fiable de la consommation d’énergie : un site qui obtient 95 ou plus sur 100 en performance consomme structurellement moins qu’un site qui obtient 40, parce que les critères mesurés (temps de chargement, taille des ressources, temps de blocage du JavaScript) sont directement corrélés à la quantité d’énergie dépensée pour afficher la page.
En France, le RGESN (Référentiel Général d’Écoconception de Services Numériques), publié en version 2 en mai 2024 par la DINUM et l’ADEME, fournit un cadre structuré de 79 critères répartis en neuf catégories : stratégie, spécifications, architecture, UX/UI, contenu, frontend, backend, hébergement et algorithmes. Le référentiel est volontaire pour l’instant, mais la loi REEN de 2021 impose déjà des obligations d’éco-conception aux services publics numériques, et il sert de base aux appels d’offres publics et à plusieurs labels privés. Pour une PME, il constitue un excellent outil d’auto-évaluation même sans viser une certification formelle.
Par quoi commencer cette semaine ?
Si vous ne deviez retenir que cinq actions pour réduire l’empreinte de votre site à court terme, voici celles qui offrent le meilleur rapport entre l’effort fourni et l’impact obtenu, classées par ordre de priorité.
La première action est de tester votre site avec Website Carbon Calculator et EcoIndex pour connaître votre point de départ, parce que sans diagnostic, vous ne savez pas où concentrer vos efforts. La deuxième est de convertir vos images au format AVIF (ou WebP si vous devez supporter des navigateurs très anciens) et de mettre en place le chargement différé sur toutes les images qui ne sont pas visibles immédiatement à l’ouverture de la page. La troisième est de faire l’inventaire des scripts tiers chargés sur votre site (analytique, chat, widgets sociaux, pixels publicitaires) et de supprimer ceux que vous n’utilisez plus activement. La quatrième est de vérifier que votre hébergeur utilise de l’énergie renouvelable ou de démarrer une réflexion sur une migration vers un prestataire plus responsable comme Infomaniak ou o2switch. Et la cinquième est de limiter vos polices de caractères à deux familles maximum, en appliquant le subsetting pour ne charger que les caractères dont votre site a réellement besoin.
Ces cinq actions, appliquées sur un site vitrine classique, peuvent réduire le poids des pages de 40 à 60 % et diviser par deux l’empreinte carbone estimée, sans aucune modification visible du design pour vos visiteurs. C’est un point de départ, et si vous souhaitez aller plus loin avec un audit technique complet ou une refonte orientée performance, chaque étape supplémentaire amplifie les gains.
L’éco-conception web n’est pas une contrainte que l’on s’impose par culpabilité : c’est un ensemble de pratiques qui rendent votre site plus rapide, mieux référencé, moins cher à héberger et plus agréable à utiliser, tout en réduisant son empreinte environnementale. Le meilleur moment pour commencer était hier, et le deuxième meilleur moment, c’est maintenant.
