Internet consomme une quantité massive d’électricité et d’autres ressources. Cette tendance ne risque pas de s’inverser avec l’accroissement des sites web.
On a tous un rôle à jouer pour alléger son empreinte carbone d’Internet. Il n’est pas nécessaire de tout reconstruire, il suffit de repenser.
L’éco-conception web vise à créer des sites plus performants et moins énergivores. En adoptant des pratiques écoresponsables, conciliez expérience utilisateur et respect de l’environnement.
Explorons les principes essentiels de cette approche et découvrons comment elle peut être mise en œuvre efficacement.
🎯 Envie de passer de la théorie à l’action ? Retrouvez notre checklist des 19 étapes clés pour mettre en place un site éco-conçu et démarrez concrètement votre démarche.
- Par où commencer pour avoir un site éco-conçu ?
- 1. Simplifier le code source : 30% à 50% de moins en temps de chargement.
- 2. Employer les formats d'image pour le web : 3 à 8 Mo de moins sur le poids de votre page.
- 3. Diminuer les requêtes HTTP : économisez 2000ms de chargement
- 4. Opter pour un hébergement vert : 30 % à 50% de moins en émission de CO₂.
- 5. Améliorer l’accessibilité et la rapidité : plus de conversion et du SEO
- L’éco-conception web, c’est quoi ?
Par où commencer pour avoir un site éco-conçu ?
Pour commencer à rendre votre site internet plus écologique, voici 3 étapes concrètes à initier :
a. Faites un audit énergétique
Ce contrôle permet de visualiser la consommation énergétique actuelle de votre site et de définir des objectifs clairs pour optimiser les performances et minimiser l’empreinte carbone.
| Astuce : Mesurer régulièrement votre site pour suivre son évolution. |
Outils :
- EcoDesign.dev : Mesure l’empreinte carbone, la consommation d’énergie et d’autres impacts environnementaux.
Lien : EcoDesign
- Google PageSpeed Insights : Evalue la vitesse et fournit des recommandations pour améliorer la performance et réduire la consommation d’énergie.
Lien : PageSpeed Insights
- EcoIndex : Calcule l’empreinte écologique du site, en prenant en compte l’optimisation de l’énergie, les ressources utilisées et la performance.
Lien : EcoIndex
b. Mettre à jour régulièrement le site internet
Élaborez une routine de maintenance qui inclut l’optimisation des fichiers, la réduction des scripts et l’élimination des ressources inutilisées.
c. Former son équipe
Si vous travaillez avec des développeurs ou des designers, il est primordial qu’ils soient sensibilisés aux enjeux d’un site web écologique.
Mettez en place des formations ou encouragez-les à participer à des discussions autour des pratiques écoresponsables.
1. Simplifier le code source : 30% à 50% de moins en temps de chargement.
Un code trop complexe ou lourd consomme plus de ressources.
En éliminant les redondances, en supprimant les fonctions inutiles et en optimisant chaque ligne de code, un site fonctionne de manière plus fluide, avec une moindre sollicitation des serveurs.
Cela abaisse de 30 % à 50 % le temps de chargement de votre page pour gagner facilement entre 1 à 3 secondes.
Pourquoi simplifier le code ?
Cette action renforce de manière significative l’expérience utilisateur.
Un chargement rapide consomme peu de bande passante et diminue les requêtes serveur.
| Selon Google, une page passant de 3 secondes à 2 secondes diminue son taux de rebond d’environ 30 %. |
Comment simplifier le code source ?
Minifier les fichiers CSS et JavaScript.
- Installer le plugin WP Rocket ou Autoptimize pour WordPress.
- Activer l’option “minification CSS/JavaScript” dans les réglages du plugin.
- Enregistrer et vider le cache pour appliquer les optimisations.
Pour d’autres techniques détaillés, consultez notre article sur la minification.
Combiner plusieurs fichiers CSS et JavaScript en un seul fichier
Pour WordPress :
- Installer et activer Autoptimize ou WP Rocket.
- Aller dans Réglages → Autoptimize (ou WP Rocket → Optimisation des fichiers).
- Cocher les cases suivantes :
- Combiner les fichiers CSS
- Combiner les fichiers JavaScript
- Enregistrer et vider le cache.
Découvrez aussi notre article qui vous apprend comment unifier les fichiers pour un site web écoresponsable.
Enlevez les scripts inutilisés ou différez leur chargement.
- Identifier les scripts inutilisés à l’aide de Chrome DevTools
- Aller dans Coverage → Start instrumenting coverage and reload page
- Détecter les scripts avec un fort pourcentage de code inutilisé.
- Effacer ou désactiver les scripts inutiles :
- Supprimer le chargement des scripts inutiles dans votre fichier HTML :
<!– <script src=”script-inutile.js”></script> →
Sur WordPress, désactivez les plugins inutiles ou les fonctions chargées inutilement.
| 💡 Les conseils d’Ethiko Employez des outils comme WP Rocket ou Autoptimize sur WordPress pour automatiser ces tâches efficacement. Une optimisation simple d’un site e-commerce moyen fait passer de 4 secondes à moins de 2 secondes le temps de chargement, c’est-à-dire, un gain réel de 50 %. En SEO, Google indique que chaque seconde de chargement économisée génère jusqu’à 7 % de conversion supplémentaire. |
Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web
2. Employer les formats d’image pour le web : 3 à 8 Mo de moins sur le poids de votre page.
Les formats d’image WebP, JPEG compressé ou SVG abaissent de 3 à 8 Mo le poids moyen d’une page web classique.
Un site e-commerce avec 10 images de 1 Mo chacune passe de 10 Mo à seulement 3 Mo grâce au WebP.
Cela restreint le temps de chargement de 2 à 4 secondes et accroît ses performances SEO.
Pourquoi choisir le format WebP, JPEG compressé ou SVG ?
On gagne 1 à 3 secondes de moins sur mobile par un chargement rapide.
Ce qui baisse la consommation de bande passante et de l’empreinte carbone.
L’expérience utilisateur et le référencement naturel s’améliorent. Google privilégie les sites rapides.
Comment convertir des images WebP, JPEG compressé ou SVG ?
- Utiliser des outils comme TinyPNG, Compressor.io ou des plugins WordPress comme Imagify ou Smush.
| Outil / Plugin | Formats pris en charge | Manipulation pour convertir / compresser | Utilisation recommandée |
| TinyPNG | PNG, JPEG → PNG, JPEG compressé | Uploader l’image → Télécharger l’image compressée | Compression rapide des images ponctuelles |
| Compressor.io | PNG, JPEG, GIF, SVG → PNG, JPEG compressé, SVG | Uploader l’image → Choisir le niveau de compression → Télécharger | Compression personnalisée avancée |
| Imagify (plugin WP) | JPEG, PNG → JPEG compressé, WebP | Installer le plugin → Activer conversion automatique vers WebP ou JPEG compressé dans les réglages | WordPress, compression automatique globale |
| Smush (plugin WP) | JPEG, PNG → JPEG compressé, WebP | Installer le plugin → Activer optimisation automatique (compression WebP/JPEG) dans les réglages | WordPress, compression automatique simple |
- Utiliser le format vectoriel SVG pour les icônes, logos et illustrations simples.
| Étape | Manipulation | Outil recommandé |
| 1. Créer / Convertir | Créer ou convertir l’image en SVG | Adobe Illustrator, Inkscape, Figma |
| 2. Optimiser | Réduire le poids du SVG | SVGOMG, SVG Optimizer |
| 3. Intégrer | Ajouter le SVG au site (<img> ou HTML) | <img src=”image.svg”> ou <svg> |
Vous souhaitez vous faire accompagner ? Contactez notre agence d’éco conception web
- Activer le lazy loading ou chargement différé des images pour ne charger que celles visibles à l’écran.
→ Installer Lazy Load by WP Rocket ou Smush pour WordPress.
→ Aller dans Réglages → Lazy Load ou Smush → Lazy Load.
→ Cocher : activer le lazy loading des images et enregistrez.
Lisez aussi notre article sur comment utiliser le lazy loading pour aller plus loin.
3. Diminuer les requêtes HTTP : économisez 2000ms de chargement
En diminuant les requêtes HTTP comme les fichiers CSS, JS, images et polices, vous obtenez jusqu’à 2 secondes sur le temps de chargement.
Par exemple, un site e-commerce avec 120 requêtes HTTP passe à 70 requêtes après optimisation, économisant 30 % de bande passante.
Pourquoi alléger les requêtes ?
La performance s’accroît avec le peu de requêtes à faire. Résultat : moins de temps de traitement serveur.
| Un site passant de 90 à 60 requêtes HTTP abaisse son temps de chargement de 2000 ms à 1500 ms. |
L’impact environnemental est minimisé : peu de requêtes, c’est moins de données transférées, donc moins de consommation de bande passante et d’énergies.
Le SEO s’améliore et le score PageSpeed augmente de 5 à 10 points.
Comment baisser les requêtes ?
- Unifier les fichiers CSS/JS : fusionner les fichiers ( 10 fichiers deviennent 2 fichiers uniques).
| Méthode | Manipulation | Outil recommandé |
| 1. Avec un plugin WordPress | – Installer Autoptimize ou WP Rocket – Accéder aux réglages du plugin – Activer “Combiner les fichiers CSS” et “Combiner les fichiers JS” – Enregistrer et vider le cache | Autoptimize, WP Rocket |
| 2. Manuellement (sites statiques) | – Créer un fichier style-combined.css – Copier le contenu des 10 fichiers CSS dans ce fichier- Créer script-combined.js – Copier le contenu des 10 fichiers JS dans ce fichier – Intégrez-les dans le HTML : <link rel=”stylesheet” href=”style-combined.css”> <script src=”script-combined.js” defer></script> | Éditeur de code (VS Code, Sublime Text) |
| 3. Avec un outil d’automatisation | – Créer un fichier de configuration- Lister les fichiers CSS/JS à combiner – Exécuter la tâche de build pour générer le fichier unique | Gulp, Webpack, Parcel |
- Activer la mise en cache
Les éléments statiques ne seront chargés qu’une seule fois.
→ Définir les délais selon la nature du contenu :
Contenu statique (images, CSS, JS) : long (ex : 30 jours à 1 an)
HTML dynamique : court (ex : quelques minutes ou heures)
→ Pour les ressources statiques, optimisez les par l’utilisation d’un CDN.
| Étape | Manipulation | Outil recommandé |
| 1. Choisir un CDN | Sélectionner un fournisseur CDN adapté aux fichiers statiques. Exemples : Cloudflare, BunnyCDN, Fastly | Cloudflare, BunnyCDN |
| 2. Créer une Pull Zone | – Créer une Pull Zone pour les fichiers statiques (CSS, JS, images) – Spécifier le dossier contenant les ressources statiques | BunnyCDN, Fastly |
| 3. Réécrire les URLs des ressources statiques | – Modifier les URLs des fichiers statiques | Éditeur de code (VS Code, Sublime Text) |
| 4. Configurer la mise en cache des ressources statiques | – Définir une durée de cache longue (1 an) pour les fichiers statiques dans le tableau de bord du CDN | Cloudflare, BunnyCDN |
| 5. Vérifier le fonctionnement | – Vérifier que les ressources statiques sont servies par le CDN – Analyser les performances avec GTMetrix ou Pingdom | GTMetrix, Pingdom |
Pour en savoir davantage sur le CDN, découvrez notre article sur ses pouvoirs cachés.
4. Opter pour un hébergement vert : 30 % à 50% de moins en émission de CO₂.
L’hébergement vert consiste à utiliser des serveurs alimentés par des énergies renouvelables : éolien, solaire, hydraulique et des infrastructures à faible consommation énergétique.
| Chez Infomaniak, le choix d’Ethiko en hébergement vert, un site e-commerce passe de 250 kg de CO₂/an en hébergement classique à 120 kg de CO₂/an, soit une réduction de 52 %. |
Pourquoi choisir un hébergement vert pour un site écoresponsable ?
Un hébergement vert baisse les émissions de CO₂ de 40 % : soit de 20 kWh à 12 kWh par jour.
Écologique, il optimise les performances des serveurs avec des disques SSD et des CDN pour accélérer le temps de chargement des pages.
Les entreprises consolident leur image en affichant des certifications écologiques (GreenIT, ISO 14001) et bénéficient d’un SEO optimisé.
Comment sélectionner votre hébergeur vert ?
| Critère | Description | Exemples d’hébergeurs |
| Énergie renouvelable | Utilisation d’énergies vertes : solaire, éolien et hydraulique. | GreenGeeks, SiteGround |
| Efficacité énergétique | Serveurs à faible consommation et data centers optimisés | HostPapa, Infomaniak |
| Compensation carbone | Investissement dans des projets environnementaux pour compenser | GreenGeeks, SiteGround |
| Certifications écologiques | Possession de labels comme ISO 14001, Energy Star, BREEAM | Infomaniak, HostPapa |
| Recyclage des équipements | Pratique de recyclage des serveurs et réduction des déchets | GreenGeeks, SiteGround |
Pour partir plus loin, lisez notre article sur les 19 étapes faciles pour mettre en place un site web écoresponsable. Vous y trouverez un paragraphe dédié à l’hébergement vert.
5. Améliorer l’accessibilité et la rapidité : plus de conversion et du SEO
Comment avoir une bonne accessibilité ?
- Mettre à disposition un design responsive :
Assurez-vous que votre site s’adapte aux mobiles et autres appareils, indépendamment de l’appareil utilisé.
- Utiliser des outils d’accessibilité :
Ajoutez des textes alternatifs pour les images, des contrastes et des titres clairs, en particulier pour les personnes en situation de handicap (malvoyants, malentendants).
- Améliorer la structure du site :
Structurez votre navigation web avec clarté et logique avec des menus de façon intuitive et cohérente.
Proposez des alternatives de navigation : raccourcis clavier fonctionnels, balisage sémantique pour lecteurs d’écran, liens d’évitement, et focus visibles.
| 💡 Les conseils d’Ethiko Pour des contrastes suffisants : usez des couleurs avec un contraste plus élevé pour améliorer la lisibilité (Texte : #000000 sur fond : #f0f0f0) → WebAIM Contrast Checker pour tester la conformité. Organisez les titres pour une meilleure hiérarchie (balises H1, H2, etc.) Ajoutez des sous-titres pour les vidéos afin d’aider les malentendants. Mettez des styles CSS pour que l’élément sélectionné soit bien visible. |
Découvrez aussi les 11 points d’accessibilité numérique lors de la création d’un site.
L’éco-conception web, c’est quoi ?
Aussi appelée Green UX, cette pratique désigne la création de sites internet en minimisant leur impact environnemental grâce à des gestes plus écologiques.
Le principe est d’optimiser les performances du site internet, diminuer les ressources nécessaires, choisir le bon hébergeur et opter pour un design responsable.
