5 exemples de sites éco-responsables et comment réduire l’empreinte carbone de votre site

Un site internet écologique, pour quoi faire ?

De 2,5% à 4,4% sur 2 ans, c’est bien non ? Si votre compte épargne était presque multiplié par 2 (1,76 précisément) tous les 2 ans vous seriez aux anges. En revanche si la probabilité de développer un cancer de la gorge suivait cette progression, vous n’auriez sans doute pas la banane. Les chiffres c’est bien, mais ça dépend de ce qu’il y a derrière.

En 2020 le numérique représentait 2,5% de l’empreinte carbone de la France et en 2022 il en constituait 4,4% (source Ademe). Notre usage des solutions digitales et en particulier d’internet et des IA augmente chaque année et va constituer un véritable problème.

L’internet mondial a une empreinte carbone similaire à celui de l’industrie de l’aviation, sans parler de ses besoins en énergie (voir la récente étude du Shift Project).

Un site internet, pourtant digital et intangible, a une empreinte carbone en raison :

• Des données qu’il transfère pour chaque page vue.
• De la nature de l’énergie utilisée pour l’héberger.
• Des choix esthétiques qui sont proposés et affichés par l’écran.
• De l’expérience utilisateur proposée.

Vous qui avez un site ou qui souhaitez en créer un, pourquoi ne pas prendre les bonnes habitudes dès maintenant ? Vous pouvez réduire et limiter l’empreinte écologique de votre site en faisant créer un site web éco-responsable et sobre.

Vous êtes développeur et vous ne vous êtes jamais vraiment posé la question de savoir si un site web pouvait être écolo ou non ? Vous avez toutes les connaissances requises pour proposer à vos clients des services de création de sites internet éco-responsables, il suffit de faire les bons choix, de savoir en expliquer les motivations, et de bien conseiller.

Vous ne nous croyez pas ? Venez on vous montre.

Éco-conception de site web : 5 éléments à prendre en compte

Un site internet écologique ne se fait pas tout seul, mais en prenant en compte quelques paramètres simples, on peut atteindre des objectifs réalistes et avantageux. Vous n’aurez pas le site le plus vert du monde (qui n’existe sans doute pas) mais vous vous inscrirez dans une démarche qui non seulement améliorera les performances de votre site, mais permettra de faire quelque chose à votre niveau pour l’environnement.

L’HÉBERGEMENT WEB ÉCOLOGIQUE (OU PRESQUE)

Un hébergement web écologique relève un peu du contresens. Un hébergement est, vous ne l’ignorez pas, constitué de serveurs, qui sont, pour faire simple, des espaces de stockage très performants et évolués. Ce stockage et le trafic qu’il reçoit fonctionnent à l’électricité. C’est là que la notion d’écologie devient difficile à définir.

En effet, on peut tout à fait imaginer qu’un hébergement web écologique s’approvisionne en électricité 100% renouvelable ou nucléaire, avec une empreinte carbone de fonctionnement très basse, voire nulle. On pourrait donc choisir un hébergeur situé dans une nation dont l’électricité est décarbonée.

Sauf que les nations n’utilisent pas toujours ni entièrement leur propre électricité. Le Traité sur la Charte de l’Energie (TCE) ne permet plus aux nations de fonctionner de manière aussi simple. Les hébergeurs français, même de bonne volonté écologique, ne peuvent pas savoir si les électrons qui font fonctionner leurs serveurs sont français ou non. Certains le sont, puis à un autre moment de la journée, l’électricité est peut-être issue d’un pays moins scrupuleux et produisant de l’électricité au charbon.

Pour héberger votre site web écolo, il faut donc choisir un hébergeur web responsable :

1. Situé dans une nation avec une très forte part non carbonée dans son mix énergétique.
2. Qui compense ses émissions réelles ou éventuelles par d’autres moyens.
3. Transparent sur son engagement et les limites qu’il rencontre.
4. Idéalement à l’écoute des problématiques sociétales et environnementales.

Nous pouvons en indiquer quelques-uns :

• Infomaniak, un hébergeur web écologique et éthique situé en Suisse.
• O2Switch, un hébergeur français utilisant à hauteur de 94% une énergie décarbonée.
• Digital Forest, un autre hébergeur français pour les projets plus exigeants.

Sans hébergeur engagé pour l’environnement, votre site ne pourra pas être écolo et votre démarche sera anéantie avant même d’avoir commencé, aussi prenez bien le temps de réfléchir à ce point.

SITE STATIQUE OU CMS ?

Environ 28,7% des sites, tout confondu, sont statiques et le reste est géré par des CMS (Content Management Systems). Parmi les CMS, 60,6% des sites sont propulsés par WordPress.

Y a-t-il des retombées écologiques sur ce choix ? La réponse est là aussi mouvante.

En effet, un site statique bien développé avec amour et respect de son prochain par un artisan du web qualifié n’engagera que le strict minimum de transferts de données. Cependant tous les sites statiques ne sont ni bien faits ni minimalistes. D’autre part, ils ne sont pas nécessairement mis à jour régulièrement et ne tirent donc pas profit des avancées techniques qui permettent plus de sobriété.

Les CMS sont une solution imparfaite qui doit impérativement être polie et raffinée afin de ne transférer que les données nécessaires.

Si vous souhaitez profiter d’un juste milieu optez pour un CMS activement soutenu et sans cesse amélioré. Choisissez aussi un artisan du web responsable dans l’optique de créer un site internet éco-responsable en enlevant tout le superflu et en respectant un panel de bonnes pratiques.

Par exemple, un site WordPress bien développé peut nécessiter moins de 200kB de données transférées par page (hors cache).

On évite absolument et de toute urgence les pages builders comme Elementor ou WP Bakery et les plugins. Un développeur doit savoir travailler sans page builder et avec le moins de plugins possible.

COMMENT GÉRER LES PHOTOS, VIDÉOS ET AUTRES MÉDIAS POUR SON SITE WEB ÉCOLO

Tout site, qu’il soit statique ou CMS, offre du contenu. Ce contenu est généralement de type :

• Texte.
• Image.
• Vidéo.
• Audio.
• Animations.
• Fichier (PDF par exemple).

Une part significative des efforts pour réaliser un site éco-conçu sont regroupés ici. Voyons le détail.

1. Le texte : pas beaucoup de marge ici non ? Détrompez-vous. Le texte en lui-même ne pèse presque rien, mais les fontes qui sont utilisées pour l’afficher peuvent alourdir considérablement un site. Les fontes que le site utilise sont soit déjà présentes dans l’appareil, soit ne le sont pas. Si elles ne le sont pas, le navigateur les télécharge. Alors oui, on ne parle là que de quelques dizaines de kB, mais qu’il faut multiplier par le nombre de sites et le nombre de visiteurs. La bonne pratique est d’utiliser le moins de fontes custom possible et le cas échéant d’utiliser des fontes Google chargées localement au format WOFF ou WOFF2 (puis de cette manière on respecte mieux le RGPD).
2. Les images : un gros morceau pour l’optimisation de votre site éco-responsable. En premier il faut utiliser un format moderne et économe, idéalement WebP, mais le PNG peut aussi convenir. Le format AVIF est le plus performant, mais pas encore supporté par tous les navigateurs. En outre, pour vos icônes, utilisez des glyphes et des icônes en CSS et pour des images plus simples, les vecteurs sont parfaits, comme ceux au format SVG. Ensuite il faut travailler les images en amont pour qu’elles aient une taille raisonnable, une favicon de 4000px x 4000px n’a aucun sens, et qu’elles soient suffisamment compressées par le logiciel de traitement d’image. Toutes les images (il n’y a pas de petite économie) devraient être servies par lazy-loading.
3. Vidéo : un site éco-conçu ne se repose pas sur des artifices vidéos pour mettre son message en valeur. Il est bien plus intéressant et intelligent d’avoir un design innovant et percutant que de charger une vidéo. Mais il arrive parfois que la vidéo soit inévitable. Comme pour les images on doit bien compresser les vidéos, les raccourcir le plus possible et ne pas les lire automatiquement. En outre, on peut servir une vidéo depuis YouTube et profiter du CDN de YouTube, plus rapide et au carbone sans doute mieux compensé.
4. L’audio : qui en 2025 intègre de l’audio à son site ? 2005 c’était il y a 20 ans ! Pour l’audio on suit généralement les mêmes recommandations que pour la vidéo, si c’est vraiment indispensable.
5. Les animations : les animations sont souvent un cache-misère destiné à pallier le manque d’originalité du designer. Pour un site éco-responsable, on utilise très peu d’animation JS (avec un code minifié) que l’on réserve à des points stratégiques, par exemple mettre en valeur un CTA (il faut bien vivre). Surtout, on privilégie les animations en CSS ou SCSS lorsque cela est possible et on se creuse la cervelle pour trouver des atouts visuels et design qui ne sont pas animés.
6. Les fichiers : là encore, les mêmes pratiques, compresser, vérifier le format des fichiers et aller à l’essentiel. Les fichiers PDF peuvent par exemple souvent être exportés d’un logiciel soit pour le print (très gros) soit pour le web (beaucoup plus petits).

LE CODE, UN ÉLÉMENT QUI A SON POIDS

Un site accessible pour moins de 500kB ? Oui c’est possible, et sans aller dans l’extrême du monochrome pur texte.

Le code, qu’il soit CSS, JS ou autre doit être le plus petit, le plus minimaliste et le plus économe possible.

Si vous envisagez un page builder ou un thème populaire (pour WordPress) par exemple, le code sera boudiné et gonflé par des centaines (des milliers?) de lignes inutiles pour vous.

C’est pour cette raison que s’adresser à un spécialiste de création de sites internet écoresponsables est vital : le code qui habillera votre site sera taillé sur mesure ou presque.

De plus, certains fichiers pourront être minifiés et réduiront ainsi le volume de données transférées.

Toujours sur CMS, les plugins sont à éviter. On ne peut pas toujours éviter tout plugin, mais on peut faire des choix intelligents et choisir des éléments reconnus pour leur légèreté et leur vitesse.

D’ailleurs, si vous ne devez conserver qu’un seul plugin, ce sera sans doute celui qui permettra la mise en cache de votre site. Si votre site ne propose pas de contenu frais à haute fréquence, par exemple, le site d’un freelance, un plugin de cache avec une longue durée de vie des fichiers est à privilégier.

ENGAGER UN SPÉCIALISTE DE LA CRÉATION DE SITES INTERNET ÉCO-RESPONSABLES 

Que vous souhaitiez transformer votre site énergivore en quelque chose de plus écolo, ou placer votre future aventure web sous le signe du respect de l’environnement, l’idéal est de vous adresser à un pro.

Tous les développeurs et designers web ne sont pas toujours à l’écoute de l’environnement et ne prennent pas nécessairement des décisions éco-responsables.

Il existe toutefois des spécialistes qui peuvent intervenir sur ce genre de mission et qui peuvent offrir de précieux conseils. Par exemple, saviez-vous qu’un site à la palette sombre est plus écologique ? Et oui, l’affichage d’un pixel sombre utilise moins d’énergie qu’un pixel clair. C’est un grain de sable, mais ne forment-ils pas des plages belles et interminables ?

N’hésitez pas à demander conseil si vous êtes client ou à proposer des alternatives sobres si vous êtes un professionnel, il s‘agit souvent d’un challenge intéressant et qui porte des fruits inattendus.

Et un site monochrome 100% texte ?

Peut-on aller trop loin dans la démarche d’éco-conception web ? Dans l’absolu non, mais selon les buts du site et de son propriétaire, oui.

On entend de plus en parler de sites monochromes avec uniquement du texte. Ils sont en effet très légers et très écolos. Mais ils ne conviennent pas à tout le monde ni à toutes les activités. Vous verriez le site portfolio d’un photographe sans aucune image ?

Dire à un client “monochrome sinon rien” aboutit généralement à rien et le client peut laisser tomber son initiative éco-responsable pour aller à la simplicité. Dans ce cas tout le monde est perdant et rien n’avance. Vous ou votre client voulez absolument un site avec une vidéo, parce qu’il s’agit de montrer la bande-annonce super bien faite d’un évènement qui va avoir lieu dans quelques semaines ?

La voie du milieu est la plus sage : intégrer la vidéo le plus sobrement possible jusqu’à l’évènement et une fois le buzz passé, le site peut retrouver une bannière plus classique et bien plus sobre. Éco-concevoir un site c’est avant tout trouver un juste équilibre pour contenter, faire passer un message et montrer qu’autre chose est possible.

5 exemples de sites web écolo qui jouent la carte de la sobriété

Affirmer qu’un site est écolo c’est bien, le montrer, c’est mieux. Il existe des outils pour évaluer le niveau d’éco-conception d’un site). Certains demandent un peu de réflexion, tandis que d’autres offrent un résumé graphique plus simple à prendre en main.

Pour vous montrer nos 5 exemples, nous utiliserons comme métriques :

1. Chromium (données transférées).
2. Lighthouse (données qui peuvent fluctuer).
3. URL Scanner de CloudFlare.
4. EcoIndex.
5. Kastor.green.
6. EcoGrader.

Pour obtenir des chiffres réels et précis il faudrait évaluer chaque page du site et faire une moyenne pondérée selon la popularité (en visites) de chaque page. Nous n’en avons ni le temps ni la possibilité technique, aussi nous prendrons la page d’accueil de ces sites comme sujet d’analyse à un instant T. L’essentiel étant de conserver une logique de comparaison, on ne compare une page d’accueil avec une page type article ou une catégorie de produit.

1. LA VILLE DE GRENOBLE

La ville de Grenoble, connue pour ses aspirations écolos a récemment refondu son site, afin justement de réduire son empreinte carbone numérique.

Le résultat est impressionnant et on ne peut que féliciter (plusieurs fois) Jérôme Steffenino, Chef de Projet Internet pour le travail effectué. Le site a non seulement vu son empreinte carbone par page visitée considérablement réduite, mais a été minutieusement aligné sur le RGAA (Référentiel général d’Amélioration de l’Accessibilité).

Grenoble.fr est la preuve parfaite que l’on peut éco-concevoir un “gros” site avec de très nombreuses fonctionnalités utilisateur.

1. Chromium : 440kB transférés (7,8kB avec cache).
2. Lighthouse : 97 (97, 100, 96, 100).
3. URL Scanner : 612kB.
4. EcoIndex : C.
5. Kastor.green : 83 (76, 100).
6. EcoGrader : 63 (91, 91, 0).
7. Hébergeur : Métropole de Grenoble

2. BBCORP

Non seulement le site de Benoît Barnéoud est une pépite graphique, mais en plus il est éco-responsable et reflète la démarche écolo de son créateur. Peu ou pas d’image, mais plutôt d’excellentes idées graphiques tirant parti de techniques de filou. Un régal à visiter et un régal à décortiquer pour qui aime l’éco-conception.

1. Chromium : 400kB transférés (3,6kB avec cache).
2. Lighthouse : 86 (86, 100, 96, 100).
3. URL Scanner : 388kB.
4. EcoIndex : A.
5. Kastor.green : 92 (88, 100).
6. EcoGrader : 84 (63, 98, 100).
7. Hébergeur : Cloudflare
8. Type : CMS (Webflow).

3. LOW-TECH LAB

Le Low-tech Lab, qui ferait plaisir à Philippe Bihouix, est une initiative destinée à promouvoir les solutions low-tech. Il s’agit d’un projet open source qui est, fort logiquement, supporté par un site éco-responsable, minimaliste et sobre. Peu d’images, des jeux de fontes et de typographie bien placés, le tout pour une identité graphique très prononcée et sobre à la fois. 

1. Chromium : 138kB transférés (12,7kB avec cache).
2. Lighthouse : 99 (99, 88, 100, 100).
3. URL Scanner : 155kB.
4. EcoIndex : B.
5. Kastor.green : 90 (87, 100)
6. EcoGrader : 98 (100, 93, 100).
7. Hébergeur : Infomaniak.
8. Type : CMS (Kirby).

4. RÉDIGÉO

Rédigéo est un artisan du web indépendant qui a aligné son site sur ses convictions. Le seul site WordPress de cette liste et la preuve que même WordPress peut être léger et écolo sans pour autant faire appel à un développeur full-stack.

1. Chromium : 163kB transférés (16,8kB avec cache).
2. Lighthouse : 99 (99, 98, 100, 100).
3. URL Scanner : 177kB.
4. EcoIndex : A.
5. Kastor.green : 94 (92, 100).
6. EcoGrader : 98 (100, 99, 100).
7. Hébergeur : Infomaniak.
8. Type : CMS (WordPress).

5. NAT-ALI

Nat-ali est une boutique en ligne destinée aux produits bio et éco-responsables. Le site aurait pu être une usine à gaz Shopify, mais non, ses créateurs ont décidé d’en faire également un site éco-conçu. Simplicité visuelle, mais efficacité et performances, sans pour autan sacrifier au visuel qui est indissociable d’un site boutique. Ici l’écologie reste discrète et se met simplement au service du site.

1. Chromium : 331kB transférés (5,5kB avec cache).
2. Lighthouse : 94 (94, 89, 100, 92)
3. URL Scanner : 320kB.
4. EcoIndex : A.
5. Kastor.green : 84 (81, 91).
6. EcoGrader : 95 (99, 91, 100).
7. Hébergeur : Infomaniak.
8. Type : CMS (Translucide).

FAQ