Le thème eco-conçu permet de réduire son empreinte carbone lors de la création d’un site. Il y a de nombreuses façons d’aborder l’éco-conception selon le type de site souhaité et la solution technique retenue pour la création de ce dernier.
Découvrez aussi notre article sur ce que c’est un hébergement web écologique, un hébergement vert durable et performant.
Pour aller plus loin, découvrez les 19 étapes essentielles pour créer un site internet écoresponsable et structurer votre projet dès les premières décisions, du design jusqu’à la maintenance.
Qu’est-ce que l’empreinte carbone d’un site web ?
L’empreinte carbone d’un site web correspond à la quantité de gaz à effet de serre (CO₂ et équivalents) émise tout au long de son cycle de vie numérique.
Le fonctionnement d’un site nécessite de l’électricité pour alimenter les serveurs qui l’hébergent. Plus le trafic est élevé, plus le volume de données traitées augmente, et donc plus la consommation d’énergie, et les émissions de CO₂ associées, s’intensifient.
En France, une étude de l’ARCEP menée en 2020 a estimé que le secteur du numérique générait à lui uniquement 16.9millions de tonnes de CO₂.
Face à cet défi, l’empreinte carbone des sites web devient un sujet important avec une attention particulièrement croissante portée à l’éco-conception numérique.
Comment calculer l’empreinte carbone d’un site internet ?
Les éléments pris en compte dans le calcul de l’empreinte carbone
L’empreinte carbone d’un site internet se calcule à partir de plusieurs facteurs :
- Poids de la page web (taille des fichiers HTML, CSS, JavaScript, images, vidéos).
- Nombre de pages vues (trafic mensuel ou annuel).
- Énergie consommée par les serveurs (hébergement et PUE).
Calcul de l’empreinte carbone d’un site web par des outils en ligne.
EcoDesign.dev
Mis en place par notre agence web éco-responsable Ethiko, EcoDesign.dev évalue l’impact environnemental d’une page web (empreinte carbone, performance écologique, etc.)
Exemples d’indicateurs donnés : :
- note EcoIndex (de A à G), selon les critères du collectif GreenIT
- nombre de requêtes HTTP, taille de la page en Ko, taille du DOM
- émission de CO₂ par page vue
EcoIndex
Calcul de l’empreinte carbone d’un site web à partir d’un plugin.
Il est également possible d’intégrer directement un plugin sur votre CMS comme WordPress.
Website Carbon Calculator (WP)
Le Website Carbon Calculator (WP) est un plugin WordPress gratuit développé par la Green Web Foundation qui s’intègre dans le tableau de bord.
Exemples d’indicateurs donnés :
- gCO₂e / page vue en grammes de CO₂
- énergie consommée en kWh
- classement visuel avec un badge avec un code couleur (vert, orange, rouge) indiquant la performance environnementale.
Le thème éco-conçu pour réduire l’empreinte carbone d’un site web
Quand il s’agit de concevoir un nouveau site, une des premières décisions est celle du thème à choisir. Les critères de sélection habituels passent par l’aspect visuel et la flexibilité.
Bien que importants, nous postulons qu’ils doivent être secondaires face à la légèreté du thème.
Un thème éco-conçu est un atout indéniable. C’est un template au code minimal qui se charge uniquement à la demande.
Il va en même temps diminuer le poids des pages et le nombre de requêtes et assurer l’accessibilité, le SEO et la durabilité.
On obtient un transfert avec peu de données qui consomme peu d’énergie.
Ainsi, automatiquement, il y aura une limite de l’émission de CO₂ par visite.
Les principes clés à respecter en thème éco-conçu
- Légèreté du code : CSS/JS fractionnés (code-splitting), enlevé les frameworks lourds inutiles, suppression du JS “ornemental”.
- Chargement conditionnel : ne charger un script ou un style que si le composant est présent (lazy-load, defer ou async).
- Médias optimisés : images WebP/AVIF, srcset/sizes, lazy-loading, vidéos compressées ou streaming.
- Typographies : 1–2 familles maximum, formats WOFF2, font-display: swap, variantes limitées.
- Design systémique : composants réutilisables, grilles simples, pas d’effets gourmands (parallaxe, lourdes ombres ou flous).
- Accessibilité (WCAG) : structure sémantique, contraste, navigation clavier .
- SEO technique : HTML propre, balises méta, sitemap pour diminuer les allers-retours robots/serveur.
Curieux d’en savoir plus ? Parcourez notre article sur l’éco-conception web et nos 5 conseils pour des sites à la fois performants et écoresponsables.
Les thèmes WordPress dans l’éco-conception
Une opinion populaire pense que WordPress est une plateforme lourde. En réalité, ce CMS évolue dynamiquement.
Un thème WordPress fournit une série d’éléments fondamentaux au site. Ces éléments sont présents sur toutes les pages. Les efforts d’optimisation sur le thème aboutiront à des résultats sur l’ensemble du site.
Contrairement aux thèmes standards surchargés de scripts et de fonctionnalités non nécessaires, un thème éco-friendly privilégie la légèreté numérique.
Le site a une vitesse de chargement plus rapide et ne dépense pas beaucoup de bandes passantes. Cela améliore à la fois l’accessibilité et le référencement naturel (SEO).
|
Critère |
Thème classique WordPress |
Thème éco-conçu WordPress |
|
Code |
Surchargé de scripts, plugins intégrés non utilisés |
Minimaliste, optimisé, épuré |
|
Poids des pages |
Souvent > 2 Mo |
Souvent < 1 Mo |
|
Requêtes serveur |
Multiples (JS, CSS, pubs, animations) |
Réduites au strict nécessaire |
|
Performance |
Variable, souvent lente |
Rapide et stable |
|
Accessibilité |
Pas toujours prioritaire |
Intégrée dès la conception |
|
Impact carbone |
Plus élevé (gCO₂/page) |
Réduit (sobriété numérique) |
Les étapes de bases faciles pour établir un site éco-conçu.
Pour faciliter la mise en place concrète des bonnes pratiques évoquées, nous avons mis en place une liste d’étapes pour un site web durable. Consultez notre article pour savoir davantage sur ces 19 étapes faciles dans la création de site éco conçu
Voici un aperçu de ces étapes :
|
Étape |
Objectif |
|
1. Évaluer l’impact environnemental |
Connaître l’empreinte réelle de votre site pour agir efficacement |
|
2. Optimiser les images dès la conception |
Réduire le poids des pages dès la phase de design |
|
3. Choisir un hébergement web vert |
Limiter l’impact énergétique via un hébergeur engagé |
|
4. Opter pour un design éco-responsable |
Alléger les interfaces sans sacrifier l’esthétique ni l’UX |
|
5. Supprimer les plugins et widgets inutilisés |
Alléger le site pour de meilleures performances |
|
6. Utiliser un CDN |
Rapprocher les données de l’utilisateur et optimiser le chargement |
|
7. Mettre en place un cache objet |
Réduire la charge sur la base de données et accélérer les traitements |
|
8. Nettoyer la base de données |
Éviter la surcharge de données inutiles pour plus de fluidité |
|
9. Limiter les requêtes HTTP |
Réduire les allers-retours serveur et la consommation énergétique |
|
10. Activer le Lazy Loading |
Charger les médias uniquement quand ils sont visibles |
|
11. Limiter le recours à Canva |
Éviter des visuels trop lourds et mal optimisés |
|
12. Réduire les animations |
Limiter les calculs inutiles et alléger les ressources processeur |
|
13. Optimiser la taille des cookies |
Réduire les données échangées à chaque requête |
|
14. Optimiser le code HTML, CSS, JS |
Alléger le code pour améliorer les temps de chargement |
|
15. Repérer et corriger les warnings |
Éliminer les mauvaises pratiques qui nuisent aux performances |
|
16. Éviter les redirections inutiles |
Réduire la latence et la charge réseau |
|
17. Sensibiliser les équipes et les utilisateurs |
Former et impliquer tous les acteurs du projet dans la démarche |
|
18. Suivre les indicateurs de performance écologique |
Mesurer, analyser et progresser continuellement |
|
19. Intégrer une approche centrée utilisateur |
Faciliter les parcours utilisateurs tout en réduisant l’empreinte écologique |
Comment intégrer l’inclusion dès la conception ? Lisez notre article : « Le design inclusif, un enjeu pour les designers ?
