Impact environnemental du site Maxadev
3 min • 27/08/2025
Ce que nous mesurons, ce que nous améliorons, et comment nous le faisons pour réduire la consommation d’énergie liée à la consultation du site.
En bref
- Note EcoIndex A – 83/100, 0,238 Mo, 23 requêtes, 241 éléments DOM.
- Mieux que ~91% des pages testées (classement 45 582 / 515 179).
- Empreinte estimée pour 1 000 visites : ~1,34 kg CO₂e et ~20,1 L d’eau bleue.
- Objectifs cibles : < 250 KB au premier chargement, < 40 requêtes, DOM < 800 éléments.
Pourquoi mesurer ?
Chaque page vue consomme de l’énergie : calcul serveur, transfert réseau et rendu dans le navigateur. En réduisant le poids et les requêtes, on limite la consommation électrique et on prolonge la durée de vie des équipements (moins de pression au changement de matériel).
L’éco-conception améliore aussi l’accessibilité (expérience sur connexions lentes) et le référencement via de meilleurs Core Web Vitals.
Indicateurs & outils
- Lighthouse / Core Web Vitals : performance, interactivité, stabilité visuelle.
- EcoIndex (ecoindex.fr) : note A→G basée sur DOM, poids transféré et nombre de requêtes.
- Analyse réseau (DevTools, WebPageTest) : compression, cache, TTFB.
- Bundle Analyzer : détection des dépendances lourdes.
- Estimateurs carbone : ordre de grandeur des émissions par page (indicatif).
Mesures (EcoIndex)
Note
A
83 / 100
Poids
0,238 Mo
cible ≤ 1,024 Mo
DOM
241
cible ≤ 600
Requêtes
23
cible ≤ 40
- Poids de la page
- 0,238 Mo | médiane : 2,41 Mo | cible : 1,024 Mo
- Complexité (DOM)
- 241 | médiane : 693 | cible : 600
- Requêtes serveur
- 23 | médiane : 78 | cible : 40
Empreinte pour 1 000 visites
- Émissions : ~1,34 kg CO₂e
- Consommation d’eau bleue : ~20,1 L
À titre d’ordre de grandeur : ~1 kg CO₂e ≈ un trajet d’environ 5 km en voiture. Une douche consomme ~6 L/min.
Classement : 45 582 / 515 179 (≈ top 9 % meilleur, soit ~91 % de pages moins performantes).
Actions sur ce site
- Next.js (App Router) : rendu statique ou SSR selon le besoin pour minimiser le coût par page.
- Tailwind JIT sans framework UI lourd : seuls les utilitaires utilisés sont livrés.
- Images optimisées : formats modernes (WebP/AVIF) et SVG, dimensions au plus juste.
- Polices hébergées localement, pas de render-blocking inutile.
- Aucun tracker marketing : pas de cookies superflus.
- Minification & tree-shaking ; pas de polyfills non nécessaires.
- JS réduit : composants client uniquement quand c’est indispensable.
- Compression HTTP + cache CDN : meilleure réutilisation inter-pages.
- Hébergement maîtrisé : Serveur optimisé et machine virtuelle, inférieure à 5W.
EcoIndex, en 30 secondes
EcoIndex combine trois signaux : taille du DOM, poids transféré et nombre de requêtes. Après normalisation, on obtient une note (A à G) et une estimation d’impact (énergie + CO₂).
Nos budgets cibles sur les pages essentielles : < 250 KB au premier chargement (hors cache), < 40 requêtes, < 800 éléments DOM.
Bonnes pratiques
- Limiter les dépendances et préférer des utilitaires ciblés.
- Soustraire les glyphes non utilisés des polices (font-subsetting).
- Reporter le JS non critique (dynamic import, lazy loading).
- Optimiser les images (format compressé, optimisé pour le web).
- Définir un performance budget en CI (Lighthouse/EcoIndex) et le faire respecter.
- Éviter les animations coûteuses (layout thrashing, reflows répétés).
- Auditer régulièrement le bundle (taille, sécurité) et supprimer le code mort.
Limites & transparence
Les estimations de CO₂ restent approximatives : un score isolé ne reflète pas l’empreinte globale (hébergement, trafic, matériel). L’objectif est d’orienter les décisions, pas de faire du greenwashing.