Contact
Portfolio de sites éco-conçus, (et avec une bonne note EcoIndex !). Mis à jour en janvier 2025.
Un site très visuel pour un métier très visuel : un exemple d'un site éco-conçu avec un beau design avec un score EcoIndex qui témoigne d'une optimisation poussée : une moyenne des pages de A, et une Déclaration Environnementale de B. Une gageur pour un site d'agence.
Hy24 investit dans l’ensemble de l’économie de l’hydrogène et a éco-conçu son site, sans que cela ne pèse sur le design. Une note EcoIndex de B, une preuve qu'on peut faire un site éco-conçu et beau.
Le site corporate du Groupe Figaro est éco-conçu et applique les principes de sobriété éditoriale. Avec une UX simple et claire, il ne se prive pas de l'utilisation d'images qui sont optimisées au pixel selon le device de l'utilisateur.
Le site de l’association OETH combine accessibilité et éco-conception. Avec un EcoIndex de B et une rapidité de chargement de 92/100 sur mobile, c'est un site ultra-léger et fluide, avec beaucoup de contenu. Son design est travaillé pour être conforme aux normes d'accessibilités.
Le site B to B de la fameuse association Surfrider, tout éco-conçu et ultra-léger. La part belle est faite aux images, éléments visuels et typographiques. Un exemple d'éco-conception web appliquée à l'inbound marketing, en deux langues. Son score Pagespeed de 87/100 sur mobile sert ses forts enjeux marketing.
Le site de Nectar, un programme d'oléoculture responsable, avec une identité visuelle affirmée, met en avant des photos de qualité. Et pourtant, son score EcoIndex est de B ! Comme quoi on peut faire du beau version responsable en web.
Un site corpo tout éco-conçu, parmi les pionniers en écoconception web. Son design élégant reste sophitiqué malgré la sobriété de son impact.
Le site d'un builder de sites statiques Open Source et Logiciel Libre, et logiquement éco-conçu. Rapide à charger, efficace dans son UX, il affiche un score Pagespeed de 93/100 sur mobile.
Ou : comment évaluer l’impact environnemental d’un site internet ? Le plus simple pour vérifier le caractère éco-conçu d'un site internet est de le tester avec les calculettes ecoIndex.fr, et websitecarbon.com.
Ces deux scores ont l'avantage de donner, en quelques secondes, une idée de l'impact environnemental d'un site web, et de délivrer des premiers leviers d'action pour réduire cet impact.
Pour savoir ce que mesure exactement Website Carbon, lire notre article
L'éco-conception web, ou écoconception web, est une méthode qui consiste à intégrer les pratiques écologiques dès la conception et le développement d'un site internet, et à toutes les étapes de son cycle de vie. Pour créer un site web éco-responsable, les bonnes pratiques de développement durable numérique sont à respecter, telles que la réduction du flux de données, la performance, et surtout l’adéquation de moyens. Ces pratiques, ainsi que beaucoup d’autres, toutes répertoriées par l’ADEME et le collectif Green IT, permettent de réduire la pollution et l'empreinte carbone d’un site internet.
En adoptant une approche d'éco-conception web, on peut concevoir un site web en limitant sa consommation d'électricité, et donc son impact sur l'environnement, ainsi qu'en retardant l'obsolescence des matériels. Enfin, qui dit site internet éco-responsable et respect des principes du Green IT, dit aussi choix d’un hébergement éco-responsable, utilisant 100% d'énergies renouvelables.
Des études (notamment une étude de la Purdue University) montrent que l'utilisation de thèmes sombres ou "dark mode" sur des écrans OLED ou AMOLED peut réduire la consommation d'énergie de ces appareils. Ces types d'écrans utilisent des diodes organiques qui s'éteignent lorsqu'elles affichent des couleurs noires ou sombres, ce qui réduit la consommation d'énergie par rapport aux écrans LCD traditionnels, qui eux utilisent un rétroéclairage pour afficher des couleurs noires ou sombres.
Les études sur des écrans LCD donnent cependant des résultats différents. L'utilisation du dark mode peut donc contribuer à réduire l'empreinte carbone d'un tel appareil, mais cela dépend d’une combinaison de différents facteurs. Les paramètres de luminosité et de contraste, par exemple : si l'écran est réglé sur un niveau de luminosité élevé, l'utilisation du dark mode ne va pas entraîner une réduction significative de la consommation d'énergie. D’ailleurs, une majorité d’ordinateurs portables, de téléviseurs, d’écrans d'ordinateur, de smartphones et de tablettes utilisent des écrans LCD. Les écrans OLED et AMOLED sont surtout utilisés dans les smartphones haut de gamme.
Le dark mode peut donc être envisagé dans le cadre de l'éco-conception d'un site internet pour réduire son empreinte carbone, mais il ne doit pas être considéré comme un élément primordial. Il existe bien d'autres leviers et bonnes pratiques plus efficaces : la performance du site, l'optimisation des images et des ressources, l'utilisation de technologies écologiques et éco-responsables, la réduction des requêtes et des scripts côté serveur, ou encore la réduction du flux d’informations, donc de la bande passante.
En savoir plus sur les bonnes pratiques de l'éco-conception web
Pour améliorer le score EcoIndex d'un site internet, il faut tout d'abord réduire le nombre d’éléments dans le DOM, puis réduire le nombre de requêtes HTTP, et enfin réduire le poids de la page.
Retrouvez comment agir sur ces trois critères dans cet articles détaillé.
La techno statique en Headless est particulièrement recommandée en éco-conception, car elle a l'avantage d'être ultra-légère et rapide. Les pages statiques peuvent être couplées à un back-office pour éditer facilement leur contenu, via une technologie comme 11ty. L'ensemble, nommé Headless, JAMStack ou Architecture Composable, présente les avantages de la performance et du confort d'utilisation.
Les équipes de SCORE DDB nous ont choisis pour exécuter leur refonte et, au passage, réduire les émissions de CO2 causées par l'utilisation de leur site. Objectif : un site ultra-propre et très visuel. Le site vitrine d’une agence de publicité, cela relève du défi technique : qui dit publicité, dit beaucoup de visuels et de vidéos. Voici comment nous avons fait, et les résultats que nous avons obtenus.
Avant refonte, le site scoreddb.fr, vieux de quelques années, affichait ces scores :
- 1,60gr de CO2 produit à chaque visite, selon websitecarbon.com. Le site était plus polluant que 86% des pages testées.
- Score ecoIndex : F (moyenne des pages du site). Pages trop lourdes, trop complexes, trop de requêtes (237).
- Score Google PageSpeed Insights : 18% en mobile, site très lent et lourd.
- Le site bénéficiait déjà d’un hébergement éco-responsable.
Ces scores sont classiques pour un site pas tout récent, avec beaucoup de contenu, d’images et de vidéos. La refonte a donc été l’occasion d’améliorer tout ça.
SCORE DDB avait une vraie volonté de pousser loin les curseurs d’éco-conception digitale :
« En temps qu’agence de communication, il nous paraissait impossible de nous priver de couleurs, visuels ou vidéo pour ce nouveau site ou incohérent de mettre en place des artifices comme un switch « mode basse consommation ». L’expérience sur le site devait rester la plus efficace possible tout en obtenant les meilleurs scores de performance environnementale et en réduisant son empreinte carbone. »
Gautier Linard, qui a piloté le projet chez SCORE DDB.
Contact
Recevez notre newsletter
Ce site n'utilise pas de cookies, naviguez en toute quiétude !!
J'ai compris
