19 étapes faciles pour mettre en place un site éco-conçu

Découvrez comment mettre en place un site éco-responsable à travers 19 étapes détaillées, illustrées et concrètes.

🌿 Pas le temps de tout lire ? – Voici un résumé rapide des actions à mettre en place

• ⚡ Évaluer l’impact environnemental de votre site
• 🖼️ Optimiser les images et alléger les médias
• 🌱 Choisir un hébergement vert et durable
• 🎨 Miser sur un design sobre, épuré, efficace
• 🧩 Supprimer les plugins inutiles et alléger le code
• 📦 Réduire les requêtes serveur, mettre en cache intelligemment
• 🚀 Limiter les animations et les effets lourds
• 🔐 Optimiser les cookies, éviter les redirections superflues
• 🧑‍🤝‍🧑 Impliquer les équipes, former, sensibiliser
• 🎯 Faciliter les parcours utilisateurs, centrer la démarche sur l’essentiel

➡️ Vous voulez aller plus loin ? Découvrez ci-dessous le détail des 19 étapes avec conseils pratiques et outils concrets. 👇

Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web

Vous voulez testez vos acquis ? Retrouvez en fin de cet article le quizz qui permet de savoir si vous êtes prêts pour un site écoconçu

🎯 Par où commencer ? Avant d’optimiser quoi que ce soit, il faut savoir où vous en êtes. On attaque par le diagnostic !

1. Évaluez l’impact environnemental de votre site : faites un état des lieux

Commencez par l’évaluation de son propre site web, pour connaître les impacts réels de votre site web.

Pour savoir si un site est énergivore, effectuez un test simple et rapide grâce à EcoDesign, un outil en ligne développé par Ethiko, basé sur les 115 critères du référentiel Green IT.

Accessible gratuitement via https://ecodesign.dev, cet outil vous permet de mesurer :

• Le score environnemental global de votre site (de A à G)
• Le nombre de requêtes, la taille de la page (en Ko) et celle du DOM
• Son empreinte environnementale : consommation d’énergie, d’eau, émissions de CO₂, et équivalent en arbres nécessaires à la compensation

Au-delà du diagnostic, Ecodesign vous fournit également :

• Des recommandations concrètes pour améliorer les performances, l’accessibilité, l’expérience utilisateur et le référencement naturel (SEO)
• Une analyse détaillée selon sur les bonnes pratiques de l’écoconception web
• La possibilité de demander un contrôle manuel approfondi par un expert

🖼️ Le premier point d’impact, c’est souvent les images. On commence par l’élément qui pèse le plus sur un site, sans que la plupart des gens ne le réalisent.

2. Optimiser les images dès la conception

Elles constituent souvent plus de 50 % du poids d’une page web.

Selon l’expertise d’Ethiko, en éco conception, il est primordial de limiter leur usage et de les optimiser dès la phase de design UI pour alléger le site, accélérer son chargement et réduire son impact environnemental.

6 bonnes pratiques clés à adopter pour vos images

• Limiter les images décoratives : une photo en fond de 2 Mo peut être remplacé par un simple fond de couleur uni dans une palette minimaliste ou un motif CSS, pour un même rendu visuel, mais avec des centaines de kilo-octets en moins à charger. 

• Utiliser les bons formats : un PNG de 400 Ko converti en WebP ne pèse que 120 Ko, sans perte visible.
  Pour les icônes ou les pictogrammes, le format SVG est idéal : vectoriel, évolutif et ultra-léger.
  

👉 Envie de comprendre pourquoi le format WebP est idéal pour alléger vos images sans perdre en qualité ? Découvrez les avantages du format WebP et WebM

→ Pour une conversion PNG en WebP sans nécessité de technique : utilisez Squoosh, l’outil gratuit de Google. Pour ce faire : 

1. Ouvrez Squoosh
   
2. Glissez-déposez votre image PNG
   
3. Choisissez le format “WebP” dans le menu à droite
   
4. Ajustez la qualité (ex : 75 % recommandé)
   
5. Cliquez sur “Download”
   

Avantage : aucune installation, visualisation avant/après, hyper rapide.

→ Pour une conversion pour un site WordPress : installez le plugin Imagify (compatible avec WebP + compression automatique). Pour ce faire : 

1. Installez Imagify depuis votre admin WordPress
2. Activez la conversion automatique en WebP
3. Uploadez vos images normalement
4. Le plugin génère et sert la version WebP selon les navigateurs

Avantage : tout est automatisé, pas besoin de s’occuper de la conversion manuelle.

 → Pour avoir un format SVG : utilisez Figma. Pour ce faire :

1. Créer un compte Figma
2. Créer un nouveau fichier design en cliquant sur “New Design File”
3. Dessiner le SVG en utilisant l’outil “Shape” (rectangle, cercle, etc.)
4. Utiliser l’outil “Pen” pour faire des formes libres ou importer une image vectorielle existante (SVG, PDF, etc.)
5. Sélectionner l’élément à exporter en cliquant sur l’illustration, icône ou forme
6. Dans le panneau de droite, aller en bas dans “Export”
7. Cliquer sur “+” pour ajouter un export
8. Choisir le format SVG
9. Cliquer sur “Export [nom de l’élément]”

• Redimensionner les visuels à leur taille d’affichage réelle : ce n’est pas nécessaire de charger une image en 2400 px si elle s’affiche en 600 px. 

Ci-dessous 4 techniques pour passer à l’action  :

• Compresser systématiquement les fichiers : des outils comme TinyPNG ou Squoosh permettent de réduire le poids d’un fichier JPEG de 500Ko à moins de 200Ko, sans perdre en qualité.

Voici une exemple avec iloveimage (directement disponible en ligne)

Avec Squoosh : 

1. Ouvrez Squoosh
   
2. Importez votre image (clic sur “Select an image”)
   
3. Choisissez le format de compression (MozJPEG, WebP, AVIF…)
   
4. Ajustez la qualité avec le curseur (ex : 75%)
   
5. Téléchargez l’image optimisée (clic sur “Download”)
   

→ Résultat : image plus légère, même qualité visuelle.

• Charger les images de façon intelligente grâce au lazy loading, qui évite de charger les parties non visibles à l’écran (comme dans une galerie ou un carrousel en bas de page).

• Éviter les effets CSS lourds, comme les flous ou “blur” ou les ombres portées ou “box-shadow” appliqués à de grandes surfaces, qui peuvent ralentir fortement le rendu, en l’occurrence sur les appareils mobiles.

🌍 Même si on optimise bien les médias, un hébergeur énergivore gâche une bonne partie des efforts. Place maintenant à l’infrastructure !

3. Choisir un hébergement web vert : penser durable dès l’infrastructure 

L’hébergement est souvent invisible du grand public mais il joue un rôle primordial dans l’impact environnemental d’un site. 

Un hébergement vert est un service d’hébergement web mis en place pour limiter son impact environnemental en utilisant : 

• Utilise de l’électricité renouvelable
• Refroidissement efficace et naturel
• Compensation carbone ou actions RSE concrètes
• Transparence sur les certifications (ISO, PUE, etc.)
  
  

Exemple = Infomaniak (Suisse), o2switch (France), Ikoula (France), GreenGeeks (États-Unis), Hetzner (Allemagne). 

Il se démarque des solutions classiques par la sobriété et la transparence écologique en tant que critères prioritaires. 

Un hébergement vert se base sur plusieurs points techniques et organisationnels. Il utilise des data centers à haute efficacité énergétique, mesurés par le PUE (Power Usage Effectiveness) : plus cet indicateur est bas, plus l’énergie est bien utilisée.

Comment fonctionne un hébergement vert ?

Un hébergement vert se base sur plusieurs points techniques et organisationnels. Il utilise des data centers à haute efficacité énergétique, mesurés par le PUE (Power Usage Effectiveness) : plus cet indicateur est bas, plus l’énergie est bien utilisée.

À titre d’exemple, Infomaniak atteint un PUE de 1,09, contre une moyenne mondiale de 1,57. 

L’électricité émane exclusivement de sources renouvelables (solaire, éolien, hydraulique), principalement certifiées par des Garanties d’Origine ou des labels comme EKOenergy. 

Le refroidissement est optimisé par le biais du free cooling, qui exploite l’air extérieur plutôt que la climatisation. Par ailleurs, les ressources sont mutualisées ou virtualisées pour éviter les serveurs sous-exploités. 

Le matériel est recyclé en fin de vie. Certains hébergeurs poursuivent avec des démarches poussés comme la compensation carbone ou la réduction de leur scope 3.

👉 Pour aller plus loin sur le choix du serveur et de l’hébergement, consultez notre guide sur les 11 étapes clés pour utiliser un serveur adapté à l’éco-conception

Quelle est la marche à suivre pour sélectionner un hébergement à bas carbone ?

• Identifier les hébergeurs verts reconnus via le répertoire de The Green Web Foundation par exemple, qui dénombre les hébergeurs alimentés par des énergies renouvelables. 

Ethiko recommande Infomaniak pour son hébergement alimenté à 100% en énergie renouvelable et ses data centers certifiés ISO 14001 et 50001. C’est un hébergeur qui combine performance, transparence et engagement concret pour un web plus responsable.

• Analyser les indicateurs techniques fournis : PUE, origine de l’énergie, certifications ISO (14001 pour l’environnement, 50001 pour la gestion énergétique).

• Privilégier l’hébergement mutualisé si le site n’a pas besoin d’un serveur dédié. Cela permet d’optimiser l’usage énergétique.

Un hébergement mutualisé c’est plusieurs sites web qui se partagent le même serveur et ses ressources (CPU, RAM, stockage).

• Économique, économe en énergie et respectueux de l’environnement.
• Maximise l’efficacité des équipements tout en réduisant la consommation des ressources.

• Choisir un hébergeur proche de vos utilisateurs, pour réduire la distance de transit des données et donc la consommation réseau.

À savoir sur la distance idéale :

• Moins de 1 000 km pour un public national ou européen : faible latence et consommation réseau réduite.
• Utilisez un CDN  (Content Delivery Network) si vos visiteurs sont répartis dans le monde (Cloudflare, Bunny, etc.)

Moins de distance = moins d’énergie + moins de CO₂ + meilleure performance.

• Demander des engagements clairs et vérifiables : certaines promesses “green” relèvent du greenwashing si elles ne sont pas accompagnées de preuves concrètes (bilans carbone publiés, audits indépendants, etc.).

Pour trouver ces preuves, nous vous préconisons de vérifier : 

1. Sur leur site web :
   → Rubriques “Engagements”, “RSE”, “Durabilité” ou “Rapport ESG”
   → Rechercher un PDF téléchargeable avec les chiffres CO₂, PUE, consommation, etc.
   
2. Sur des plateformes indépendantes :

→The Green Web Foundation : vérifie si l’hébergeur utilise des énergies renouvelables
→ Ecograder, Green Hosting Directory : notes et classements d’hébergeurs verts

3. Via leurs labels et certifications :
   → Présence de certifications ISO 14001, ISO 50001, B Corp, EMAS, etc.
   → Cela signifie qu’un audit externe a été réalisé
   
4. En demandant directement :
   → Certaines entreprises conservent leurs données hors ligne, mais fournissent leur bilan GES ou leur audit énergétique sur demande. 

💡 Le conseil d’Ethiko  La compensation carbone est une fausse bonne idée. Mal encadrée, elle sert de prétexte pour ne pas réduire réellement les émissions. Certains projets sont peu efficaces, mal gérés ou ont des impacts négatifs sur les écosystèmes et les populations locales. Ainsi, la priorité reste toujours la réduction à la source. Découvrez aussi notre article sur l’hébergement web écologique pour une harmonie entre performances optimales et éco-responsabilité.

🎨 Un beau site, c’est bien. Un site efficace, accessible et sobre, c’est encore mieux. Voyons comment cela peut soutenir votre démarche

4. Optez pour un design éco-responsable : ce n’est pas une tendance, c’est une stratégie

Un conception visuelle éco-responsable correspond à une démarche minimaliste qui élimine les éléments graphiques pas nécessaire, épure les interfaces et optimise les performances. 

Cette méthode réduit l’empreinte environnementale numérique : 

• limite les ressources informatiques requises, 
• améliore l’expérience utilisateur 
• minimise la consommation énergétique des appareils.

Plusieurs stratégies de design éco-responsable sont disponibles :

• Le minimaliste élimine les éléments non importants pour soulager les plateformes. 
• Le modulaire favorise la réutilisation des composants, abaissant la complexité du code. 
• L’adaptatif s’ajuste aux capacités des appareils et aux connexions faibles. 
• Le mode sombre, sur écran OLED atténue la consommation énergétique dans certains cas d’usage.

• Un site à design minimaliste prend moins de temps pour se charger, soit 4 à 6 fois plus vite (0.6 à 1s vs 3 à 5s). 

Concrètement, pour éco-concevoir l’apparence d’un site, il faut simplifier les visuels : 

→ Remplacer une bannière animée de 1,5 Mo par une illustration SVG statique va diviser par 10 le poids chargé. 

→ Limiter les polices à une ou deux graisses pour éviter de charger des fichiers typographiques lourds. 

→ Soigner l’accessibilité (contrastes, lisibilité, navigation) pour renforcer à la fois l’inclusivité et la performance du site.

👉 Le choix du thème a aussi un rôle majeur dans la réduction de l’empreinte carbone. Découvrez pourquoi utiliser un thème éco-conçu fait la différence.

Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web de Bordeaux.

À savoir : Un design écoresponsable ne sacrifie ni l’esthétique ni l’UX et encore moins la popularité.  Exemple de site éco responsable populaire  :  Back Market avec 20 millions de vues  Reporterre avec 2 millions de vues

🧩 Pas besoin de 100 outils pour faire simple et performant. Et si on allégeait un peu les fonctionnalités superflues ?

5.Supprimer vos plugins et widgets inutilisés : alléger pour mieux performer 

Un plugin ou extension est un module que l’on additionne à un site internet pour y ajouter de nouvelles fonctionnalités telles que des formulaire de contact, SEO, boutique en ligne, galeries et sécurité. 

Un widget est un petit module graphique ou fonctionnel qui s’insère dans une interface.

   Exemples : météo, calendrier, fil d’actualités, réseaux sociaux, carrousel d’images…

Pourquoi les supprimer ?

Un plugin ajoute entre 1 et 15 requêtes HTTP de plus et encombre le chargement jusqu’à 500 Ko ou plus.

Sur un site WordPress classique, on compte environ 20 et 30 plugins dont presque la moitié sont ne sons pas utilisés ou facilement changeables par des alternatives plus sobres déjà intégrées au CMS.

Selon le Website Carbon, un site allégé baisse ses émissions de CO₂ de 20 à 70 %.

Comment savoir si un plugin ou un widget est vraiment utile ?

Pour trancher si il est nécessaire ou pas de garder un plugin et widget, nous vous préconisons de faire une petite analyse sur ces 4 questions simples :

1. Est-ce que cette fonctionnalité est réellement utilisée par mes visiteurs ?

2. Apporte-t-elle une valeur ajoutée à l’expérience utilisateur ?

3. Existe-t-il une alternative plus légère ou native intégrée au CMS ?

4. Ce plugin est-il maintenu à jour et sécurisé ?

Quels sont les points positifs dans la suppression de plugin ou widget ? 

Voici les avantages sur cette suppression : 

• Baisse du poids des pages pour une meilleures performance et diminution de l’empreinte carbone
• Peu de requêtes et de scripts engendre un temps de chargement plus rapide

• Sécurité renforcée entraîne moins d’opportunité pour les hackers
• Maintenance simplifiée équivaut à peu de mises à jour à gérer
• Meilleure accessibilité et UX pour une interface plus claire, plus fluide

Comment supprimer un plugin ou un widget non utile ?

→ Sur WordPress :

• Allez dans le menu Extensions > Extensions installées.
• Désactivez l’extension si elle est active.
• Cliquez sur Supprimer pour la désinstaller complètement.

• Pour les widgets :

• Allez dans Apparence > Widgets.
• Supprimez les blocs ou désactivez ceux qui ne sont pas essentiels.
• Vérifiez aussi les widgets intégrés dans les constructeurs de page ou les thèmes.

→ Pour les widgets :

• Allez dans Apparence > Widgets.
• Supprimez les blocs ou désactivez ceux qui ne sont pas essentiels.
• Vérifiez aussi les widgets intégrés dans les constructeurs de page ou les thèmes.

💡 Le conseil d’Ethiko  Il est important de faire une sauvegarde avant toute suppression, essentiellement si vous touchez à des éléments peu documentés. Il est possible d’activer des outils d’analyse comme Query Monitor ou Asset CleanUp sur WordPress pour voir ce que chaque plugin charge.

📦 Alléger, c’est bien. Mais rapprocher les ressources de vos visiteurs, c’est encore mieux. Découvrez l’intérêt du CDN.

6.Utiliser un CDN (Content Delivery Network) : rapprocher vos données de votre audience

Un CDN (Content Delivery Network) est un réseau de serveurs répartis partout dans le monde pour stocker en cache les fichiers statiques d’un site internet (images, scripts, vidéos…).

Lorsqu’un internaute visite le site, ces fichiers sont fournis par le serveur CDN le plus proche, ce qui réduit le temps de chargement, soulage le serveur principal et limite la distance parcourue par les données, baissant ainsi l’empreinte carbone des échanges.

Comment le choisir ?

Pour bien sélectionner un CDN dans une méthode éco-responsable, plusieurs critères doivent être pris en compte :

• Nombre et localisation des nœuds : plus les points de présence sont proches de vos internautes, plus l’impact est réduit.
  
• Efficacité énergétique et politique environnementale : certains CDN comme BunnyCDN ou Cloudflare communiquent sur leur utilisation d’énergies renouvelables ou leur objectif de neutralité carbone.
  
• Légèreté du service : un CDN doit être rapide et efficace, mais aussi sobre en fonctionnalités si le site n’a pas de trafic massif ou de besoins complexes.
  
• Transparence : privilégier les fournisseurs qui publient les chiffres sur leur consommation ou leur stratégie environnementale.

Comment le configurer ? 

1. Choisir un fournisseur de CDN

Voici 4 options populaires :

• Cloudflare : gratuit avec des options premium, facile à intégrer via DNS
• BunnyCDN : très performant, facturation au trafic, interface claire.
• KeyCDN : rapide et fiable, facile à utiliser avec WordPress ou des sites statiques.
• CDN77 ou Fastly : plus techniques, mais adaptés aux gros volumes de trafic.
  

2. Intégrer le CDN à votre site

Cas 1 : WordPress (ou autre CMS)

• Installez un plugin de cache compatible avec un CDN :
  Exemples : WP Rocket, W3 Total Cache, LiteSpeed Cache, Autoptimize.
• Dans les réglages du plugin, activez l’option “CDN” ou “Content Delivery Network”.
• Collez l’URL fournie par le CDN, souvent du type cdn.monsite.com ou monprojet.b-cdn.net.
• Sauvegardez et videz le cache du site.
  

Cas 2 : site statique (HTML/CSS/JS)

• Remplacez les chemins des fichiers statiques (ex. /images/photo.jpg) par ceux du CDN (ex. https://cdn.monsite.com/images/photo.jpg).
• Vous pouvez aussi automatiser cela via un outil de déploiement ou un script.
  

Cas 3 : configuration via DNS avec reverse proxy (ex : Cloudflare)

• Mettez à jour les serveurs DNS de votre nom de domaine pour pointer vers ceux de Cloudflare.
• Dans le tableau de bord Cloudflare, configurez le mode “Proxy activé” (icone orange) pour chaque sous-domaine.
• Activez la mise en cache des fichiers statiques, la minification HTML/CSS/JS, et le cache automatique selon les règles Cloudflare.
• Activez également les fonctionnalités de sécurité (DDoS, firewall, HTTPS automatique).
  

 3. Tester et valider la configuration

• Videz les caches (plugin, navigateur, CDN).
• Testez les performances du site avec GTmetrix, WebPageTest, ou PageSpeed Insights.
• Vérifiez que les fichiers statiques (images, scripts…) sont bien servis depuis le CDN (vous pouvez utiliser l’inspecteur réseau du navigateur → onglet Réseau).
  

4. Bonus : personnalisation et bonnes pratiques

• Créer un sous-domaine dédié au CDN (ex. : cdn.monsite.com) pour une meilleure intégration.
• Activer HTTP/2 ou HTTP/3 si le CDN le propose, pour un chargement plus rapide des fichiers.
• Surveiller les logs d’erreurs et la consommation de bande passante via l’interface du CDN.
• Toujours sauvegarder le site avant de faire des modifications importantes, surtout sur le DNS.

💡 Le conseil d’Ethiko  Un CDN ne se limite pas à accélérer le chargement des pages. Il améliore aussi la disponibilité du site, spécialment en cas de pic de trafic ou de panne et protège contre les attaques DDoS.  En déchargeant le serveur principal, il permet une économie de ressources et participe à réduire l’empreinte énergétique. Résultat : une expérience plus fluide et un taux de rebond réduit. Consultez aussi notre article sur le pouvoir du CDN pour maximiser la vitesse votre site internet.

🚀 Les optimisations côté serveur peuvent tout changer sur la vitesse… et l’impact énergétique.

7. Utiliser un système de cache objet : stocker intelligemment les données

Le cache objet ou disque rapide est la mémoire qui permet de préserver les résultats de requêtes dans la base de données 

Il conserve temporairement en mémoire les résultats répétitives vers la base de données, telles que:

• les infos d’un article,
• les métadonnées d’un utilisateur,
• les résultats d’un get_option() ou d’un WP_Query.

Pour rappel :

• get_option() est une fonction native de WordPress pour récupérer un paramètre enregistré dans la base de données.

• WP_Query est une classe WordPress très puissante qui permet de produire des requêtes personnalisées. 

Exemple : résultats de requêtes SQL, appels d’API, objets utilisateur.

 

Cela accélère les temps d’exécution PHP et diminue le volume d’informations stockées.

WordPress a un système de cache objet par défaut qui est le WP Object Cache, cependant sur des sites à forte activité, il a des limites en termes d’efficacité. 

Quant au cache page, il conserve tout le HTML afin que les pages suivantes se génèrent sans qu’il n’y ait besoin de créer la page.

Quels sont les avantages de la mise en cache d’objets ?

Le cache objet et le cache page sont différents, mais il est possible de les associer. En effet, le cache objet est complémentaire avec les modules de cache tel que le WP Rocket ou le WP Super Cache. 

La mise en place du cache objet va : 

• soulager l’utilisation de la base de données
• avoir un impact sur des pages ou des zones non mises en cache par le cache de page. 
• jouer un rôle positif sur le temps de réponse serveur pour que ce soit plus rapide. 

A titre d’exemple, le back office, le panier, les zones membres sont des zones et des pages riches en termes de données.

La consommation des données est plus faible puisqu’une fois qu’elles sont stockées par des modules de cache, celles-ci ne seront plus rechargées.

Comment mettre en place le cache objet ? 

Il faut des compétences techniques spéciales dans le domaine pour l’installer. De manière générale, il y a deux systèmes de cache objet : Memcached et Redis. Redis est plus populaire grâce à son efficacité et ses options plus nombreuses que Memcached.

Dans le cas où vous voulez réaliser vous-même les différentes opérations, il faut posséder un serveur dédié, VPS ou hébergement. 

Dans le cas contraire, il est possible d’avoir un accès à une ligne de commande ou un hébergeur qui propose ce type de services.

Voici les 4 étapes pour l’installer : 

Étape 1 : Choisir une solution de cache

• Redis (rapide, clé/valeur, très populaire)
• Memcached (simple, rapide, sans persistance)
• Ou des solutions internes à certains CMS ou frameworks
  

Étape 2 : Installer et configurer le cache

 → Si vous êtes sur un serveur :

• Installer Redis :

bash : sudo apt install redis-server

• Vérifier qu’il tourne :

bash : redis-cli ping / doit répondre: PONG

 → Si vous êtes sur un hébergement mutualisé :

Redis/Memcached est proposé par votre hébergeur (à activer via le panneau de contrôle)

Étape 3 : Activer le cache dans votre CMS ou framework

 → WordPress :

• Installer un plugin comme Object Cache Pro, Redis Object Cache
  
• Aller dans l’admin > Réglages > Redis > “Enable Object Cache”
  
• Optionnel : ajouter define( ‘WP_REDIS_ENABLED’, true ); dans wp-config.php

→ Laravel :

• Laravel gère nativement plusieurs pilotes de cache
  
• Dans .env :

ini : CACHE_DRIVER=redis

• Ensuite, vous pouvez stocker une valeur :

php : Cache::put(‘cle’, $valeur, 600); // 600 = durée en secondes

 → Symfony :

• Utiliser CacheInterface avec adapter Redis ou Memcached :
  

yaml : framework:

 cache:

   app: cache.adapter.redis

default_redis_provider: redis://localhost

 Étape 4 : Cacher les objets utiles

• Résultats de requêtes lentes
  
• Données utilisateurs fréquentes
  
• Fragments de blocs HTML (par ex : un encart “produits similaires”)

💡 Les conseils d’Ethiko Configurer une période de conservation (TTL) optimale  Éviter de saturer la mémoire avec des données excessivement volumineuses. Purger le cache lors des actualisations essentielles du système

🗂️ Une base de données qui déborde, c’est comme une armoire qu’on n’a jamais rangée. Alléger l’arrière-boutique, ça commence ici.

8.Nettoyer la base de données : moins de datas, plus d’efficacité

Au fil du temps, une base de données se remplit petit à petit de plein d’informations utiles ou inutiles à un site. 

Chaque requête envoyée absorbe : du temps processeur, de l’énergie, de la bande passante serveur. 

Quels sont les avantages de nettoyer une base ?

• Réduction du temps de chargement réduit : diminution des datas à parcourir équivaut à des pages plus rapides
  
• Efficacité des requêtes SQL : tri, filtres et recherches allégés
  
• Diminution de l’espace disque utilisé : utile sur des hébergements mutualisés ou cloud
  
• Baisse des risques de failles ou de fuites comme les vieilles datas personnelles
  
• Empreinte carbone allégée : chaque requête optimisée équivaut à une baisse d’énergie utilisée. 

Quels sont les outils nécessaires pour nettoyer ? 

Voici les outils utiles pour ce faire selon notre expertise : 

La tâche CRON :

Il est également possible d’utiliser une tâche CRON ou CRON job qui est une commande automatique, s’exécutant à intervalles réguliers sur un serveur, sans intervention. 

Elle s’utilise pour automatiser des actions répétitives telles que le nettoyage de base de données, l’envoi d’e-mails, ou la mise à jour de fichiers. 

Où la créer?

• Sur un serveur Linux, via la commande crontab -e
• Via l’interface de votre hébergeur (ex : cPanel, Infomaniak, o2switch…)

💡 Les conseils d’Ethiko  Voici 5 manipulations qui vous feront gagner jusqu’à 30% d’efficacité :  → Supprimez les révisions d’articles (WordPress en garde fréquemment des dizaines inutilement)  → Effacez les transients expirés et les sessions obsolètesPurge des brouillons, paniers abandonnés, logs non exploités  → Optimisez les tables (OPTIMIZE TABLE sur MySQL pour décomposer)  → Automatisez un nettoyage mensuel avec un plugin ou la tâche CRON  Pour les sites peu actif, nous vous conseillons de nettoyer 1 fois par semaine. Pour le reste, vous pouvez le faire 2 à 4 fois par mois.  Pour appuyer les acquis dans ce paragraphe, lisez aussi comment nettoyer une base de données.

Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web de Bordeaux.

🔄 Chaque aller-retour entre le serveur et le navigateur consomme de l’énergie. Et si on limitait les trajets inutiles ?

9. Limiter le nombre de requêtes HTTP : réduire les allers-retours serveur 

À chaque fois qu’un navigateur charge une page web, il livre des requêtes HTTP au serveur afin de récupérer tous les éléments indispensables à l’affichage de la page.

Ces éléments incluent :

• HTML
• Fichiers CSS
• Scripts JavaScript
• Images, vidéos et polices.

Une requête HTTP correspond à un aller-retour entre le navigateur web et le serveur.

Pourquoi les limiter ?

L’augmentation du nombre de requêtes HTTP est proportionnel avec :

• le temps de chargement 
• la consommation de l’énergie du site 
• l’alourdissement de l’empreinte carbone numérique

Un site web fait en moyenne 70 à 100 requêtes HTTP par chargement de page. Selon Website Carbon, une requête inutile correspond à plusieurs grammes de CO₂ par mois à l’échelle d’un trafic moyen. En compressant et combinant les fichiers, on arrive à diminuer de 30 à 50 % le nombre de requêtes et ainsi diminuer la consommation d’énergie rattachée à l’affichage des pages.

Quels sont les bénéfices concrets de cette limitation ?

Le site devient plus rapide parce qu’il a moins de fichiers à charger et les pages s’affichent plus vite. 

La consommation d’énergie baisse du côté serveur ainsi que côté utilisateur.

L’expérience est plus fluide et le temps d’attente diminue. 

L’ impact environnemental est réduit comme chaque requête est économisée. 

Quels outils pour analyser les requêtes HTTP ?

4 outils sont disponibles pour passer à cette manipulation : 

Comment alléger concrètement les requêtes HTTP ?

1. Fusionner les fichiers CSS et JS

• Utiliser un plugin comme Autoptimize ou WP Rocket (WordPress) pour :

• Fusionner les fichiers CSS
• Fusionner les fichiers JS
• Retarder ou supprimer les scripts inutiles
  

2. Effacer les fichiers inutilisés

• Éliminer les thèmes, les polices inutiles, les scripts tiers tels que les trackers, widgets sociaux.
• Éviter les plugins trop lourds qui chargent leur propre CSS/JS même lorsqu’ils ne sont pas affichés.
  

3. Employer des sprites ou SVG pour les icônes

• Préférer un seul fichier image ou SVG combiné plutôt que plusieurs petites telles que les logos et les pictos. 

4. Limiter les requêtes externes

• Un appel à un script hébergé ailleurs comme sur Google Fonts, vidéos YouTube, widgets équivaut à une requête supplémentaire. 
• Prioriser l’auto-hébergement des ressources essentielles si possible.
  

5. Activer la mise en cache et la compression

• Placer en cache les fichiers statiques avec des plugins ou via le serveur
• Activer Gzip ou Brotli via l’hébergement ou le CMS

⏳ Inutile de tout charger d’un coup si personne ne regarde. Découvrez comment charger uniquement ce qui est visible.

10. Utiliser Lazy Loading : charger à la demande

Le Lazy loading, ou chargement paresseux, est une stratégie qui consiste à ne charger les images ou les vidéos qu’au moment de leur apparition dans la zone visible de l’écran. 

Autrement dit, si l’utilisateur ne fait pas défiler la page jusqu’à une image, celle-ci n’ absorbe ni bande passante, ni ressource serveur.

Le fonctionnement dépend sur deux éléments :

• Soit un attribut HTML loading=”lazy” ou un script JavaScript d’observation du défilement (intersection observer).
• Soit un navigateur moderne qui sait gérer ce comportement (la plupart aujourd’hui le font).

Quels sont les points positifs du lazy loading ?

• Délai d’apparition plus rapide des pages surtout sur mobile ou sur les réseaux lents
• Baisse d’énergie consommée côté client et serveur
• Diminution du poids initial de la page, ce qui fait moins de Mo à charger en une seule fois
• Expérience utilisateur plus fluide, même sur des pages longues
• Allégement de l’empreinte environnementale globale du site

Une page avec 15 images non optimisées dont carrousel, témoignages, actualités pèse environ 3,5 Mo. Cependant, avec le lazy loading, uniquement les 4 premières images se chargent à l’ouverture et pèse environ 1,2 Mo.  Soit  60 à 70 % de moins de poids chargé au premier affichage.

Quels outils utiliser et comment s’en servir ? 

💡 Les conseils d’Ethiko  Les navigateurs modernes supportent loading=”lazy” nativement. Pour les vidéos et iframes, ajoutez également loading=”lazy” sur les balises <iframe> Consultez aussi notre article comment utiliser le lazy loading pour les medias pour aller encore plus loin.

🎨 Attention aux fausses bonnes idées… Certains outils simplifient la création mais alourdissent vos pages. On en parle.

11.Limiter le recours aux “canva” : utile, mais à consommer avec modération

Même si Canva est un excellent outil de création graphique, il n’est pas destiné pour l’efficacité web. 

Canva est une plateforme de création graphique en ligne qui permet de créer des designs, bannières, posts, présentations ou infographies, sans demander des compétences en graphisme.

Pourquoi une utilisation excessive de Canva nuit à l’éco-conception ? 

 → Poids démesuré des visuels exportés

Une image exportée depuis Canva pèse en moyenne jusqu’à 4 à 5 fois plus que la version optimisée pour le web :

• Trop grandes résolutions : Canva exporte en 1920x1080px voire plus par défaut
• Formats inadaptés : soit du PNG et du JPEG qui pèse 1 à 2 Mo, rarement du WebP ou AVIF avec 200-400 Ko.
• Calques et effets non aplatis : Ombres portées, effets flous, filtres, augmentant la complexité bitmap, ce qui donne plus d’octets à encoder.
  

 → Contenus peu optimisés pour le web

• Faible ou inexistante compression : généralement entre 90 et 100 % de qualité

Exemple : Une image JPEG compressée sur Squoosh à 70 % a un poids réduit de 60 à 80 % sans perte visible.

• Métadonnées inutiles: Les fichiers exportés incluent des données EXIF inutiles, ce qui ajoute jusqu’à 20 Ko par image.
  
• Impact sur les outils d’évaluation web : Scores EcoIndex, Lighthouse ou PageSpeed Insights pénalisés.
  

 → Multiplication de visuels lourds & non nécessaires : Bannières décoratives multiples, arrière-plans texturés, titres sous forme d’images plutôt que texte HTML.

Néanmoins, Canva s’emploie avec modération pour créer des illustrations ponctuelles spécifiques tels que les landing page ou les infographies.

Une alternative consiste aussi à appliquer une compression aux fichiers avant de les intégrer à votre site web.

💡 Les conseils d’Ethiko Nous vous recommandons de créer depuis les outils ci-dessous à la place de Canva.   Pour les visuels web optimisés :  → Figma : adapté au design UI, export SVG/WebP léger  → Photoshop / GIMP : avec options d’export avancées  → Squoosh : pour compresser les images Pour les illustrations simples :  → Icônes SVG en ligne : Heroicons, Feather, Iconmonstr  → Illustrations sobres : Undraw, Humaaans

🎬 Les animations, ça attire l’œil… mais ça alourdit la page. Voyons comment garder le mouvement sans pénaliser l’impact.

12. Limiter vos animations  : chaque mouvement a un coût

L’animation est très présente sur le web comme les sliders, les effets de survol, les micro-interactions et les scroll parallaxe. Ces animations alourdissent les ressources.  

Dans une démarche d’éco-conception web, baisser les animations est une des points essentiels pour améliorer la sobriété numérique, la performance et l’accessibilité.

Quels sont les différents types d’animations ? 

Ces animations sont faites via CSS (transition, keyframes), JavaScript (GSAP, anime.js, Lottie…), ou les fichiers animés (GIF, vidéo, Lottie JSON).

Pourquoi faut-il limiter les animations ?

• Consommation des ressources processeur : chaque animation déclenche des recalculs du DOM, du repaint, et du layout complet.

Résultat : CPU sollicité, batterie mobile réduite, expérience ralentie.

• Alourdissement des pages : GSAP ou Lottie ajoute 80 à 400 Ko au poids du contenu.

Un slider JavaScript + transitions CSS = +200 Ko ( plus qu’une image optimisée).

• Détournement de l’attention si mal utilisées : l’excès d’effets provoque une surcharge cognitive et une mauvaise UX

• Augmentation de l’empreinte environnementale : coûte de l’énergie en plus, ce qui engendre plus d’émissions indirectes de CO₂.

Le loader d’intro, une animation bloquante, retarde l’accès au contenu utile. 

Exemple : en supprimant un carrousel + Lottie + effets de scroll, on réduire le poids de la page de 30 à 50 %. 

Que peut-on faire pour les remplacer ou pour les alléger ? 

Ci – dessous les faits à remplacer ou les alternatives à prendre si l’on ne peut pas se passer de l’animation. 

💡 Les conseils d’Ethiko  Voici 2 outils et 2 bonnes pratique à adopter :  → CSS only : animations via transition et transform = plus léger que top, left, etc.  → Compress Lottie : https://lottiefiles.com/compress  → Audit via Lighthouse / EcoIndex : pour vérifier l’impact des animations  → Greenframe.io ou Scaphandre (dev) pour mesurer la consommation CPU réelle

🍪 Et si vos cookies consommaient plus que vos images ? Petit tour du côté de ces données qu’on oublie souvent d’optimiser.

13. Optimiser la taille des cookies

La performance web est souvent rattachée au poids des images ou aux animations. Pourtant, les cookies ont un impact réel. 

Un cookie est un petit fichier texte conservé sur l’appareil d’un internaute par un site web. Il utile pour  :

• Garder une session ouverte (ex : rester connecté)
• Mémoriser des préférences (langue, thème, panier…)
• Suivre le comportement de navigation (analytics, publicités)
  

Ils sont échangés à chaque requête HTTP, ce qui veut dire qu’ils sont renvoyés au serveur à chaque affichage d’une URL.

Pourquoi optimiser les cookies ?

Selon notre expertise, voici 4 raisons d’optimiser les cookies: 

• Baisse la consommation de bande passante

Un cookie de 4 Ko renvoyé à chaque requête, sur 50 fichiers équivaut à 200 Ko par chargement de page juste en cookies.

• Accélère les temps de réponse

Peu de données engendrent une échange plus rapides, ce qui équivaut à un meilleur TTFB et une baisse de la latence mobile. 

• Rehausse la performance et le score EcoIndex / EcoDesign

Les outils d’analyse de performance proposent de limiter au minimum les informations transmises vers le navigateur.

• Respecte la vie privée

Peu de cookies génèrent moins de données sensibles, ce qui donne plus de confiance et de conformité RGPD. 

 → On obtient jusqu’à 90 % de réduction de poids total envoyé via HTTP headers avec des cookies bien optimisés.

Quels outils et plugins utilisés ? 

Voici 5 propositions d’outils et de plugins pour améliorer l’impact lié aux cookies: 

Comment optimise- t-on les cookies ?

Pour ce faire, suivez ces 4 points : 

1. Limiter le nombre et la taille en n’utilisant que les cookies nécessaires au fonctionnement du site. 
2. Éviter de conserver trop d’informations dans un cookie comme le contenu complet d’un panier
3. Réduire la durée de vie en l’abrégeant à quelques jours ou à la session si possible
4. Utiliser des cookies côté serveur (HttpOnly) en évitant les cookies JavaScript non essentiels. 

Optimiser ses cookies, c’est allégé la pollution invisible produite par les échanges entre le navigateur et le serveur.

🛠️ Même le code source a son rôle à jouer dans la sobriété numérique. Minification, simplification, fusion… suivez le guide.

14. Optimiser le code (HTML, CSS, JS) de votre site

Dans un site écologique, l’optimisation va au-delà du visuel. Le code source (HTML, CSS, JavaScript) non optimisé accentue significativement le poids de la page, ralentit l’affichage et rehausse la consommation énergétique.

Pourquoi optimiser le code (HTML, CSS, JS) ?

Nous vous conseillons d’optimiser votre page pour ces 5 raisons : 

• Allège le poids total : un code non compressé crée des fichiers jusqu’à 2 fois plus lourds

Les espaces, tabulations, commentaires inutiles sont lus/transmis à chaque requête

• Accélère le rendu du navigateur : peu de code entraîne moins de traitement par le navigateur

Les scripts JS bien structurés génèrent moins de blocage au chargement

• Apaise la consommation énergétique : les requêtes HTTP transfèrent des codes inutiles qui gaspillent de la bande passante, du CPU, et de l’électricité.

• Limiter les risques de bugs et de faille : un code clair, propre et minimaliste est plus sûr et maintenable. 

👉 Envie de rendre votre code plus léger et performant ? Découvrez nos conseils pour optimiser vos fichiers CSS, JavaScript et HTML.

Quels sont les outils/plugins à utiliser et comment y procéder  ? 

Pour chaque type de code, voici les outils et les manipulations à faire : 

 → HTML

• Supprimer les commentaires inutiles (<!– … –>)
• Éliminer les balises vides ou non utilisées
• Supprimer les espaces, tabulations et sauts de ligne superflus
• Réorganiser la structure (ordre logique, éviter les balises imbriquées inutilement)
• Utiliser des balises sémantiques (<section>, <article>, <header>) pour plus de clarté et moins de divs

 → CSS

• Supprimer les règles inutilisées (ex : sélecteurs jamais appliqués)
  → Utiliser PurgeCSS ou UnCSS pour automatiser
• Minifier les fichiers : supprimer commentaires, retours à la ligne, espaces
  → Outils : CleanCSS, Autoprefixer, ou dans ton build system (Webpack, Gulp…)
• Fusionner les fichiers CSS pour réduire les requêtes
• Supprimer les doublons et simplifier les sélecteurs
• Utiliser des variables CSS (si projet compatible) pour alléger le code
  

 → JavaScript

• Supprimer les scripts non utilisés ou inactifs (ex : sliders ou popups non affichés)
• Externaliser les scripts (ne pas les injecter en dur dans le HTML)
• Minifier avec Terser, UglifyJS ou ESBuild
• Fusionner les fichiers JS (quand possible)
• Ajouter defer ou async pour les scripts afin de ne pas bloquer le rendu
  
  <script src=”main.js” defer></script>

Comparatif : 

• Bénéfice de 60 % sur le poids transféré et jusqu’à 1,5 seconde gagnée sur le temps de chargement.

💡 Les conseils d’Ethiko Pour gagner en efficacité, nous vous recommandons de :  → Supprimez les scripts non utilisés comme les carrousels JS jamais affiché  → Externalisez les scripts au lieu de les injecter dans le HTML  → Utilisez des outils de build modernes comme Vite, Webpack, Gulp pour automatiser l’optimisation  → Compressez tous vos fichiers en Gzip ou bien Brotli

⚠️ Des avertissements dans votre code ? Ils peuvent sembler anodins… mais finissent par coûter cher côté performance.

15. Repérer les warnings

Un warning ou “avertissement” est un message envoyé par le navigateur, le serveur ou un outil de développement afin de signaler un problème non bloquant pour le moment, mais potentiellement problématique.

À l’inverse des erreurs qui bloquent un script ou une page, les warnings ne cassent pas le site,  à la place ils :

• dégradent les performances 
• surchargent le code ou les logs 
• masquent les bugs futurs

Pourquoi faut-il les repérer et les corriger ?

D’après notre expertise, ci-dessous 4 raisons de les rectifier : 

• Améliore les performances : un warning JS entraîne une fonction mal exécutée et du temps de traitement inutile

• Allège le code : les warnings sont des codes inutiles, mal écrits ou non optimisés (CSS, JS, balises HTML incorrecte)

• Réduit l’empreinte environnementale : un code plus propre engendre moins de traitement inutile côté client ou serveur. 
• peu de logs, peu d’opérations en coulisses équivaut à peu de CPU sollicité, ce qui donne moins d’énergie consommée

• Améliore la qualité et la sécurité : les warnings révélent des dépendances obsolètes, des appels dépréciés ou des erreurs de syntaxe. 

Comment repérer les warnings ? 

Voici les outils qui permettent de repérer les warnings : 

Exemple courant de warning discrètes mais onéreuse : 

Warning: ‘someFunction’ is deprecated and will be removed in future versions.

Cette fonction est encore opérationnel, quoiqu’elle va être :

• plus lente,
• plus énergivore,
• poser des problèmes lors de la prochaine mise à jour.

Impact : 

Le repérage des warnings est une étape simple, gratuite, accessible à tous qui évite les bugs futurs, optimise le comportement du site, et abaisse son empreinte numérique.

➡️ Chaque redirection, c’est un détour de plus. Et chaque détour, c’est du temps et de l’énergie perdus.

16. Éviter les redirections

Les redirections sont pratiques, le problème c’est qu’elles sont fréquemment utilisées sans modération. 

Une redirection est une consigne donnée au navigateur ou au moteur de recherche pour automatiquement redirigée une URL vers une autre.

Elle est utilisée pour :

• changer de page (/ancienne-url → /nouvelle-url)
• passer du HTTP vers HTTPS
• ajouter un / final ou une langue (/fr)
• rectifier une casse (/Contact → /contact)

Plusieurs types de redirections existent telles que les 301 permanente et les 302 temporaires qui ont toutes un coût en performance.

Pourquoi éviter les redirections ?

Une redirection équivaut à une requête de plus. Cela augmente :

• le temps de chargement
• la latence réseau
• la consommation serveur et client

Ell a un impact mesurable sur la performance : 

• ajoute 150 à 300 ms de latence sur mobile selon le WebPageTest.
• augmente les requis HTTP et les DNS lookups

Il y a une augmentation de l’impact environnemental : 

• mobilise du CPU, de la mémoire, et de la bande passante

Sur un site à grand trafic, cela représente des milliers de requêtes inutiles par jour. 

Impact : 

Que faire à la place ?

Au lieu de rediriger, nous vous préconisons d’opter pour ces manipulations à la place : 

1. Corriger les sources : 

• ajouter les bons liens directs dans le code HTML, les menus, les boutons, les fichiers sitemap
• Mettre à jour les liens internes durant une refonte ou une migration

2. Paramétrer correctement le serveur : 

• Forcer HTTPS ou www en une seule redirection et non deux
• Effacer les règles obsolètes du .htaccess ou des redirections PHP

3. Éviter les redirections JavaScript ou méta-refresh 

• Méthodes sont plus lentes et moins accessibles

Quels sont les outils pour détecter les redirections ? 

Il est existe 6 moyens pour vérifier les redirections, les voici : 

💡 Les conseils d’Ethiko Pour optimiser votre manipulation, voici 5 conseils de plus :  – Évitez les chaînes de redirections (ex : HTTP → www → /page → nouvelle URL) – Mettez à jour vos liens à la source, non seulement via redirection- – Supprimez les redirections inutiles ou historiques – Surveillez vos logs serveur : déceler les URLs qui redirigent souventFaites des tests avant/après optimisation (Pingdom, Lighthouse)

🤝 L’éco-conception, ce n’est pas qu’une affaire de technique. Place à l’humain : pourquoi former et sensibiliser les équipes fait toute la différence.

17. Sensibiliser à l’éco-conception web

La démarche écologique du développement web dépasse l’optimisation technique des images ou l’implémentation du chargement différé.

Un site web véritablement durable nécessite la conscientisation et la formation de tous les acteurs impliqués que ce soit les équipes techniques, créatives ou les personnes qui consultent votre site. Du développement à la relation commerciale, toute votre entreprise doit être sensibilisée sur le sujet.

1. Former les équipes aux principes de l’éco-conception web

Pourquoi former les développeurs, designers et chefs de projet ?

Un choix technique ou graphique influence : 

• le poids total à télécharger
• la consommation de ressources
• la durée de vie des équipements côté utilisateur.

Les acquis d’une équipe formée :

• Opter pour des composants légers et sobres
• Éviter les animations inutiles
• Optimiser les images, le code, la navigation
• Intégrer les bonnes pratiques dès la phase de wireframe ou maquette
• Mesurer l’impact environnemental d’une décision

Avec quels outils peut-on former les équipes ? 

Voici 5 types de contenu que l’on peut trouver sur les ressources recommandées : 

2. Informer les utilisateurs de vos efforts

 Pourquoi informer vos visiteurs ?

Il est important de tenir au courant vos utilisateurs de vos manoeuvres afin de : 

• créer un lien de confiance
• faire émerger une conscience numérique collective
• inspirer d’autres acteurs à faire de même

Comment faire ?

Nous vous invitons à suivre ces 3 étapes pour sensibiliser vos utilisateurs : 

1. Créer une page dédiée à votre démarche écologique

Contenu : 

• Buts environnementaux 
• Résultats factuels comme le score EcoIndex, émissions estimées et hébergement vert. 
• Actions mises en place telles que les optimisations, la sobriété, l’accessibilité
• Évolutions prévues

2. Publier une charte écologique 

Exemples d’élément à intégrer : engagements sur la performance, choix techniques responsables, durée de conservation des données, sobriété graphique & UX et hébergement vert

3. Insérer un label ou une mention en pied de page

Exemple : “Ce site est conçu dans une démarche de sobriété numérique.”

Impact :

💡 Les conseils d’Ethiko Une formation de vos équipes à l’éco-conception diminue significativement l’impact environnemental de vos projets web de 50 à 70 %. Une étude GreenIT.fr révèle qu’un site web conçu avec des pratiques sobres depuis la phase de design et jusqu’au développement consomme jusqu’à 6 fois moins d’énergie qu’un site ordinaire. En sensibilisant vos designers et développeurs dès le départ, vous vous épargnez des refontes coûteuses, les patchs inefficace, tout en gagnant en performance, en UX et en impact positif

📊 Ce qui ne se mesure pas ne s’améliore pas. On passe à la phase de suivi et d’amélioration continue.

18. 3 outils pour suivre l’évolution de la performance écologique votre site internet

Tel que la performance technique ou SEO, il est important de suivre régulièrement la performance environnementale de votre site internet.

Cela permet de :

• contrôler l’efficacité de vos optimisations
• identifier les écarts au cours des évolutions
• vous inscrire dans une approche d’amélioration continue.

1. EcoIndex – Évaluez l’impact de vos pages web

EcoIndex est un outil élaboré par GreenIT.fr qui attribue une note environnementale de A à G à chaque page web analysée.

Ce qu’il évalue :

• Taille de la page (Ko)
• Nombre de requêtes HTTP
• Complexité du DOM
• Score d’efficacité énergétique estimée

Pourquoi utiliser EcoIndex ?

Il s’agit d’une référence reconnue dans l’éco-conception web qui permet de suivre l’évolution d’une page par page. 

EcoIndex est rapide, gratuit et sans inscription

• Testez votre site avec EcoIndex 

 

2. GreenFrame.io – Mesurez les émissions réelles de CO₂ de votre site

GreenFrame est un outil d’analyse technique formé par Marmelab. Il mesure la consommation énergétique réelle d’une page web, y compris le traitement côté serveur et client.

Ce qu’il mesure concrètement  :

• Consommation CPU serveur et navigateur
• Estimation des émissions de CO₂
• Scénarios réalistes de navigation telles que les tunnels de conversion

Pourquoi utiliser GreenFrame.io ? 

Il est utile si l’on vise à : 

• aller au-delà des indicateurs front-end
• mesurer des sites à fort trafic ou à usage critique
• quantifier l’impact carbone précis d’un parcours utilisateur

• Suivre votre site avec Greenframe

 

3. EcoDesign.dev – Audit complet selon 115 critères Green IT

Développé par Ethiko, EcoDesign.dev est un outil d’audit qui passe votre site au crible de 115 critères d’éco-conception web inspirés des référentiels RGESN, GreenIT et Accessibilité.

Ce qu’il évalue :

• Score global de performance écologique de A à D
• Analyse détaillée : HTML, CSS, JS, SEO, accessibilité, hébergement…
• Suivi de vos progrès dans le temps

Pourquoi utiliser EcoDesign ? 

Cet outil est adapté pour :

• une analyse approfondie au-delà du simple poids
• justifier votre démarche auprès des parties prenantes
• avoir un plan d’amélioration concret

🧭 Et si l’UX était la clé de voûte de votre démarche ? Un site éco-conçu, c’est aussi un site clair, efficace, centré sur les vrais besoins.

19. Intégrer une approche centrée sur l’utilisateur

Lorsqu’il s’agit d’éco-conception web, on se réfère facilement temps au poids des pages, à la consommation énergétique ou au nombre de requêtes. Cependant l’UX, ou expérience utilisateur est tout aussi fondamental. 

• Un parcours clair, simple et efficace diminue non seulement la frustration, mais également les interactions inutiles, les rechargements de pages, et l’impact environnemental.

Qu’est ce que l’approche centrée utilisateur ?

C’est une stratégie de conception qui met les besoins, attentes et comportements au centre du processus d’élaboration.

Le but est de rendre leur navigation fluide, intuitive et limiter les actions inutiles.

• En éco-conception, le premier objectif n’est pas l’esthétique, mais l’utilité, l’efficacité, et la responsabilité.

Pourquoi il s’agit d’une étape d’éco-conception à part entière ? 

Ces techniques visent à :

• Élaborer des interfaces épurées en apaisant le poids des pages : optimise la performance globale du site.

• Structurer les parcours de manière claire et intuitive en permettant à l’internaute d’avoir rapidement l’information recherchée : baisse le temps de navigation et l’impact environnemental associé.

• Favoriser l’expérience utilisateur en diminuant le taux d’abandon et en renforçant l’engagement : bénéfice tant sur le plan écologique que sur les performances business du site.

D’après Google UX Playbook, 53 % des utilisateurs quittent un site mobile si une page met plus de 3 secondes à se charger. Selon le Collectif Green IT, un site bien conçu peut réduire son impact environnemental de 50 à 70 %. Un bon UX permettrait de réduire jusqu’à 30 % le nombre de pages vues par session, sans perte d’efficacité.

• Un nombre réduit de pages consultées s’interprète par une réduction des données transférées, favorisant un site  web plus sobre et plus efficient. 

Quels sont les avantages d’une approche centrée sur l’utilisateur (UCD) en éco-conception ?

Concrètement, il y a 4 avantages majeures dans l’adoption de cette démarche :

1. Diminution du nombre de pages, d’interactions et de charge serveur

La réduction des clics non nécessaires baisse le nombre de pages consultées inutilement et réduit la charge sur les serveurs.

• Résultat : peu de requêtes, peu de données transférées et une navigation plus fluide.

2. Réduction du gaspillage numérique

Les contenus infructueux et les interfaces alourdies sont évités. Cela se traduit par une baisse significative des ressources comme les bandes passantes, calculs et  stockage.

• Résultat : une meilleure efficacité énergétique.

3. Renforcement de l’accessibilité

Des parcours simples et clairs aident tous les publics, notamment ceux avec handicaps ou connexions limitées.

• Résultat : favorise une inclusion numérique plus responsable.

4. Amélioration des performances business

Un site plus facile à comprendre aide les visiteurs à accomplir leurs tâches plus vite. 

• Résultat : réduction des frictions, augmentation des taux de conversion de 15 à 30 %.

Impact : 

• Le temps passé est réduit de 40 %, le poids total de navigation est divisé par 2 et l’expérience utilisateur est nettement améliorée.

Comment intégrer une démarche centrée utilisateur dans une logique éco-conçue ?

Voici 5 étapes concrètes :

1. Comprendre les besoins réels : 

• Utiliser des interviews, sondages, analytics
• Se concentrer sur les usages les plus fréquents

2. Simplifier les parcours

• Réduire le nombre d’étapes pour atteindre une action clé (achat, inscription, info…)
• Éviter les détours et contenus parasites

3. Optimiser l’architecture de l’information

• Classer, nommer et hiérarchiser les contenus de manière logique
• Aller à l’essentiel

4. Créer des interfaces sobres

• Design fonctionnel, pas décoratif
• Moins d’animations, de widgets inutiles
• Polices système, composants réutilisables

5. Tester avec de vrais utilisateurs

• Valider que les choix sont pertinents et efficaces
• Itérer pour éviter les erreurs de conception coûteuses

Qu’est-ce que l’éco-conception web ?

L’écoconception web est une méthode qui consiste à concevoir, élaborer et conserver des sites ou des  applications numériques en limitant leur impact environnemental tout au long de leur cycle de vie.

Elle se fonde sur des principes de sobriété numérique : limiter le poids des pages, alléger le code, optimiser les médias, diminuer les requêtes serveur, et prioriser des choix techniques plus durables. 

Le but est de créer des interfaces qui ne sont pas consommateurs d’énergie, sans mettre en jeu l’accessibilité, la performance ou l’expérience utilisateur, que ce soit du côté serveur ou du côté appareil.

Actuellement, selon le recensement de GreenIT.fr, nous comptons plus de 2.000 sites en France qui ont déjà intégré une démarche d’écoconception.  C’est une preuve qu’il ne s’agit pas d’une tendance mais d’un enjeu concret de durabilité numérique. 

Cette stratégie est tout aussi responsable qu’innovante pour plus de performance technique et impact positif.

Quels sont les avantages de l’éco-conception web ?

Adopter cette initiative améliore les chiffres sur tous les plans : 

• 90% de réduction de poids possible sur les pages web grâce à l’optimisation des images, formats et compression.

• 47% abandonnent un site qui met plus de 2 secondes à charger, l’écoconception rehausse délai de 30% en moyenne.

• Un site éco-conçu consomme jusqu’à 5 fois moins d’énergie qu’un site traditionnel, réduisant significativement l’empreinte carbone.

• 25% d’augmentation du taux de conversion constatée sur les sites ayant adopté une approche d’écoconception.

• Internet représente 4% des émissions mondiales de CO₂, soit plus que l’aviation civile, chaque site optimisé contribue à réduire ce chiffre.

• 70% des testeurs préfèrent l’expérience utilisateur des sites éco-conçus, les jugeant plus clairs et efficaces.

• Économie moyenne de 30% sur les coûts d’hébergement grâce à la réduction des ressources serveur nécessaires.

🎯 Passez à l’action, étape par étape : la checklist

Pour faciliter la mise en place concrète des bonnes pratiques évoquées, nous avons créé un récapitulatif qui reprend les 19 étapes dans l’ordre.

✅ Gagnez en clarté.

✅ Suivez vos avancées pas à pas.

✅ Impliquez facilement vos équipes dans la démarche.

É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