Un audit EcoIndex à 42/100. Note D. Et pourtant, ce site tournait bien : responsive, joli, rapide sur ma fibre. Sauf qu'il chargeait 3,1 Mo rien qu'en page d'accueil, dont deux vidéos en autoplay dont personne ne m'avait jamais demandé l'avis. Voilà comment j'ai découvert que « rapide chez moi » et « léger pour la planète » sont deux choses différentes.
Réduire l'empreinte carbone d'un site web, ce n'est pas un sujet de développeur militant ni une contrainte qu'on subit en fin de projet. C'est un chantier mesurable, avec un score, des leviers précis et des gains qu'on voit bouger dans les chiffres. Je vais vous montrer par où j'ai commencé, ce qui a marché, et les deux ou trois trucs que j'ai perdus en route.
Points clés à retenir
- L'empreinte carbone d'un site vient à 80 % du terminal de l'utilisateur (son téléphone, son ordi), pas des serveurs comme on l'imagine.
- Le premier levier, de très loin, c'est le poids des pages : images, vidéos, scripts tiers.
- EcoIndex donne un score sur 100 et une note de A à G — c'est le point de départ le plus simple pour se situer.
- Éco-concevoir un site le rend aussi plus rapide. Personne n'a jamais perdu en conversion en allégeant ses pages.
- Vous pouvez diviser le poids d'une page par 4 sans qu'elle change visuellement. Promis.
L'empreinte carbone d'un site web, c'est quoi au juste (et pourquoi tout le monde se trompe)
La question qu'on me pose le plus souvent : « mais un site, ça consomme vraiment ? » Oui. Et pas là où vous croyez.
Quand on pense pollution numérique, on imagine des rangées de serveurs qui chauffent. Le fantasme du data center géant. C'est une partie du problème, mais une partie minoritaire. Dans la majorité des cas que j'ai pu mesurer sur mes propres projets, le terminal — l'appareil de la personne qui consulte le site — pèse autour de 80 % de l'impact total. Le réseau et les serveurs se partagent le reste.
Pourquoi c'est contre-intuitif ? Parce qu'un serveur, ça tourne en continu, donc on se dit que c'est lui le gouffre. Sauf que les data centers modernes sont optimisés, mutualisés, refroidis mieux qu'il y a dix ans. Votre visiteur, lui, fait tourner un JavaScript de tracking de 400 Ko sur un téléphone qui a six ans et une batterie en fin de vie. Multiplié par des millions de visites. Voilà le vrai coût.
Pourquoi le poids de la page est l'indicateur qu'il faut regarder en premier
Il y a une donnée qui circule partout et qui est vraie : une page web moyenne est passée d'environ 14 Ko au milieu des années 90 à plusieurs mégaoctets aujourd'hui. Le facteur est énorme, plusieurs centaines de fois. Et rien dans ce que voit l'utilisateur n'a justifié cette inflation.
Ce qu'on a ajouté, en vrac : des frameworks entiers pour afficher du texte, des polices web custom, des images non compressées exportées en PNG par-dessus le marché, trois scripts d'analytics qui se marchent dessus. J'ai déjà ouvert une page de 6 Mo pour... un formulaire de contact et un paragraphe de présentation. Le poids, c'est l'unité de mesure la plus directe : moins d'octets transférés = moins d'énergie consommée = moins de CO₂. Simple, brut, efficace.
Mesurer avant d'agir : l'audit EcoIndex comme point de départ
Premier réflexe quand je reprends un site : ne rien toucher avant d'avoir un chiffre. Parce qu'on a tous une intuition fausse sur ce qui pèse le plus, et moi le premier.
L'outil que j'utilise le plus, c'est EcoIndex. C'est gratuit, ça s'installe en extension de navigateur ou en ligne, et ça sort un score sur 100 assorti d'une note de A à G — comme l'étiquette énergie d'un frigo, mais pour une page web. Trois critères entrent dans le calcul : le nombre de requêtes HTTP, le poids de la page et la part de contenu déjà présent dans le cache du navigateur.
Un exemple concret d'éco-conception web
Pour rendre ça tangible, prenons une page que j'ai auditée. Score de départ : 48/100, note D.
- Poids total : 3,4 Mo
- Nombre de requêtes : 127
- Deux vidéos en autoplay chargées dès l'ouverture, alors que la moitié des visiteurs ne scrollement jamais jusqu'à elles
- Quatre polices web différentes, chacune avec plusieurs graisses
- Un carrousel qui chargeait les 8 slides d'un coup
Après intervention — et là je parle de choses faites en deux jours, pas d'une refonte :
- Poids descendu à 780 Ko (les vidéos passées en chargement différé, les images converties en WebP, redimensionnées à leur taille d'affichage réelle)
- Requêtes réduites à 41
- Polices ramenées à une seule, deux graisses, préchargées
- Carrousel qui ne charge que la slide visible
- Score final : 81/100, note B
Visuellement, la page est identique. Personne dans l'équipe n'a remarqué la différence. Le serveur, si.
Les leviers concrets, classés par ce qu'ils rapportent vraiment
Bon, entrons dans le vif. L'ordre compte : commencez par le haut, vous irez plus vite qu'en touchant aux détails d'abord.
| Levier | Effort | Gain typique constaté |
|---|---|---|
| Optimiser et lazy-loader les images | Faible | −50 à −70 % du poids total |
| Charger les vidéos à la demande, jamais en autoplay | Faible | −1 à −3 Mo par vidéo évitée |
| Réduire le nombre de polices et de graisses | Moyen | −100 à −400 Ko |
| Auditer les scripts tiers (analytics, pubs, widgets) | Moyen | Souvent −30 % de requêtes |
| Activer le cache navigateur et un CDN | Moyen | ↓ énorme sur les visites répétées |
| Choisir un hébergeur alimenté en énergie bas carbone | Variable | Variable, mais réel |
Les images : le poste où vous gagnerez le plus, le plus vite
Franchement, si vous ne faites qu'une chose, faites celle-là. Sur à peu près tous les sites que j'ai repris, les images représentaient entre 60 et 75 % du poids d'une page. Et dans la quasi-totalité des cas, elles étaient mal servies : format obsolète, dimensions excessives, pas de compression.
Trois actions, dans cet ordre :
- Convertissez en WebP ou AVIF. Le gain sur le JPEG est souvent de 25 à 35 % à qualité visuelle équivalente.
- Redimensionnez à la taille d'affichage réelle. Une image affichée en 600 px de large n'a aucune raison de faire 2400 px de côté.
- Activez le chargement différé (lazy loading). Les images en bas de page n'ont pas besoin d'être téléchargées avant que l'utilisateur y arrive.
Sur un site e-commerce que j'ai suivi, ces trois points seuls ont fait passer le poids de la page produit de 2,8 Mo à 1,1 Mo. Environ −60 %, sans toucher au design.
Le volet hébergement : petit mais pas nul
J'entends souvent qu'« héberger son site dans un data center écolo, c'est du greenwashing ». L'argument se défend en partie — un hébergeur ne devient pas propre parce qu'il plante un arbre. N'empêche : à service équivalent, un hébergeur qui alimente ses serveurs en électricité bas carbone émet réellement moins. Le serveur ne pèse que quelques pourcents à une quinzaine de pourcents du total selon les cas, mais c'est un levier qu'on active une fois et qu'on n'y pense plus.
Le vrai piège, ici, c'est d'en faire l'alpha et l'omega. Changer d'hébergeur sans avoir touché aux images, c'est repeindre les murs d'une maison qui n'a plus de toit.
Éco-conception, performance et SEO : le trio qu'on n'attendait pas
Une page plus légère se charge plus vite. Une page qui se charge plus vite retient mieux le visiteur, et les moteurs de recherche le savent depuis longtemps. Il n'y a pas de compromis à faire ici : ce qui est bon pour la planète est bon pour l'expérience et pour le référencement.
Ce que j'ai constaté sur un blog que je gère : après passage de 2,3 Mo à 900 Ko sur les articles principaux, le taux de rebond a baissé nettement et le temps de chargement perçu est passé sous la seconde sur mobile en 4G. Le trafic organique a suivi dans les semaines d'après, doucement mais sûrement. Je ne vais pas vous vendre que l'éco-conception a causé la hausse — trop de facteurs jouent — mais les deux vont clairement dans le même sens.
Faut-il tout refaire pour réduire son empreinte ?
Non, et c'est la bonne nouvelle. La grande majorité des gains s'obtient sans refonte : compression des images, chargement différé, nettoyage des scripts, cache. Sur mes projets, ces actions « rapides » ont apporté entre 60 et 70 % du gain total. La refonte complète est un luxe qu'on s'offre quand on a déjà épuisé les leviers simples.
Combien de temps ça prend, concrètement ?
Pour un site vitrine de taille moyenne que je n'avais jamais vu : un après-midi pour l'audit, deux à trois jours pour appliquer les corrections évidentes. Le score EcoIndex est passé de 44 à 79. Ce n'est pas un projet de six mois. C'est une semaine de travail concentré, dont le bénéfice se mesure ensuite à chaque visite.
Ce qui ne marche pas (et que j'ai essayé quand même)
Par honnêteté, il faut aussi parler des fausses pistes, parce que j'y suis tombé.
J'ai voulu tester un « mode sombre écologique » en me disant qu'un écran sombre consomme moins. Vrai sur les écrans OLED, faux ou négligeable sur la plupart des écrans LCD, et ça ne change strictement rien au poids transféré. Argument marketing, gain nul. À l'inverse, j'ai passé des heures à minifier du CSS pour grappiller 8 Ko, alors que la moitié de ce temps investi sur les images aurait rapporté 100 fois plus. Leçon : visez les gros postes avant les détails, sinon vous optimisez votre orgueil, pas vos émissions.
Et un dernier piège, plus sournois : croire qu'un score EcoIndex élevé suffit. Le score est un indicateur, pas un verdict. Un site peut afficher une belle note A et servir des vidéos énormes qu'on n'a pas vues parce qu'elles se chargent après le calcul. Mesurez, corrigez, remesurez. Le chiffre du départ n'est qu'un point de référence.
La véritable question n'est peut-être pas « comment descendre mon score de 20 points », mais « quel poids ce site mérite-t-il vraiment ? ». La plupart du temps, il est deux à trois fois plus lourd qu'il ne devrait l'être. Et personne, en le visitant, ne s'en apercevra jamais.
