Éco-conception web : le numérique doit-il vraiment polluer autant ?
Le numérique représente aujourd'hui 4 % des émissions mondiales de CO2, soit davantage que l'aviation civile. Un site web ordinaire émet en moyenne 1,76g de CO2 par page vue. Un site mal optimisé peut émettre 10 fois plus. Face à ce constat, l'éco-conception web s'impose comme une pratique incontournable, pas seulement pour l'environnement mais aussi pour les performances et le SEO.
Reste à savoir comment le prouver. Green Code Label, label NR, EcoIndex, RGESN : entre labels d'éco-conception de site web, référentiels et scores, les noms se multiplient, ne désignent pas la même chose et ne coûtent pas le même prix. Choisir le mauvais, c'est payer une certification qui ne sert pas votre objectif.
Dans cet article, vous allez découvrir :
- •Les 5 labels et référentiels d'éco-conception web comparés dans un seul tableau, et lequel choisir selon votre situation
- •La différence entre un label, un référentiel et un score, pour ne pas payer une certification inutile
- •Comment mesurer l'empreinte carbone de votre site en 5 minutes avec des outils gratuits
- •Les 10 bonnes pratiques d'un site éco-conçu, qui améliorent aussi votre référencement
- •Pourquoi un site sobre est aussi un site rapide : l'exemple Sudparebrise, score Lighthouse de 100
2 secondes de chargement supplémentaires augmentent le taux de rebond de 32 %. Un site lent est mauvais pour la planète ET pour votre business.
Qu'est-ce que l'éco-conception web ?
L'éco-conception web (ou green web design) est une approche qui vise à réduire l'impact environnemental d'un site internet tout au long de son cycle de vie : conception, développement, hébergement et utilisation.
Un site éco-conçu consomme moins d'énergie car :
L'éco-conception n'est pas une contrainte. C'est une discipline qui pousse à la qualité : code propre, assets optimisés, architecture pensée. Les sites les plus performants au monde sont aussi les plus sobres.
Labels éco-conception site web : les 5 à connaître (et ce qu'ils valent vraiment)
On confond souvent trois choses : un label (une certification délivrée après audit), un référentiel (une liste de bonnes pratiques à appliquer, sans certification) et un score (une mesure automatique). Voici les cinq noms qui reviennent dans toutes les discussions sur l'éco-conception d'un site web.
| Nom | Nature | Porté par | Ce qu'il évalue | Pour qui |
|---|---|---|---|---|
| Green Code Label | Label (audit) | Green Code Lab (Nantes) | Sobriété du code, des médias et de l'hébergement d'un site ou d'une application, par niveaux | Sites vitrines et applications qui veulent une preuve externe |
| Label Numérique Responsable (NR) | Label (audit) | Institut du Numérique Responsable (INR) | La démarche numérique responsable de toute l'organisation, pas seulement le site | Entreprises engagées dans une politique RSE globale |
| EcoIndex | Score A à G | Collectif GreenIT | Poids de la page, nombre de requêtes et complexité du DOM | Tout le monde : gratuit, immédiat, idéal pour mesurer avant et après |
| Green Web Foundation | Vérification | The Green Web Foundation | Si votre hébergeur fonctionne avec des énergies renouvelables | Vérifier son hébergement en 10 secondes |
| RGESN | Référentiel officiel | État français (Arcep, Arcom, DINUM) | 78 critères couvrant stratégie, UX, contenus, front, back, hébergement | Services publics et toute organisation qui veut une méthode structurée |
Le Green Code Label en détail
Le Green Code Label est une certification française portée par le Green Code Lab, une association nantaise, qui évalue la sobriété d'un site ou d'une application web après audit par un auditeur habilité. À ne pas confondre avec les 115 bonnes pratiques d'éco-conception web du collectif GreenIT, qui sont un référentiel librement consultable et non un label. L'audit porte notamment sur :
- •L'architecture et le code
- •La performance et le chargement
- •La gestion des médias (images, vidéos)
- •L'hébergement
- •Le design UX
Le label se décline en plusieurs niveaux selon le degré de sobriété atteint. L'obtenir présente plusieurs avantages :
Comment mesurer l'empreinte de votre site en 5 minutes
Pas besoin d'auditeur pour savoir où vous en êtes. Trois mesures gratuites suffisent pour un premier diagnostic :
- 1.EcoIndex (ecoindex.fr) : collez l'URL d'une page, vous obtenez une note de A à G basée sur le poids, le nombre de requêtes et la taille du DOM.
- 2.Google Lighthouse (dans Chrome, onglet Lighthouse) : le score Performance mesure exactement les mêmes leviers que l'éco-conception, à savoir le poids des ressources, le JavaScript inutile et le chargement des images.
- 3.Website Carbon Calculator : une estimation du CO2 émis par page vue, utile pour communiquer en interne.
Concrètement, voici ce que donne un site conçu sobrement dès le départ : le site de Sudparebrise, que nous avons refondu en Next.js, atteint un score Lighthouse de 100 et génère plus de 40 appels par mois. Un site rapide et un site sobre, c'est le même site. Voir la réalisation Sudparebrise.
Si votre site existant obtient un EcoIndex D ou pire, le problème est rarement une image trop lourde : c'est en général une accumulation de scripts, de plugins et de code mort, autrement dit de la dette technique. Un audit de code permet de chiffrer ce qu'il faut nettoyer avant de décider entre optimisation et refonte.
Les 10 bonnes pratiques de l'éco-conception web
1. Optimiser les images
Les images représentent en moyenne 50 à 80 % du poids d'une page web. Utilisez le format WebP (30-50 % plus léger que JPEG), compressez systématiquement, et n'affichez jamais une image de 2000px dans un conteneur de 400px.
Chez ONDEV, toutes nos créations utilisent Next.js qui optimise automatiquement les images via son composant <Image>. Pour aller plus loin, notre guide sur la vitesse de chargement et les Core Web Vitals détaille les seuils à atteindre.
2. Minifier et compresser le code
CSS, JavaScript et HTML doivent être minifiés (espaces et commentaires supprimés) et compressés (Gzip ou Brotli). Un fichier CSS de 200kb devient 40kb après minification et compression.
3. Limiter les scripts tiers
Chaque script tiers (analytics, chat, réseaux sociaux, publicité) ajoute du poids et des requêtes. Inventoriez vos scripts et supprimez ceux qui ne sont pas essentiels. Optez pour Vercel Analytics (privacy-first, sans cookie, très léger) plutôt que Google Analytics.
4. Adopter le lazy loading
Chargez les images et vidéos uniquement lorsqu'elles entrent dans le viewport du visiteur. Cette technique seule peut réduire le chargement initial de 60 %. Nous expliquons comment le mettre en place sans dégrader le LCP dans notre article sur le lazy loading des images.
5. Utiliser un hébergement vert
Choisissez un hébergeur qui utilise des énergies renouvelables. Vercel, notre partenaire d'hébergement, s'est engagé sur des objectifs net-zero. Certains hébergeurs comme Infomaniak sont certifiés ISO 14001.
6. Concevoir un design sobre (Less is More)
Moins d'animations, moins de polices web (chaque police = une requête), moins d'effets visuels gourmands en GPU. Un design sobre est souvent plus élégant et toujours plus performant.
7. Optimiser le cache
Configurez correctement les headers de cache HTTP pour que les ressources statiques (images, CSS, JS) soient stockées côté client. L'utilisateur ne re-télécharge pas ce qu'il a déjà.
8. Utiliser un CDN
Un Content Delivery Network distribue votre contenu depuis le serveur le plus proche de l'utilisateur. Cela réduit la distance parcourue par les données, donc la consommation énergétique.
9. Choisir des polices système en priorité
Les polices web nécessitent des téléchargements supplémentaires. Utiliser des polices système (system-ui, -apple-system) quand c'est possible élimine ces requêtes. Pour les projets qui nécessitent une police spécifique, utilisez font-display: swap et limitez les variantes chargées.
10. Mesurer et améliorer en continu
Utilisez des outils comme Website Carbon Calculator, EcoIndex, Google Lighthouse ou Ecograder pour mesurer l'impact de votre site (la méthode en 5 minutes est détaillée plus haut). Fixez-vous des objectifs et suivez la progression.
À lire aussi : Nos services de création de site internet - Des sites Next.js optimisés qui atteignent un score Lighthouse 100% par défaut.
Éco-conception et SEO : deux faces de la même pièce
Un site éco-conçu est presque toujours un site bien référencé. Pourquoi ? Parce que les facteurs d'éco-conception et les Core Web Vitals de Google sont les mêmes :
- •Vitesse de chargement (LCP) : directement liée à l'optimisation des ressources
- •Stabilité visuelle (CLS) : moins d'éléments = moins de déplacement lors du chargement
- •Interactivité (INP) : moins de JavaScript = meilleure réactivité
Un score Lighthouse de 100/100 (que nous atteignons systématiquement chez ONDEV) signifie que le site est à la fois ultra-performant et sobre en ressources.
Éco-conception en entreprise : un argument RSE concret
Pour les entreprises qui ont une politique RSE (Responsabilité Sociale des Entreprises), un site web éco-conçu est un argument concret et mesurable. Vous pouvez communiquer sur :
- •La réduction d'émissions CO2 par rapport à la moyenne du secteur
- •Un label (Green Code Label, label NR) ou l'application du RGESN
- •L'hébergement sur serveurs verts
Dans un contexte où les clients, investisseurs et partenaires accordent de plus en plus d'importance aux engagements environnementaux, c'est un différenciateur réel.
L'éco-conception ne concerne pas que les sites vitrines. Une application métier utilisée toute la journée par des dizaines de personnes pèse bien plus lourd qu'une page d'accueil : chaque requête inutile, chaque écran qui recharge toute la donnée se multiplie par le nombre d'utilisateurs et de jours. Sur l'application métier que nous avons développée pour Dassault Aviation, utilisée par plus de 90 utilisateurs actifs, chaque processus prend environ une heure de moins : autant de temps d'utilisation et de sollicitations en moins. Chez SNEF, l'application de visualisation de schémas électriques fait gagner 1 h 30 tous les deux jours aux équipes.
Si votre outil interne est lent, lourd et coûteux à héberger, une refonte d'application web pensée sobre dès l'architecture est souvent l'investissement RSE le plus rentable de l'entreprise, parce qu'il se mesure aussi en heures gagnées.
Nos sites : des créations performantes et sobres par défaut
Chez ONDEV, nous développons tous nos sites avec Next.js qui intègre nativement les optimisations d'éco-conception :
- •Optimisation automatique des images (WebP, lazy loading, tailles adaptées)
- •Code-splitting automatique (seul le JS nécessaire est chargé)
- •Pre-rendering (les pages sont générées statiquement quand possible)
- •Hébergement sur Vercel (CDN global, serveurs optimisés)
Le résultat : nos sites atteignent systématiquement un score Lighthouse de 95 à 100/100. Sudparebrise, par exemple, atteint 100% sur Lighthouse, la preuve qu'un site sobre peut aussi être un site qui génère des appels.
Consultez notre article sur Next.js et pourquoi c'est le meilleur framework pour votre site pour comprendre les choix techniques qui permettent ces performances.
Un site sobre est souvent un site accessible : les deux démarches se rejoignent dans le RGAA.
Questions fréquentes sur les labels d'éco-conception web
L'éco-conception web est-elle obligatoire ?
Qu'est-ce que le Green Code Label exactement ?
Comment créer un site éco-responsable ?
Qu'est-ce que l'EcoIndex et comment l'améliorer ?
Le RGESN est-il obligatoire pour mon site ?
Combien coûte un label d'éco-conception web ?
Un site éco-conçu est-il forcément moins beau ?
Quelle est la différence entre site éco-conçu et site accessible ?
Votre prochain site web peut être à la fois performant, beau et responsable. Parlons de votre projet et construisons ensemble un site éco-conçu qui cartonne sur Google.
