La création de sites Internet plus respectueux de l’environnement est une préoccupation grandissante, j’ai de plus en plus de clients qui abordent le sujet, l’évoque dans leurs cahiers des charges. L’éco-conception vise à réduire l’empreinte écologique d’un site, en essayant de ne pas nuire à sa qualité ni ses performances. WordPress, utilisé par plus de 40 % des sites web, permet de mettre en place certaines bonnes pratiques mais peut aussi assez vite permettre de faire des sites voraces. Et on est souvent tenté de faire des sites avec des images de très bonne qualité, des effets d’animations, des vidéos un peu inutiles. Il est parfois assez difficile de juger si tel ou tel effet sera vorace en énergie ou pas, mais il existe des outils comme le Yellow Lab Tools recommandé par la mission interministérielle sur le numérique écoresponsable pour nous aider à y voir plus clair.
Pourquoi adopter l’éco-conception ?
Un site web consomme de l’énergie, non seulement lorsqu’il est consulté (serveurs, transmission de données), mais aussi pendant son développement et sa maintenance. Cette consommation croît avec :
- le poids et la taille des médias (images, vidéos, audios, fichiers pdf…)
- la complexité technique,
- l’optimisation du code et des requêtes,
- le design général.
L’éco-conception vise à optimiser ces aspects pour limiter l’impact environnemental tout en garantissant une expérience utilisateur fluide et efficace.
Les leviers d’éco-conception avec WordPress
Les hébergements éco-responsables
Il existe des hébergeurs « engagés » dans la transition écologique : alimenté par des énergies renouvelables, avec une politique de refroidissement et de recyclage des serveurs. De nombreux hébergeurs avancent l’argument de leur usage de l’électricité verte. J’en soupçonne un certains nombres de faire surtout du green-washing.
Les plugins inutiles
Chaque plugin ajoute du code plus ou moins utile. Il faut faire le tri et n’installer que l’indispensable, en privilégiant les plugins bien optimisés et en supprimant ceux dont on n’a pas forcément besoin.
Optimiser les images et médias
C’est un des points les plus facile à mettre en œuvre, des images mal gérées peuvent facilement faire exploser le poids d’un site. J’ai fait un article ici sur ce sujet. Aujourd’hui il faut utiliser les formats comme le WebP ou l’AVIF, limiter les dimensions et les compresser au mieux. Réduire l’usage de vidéos et préférer de les héberger sur des plateformes dédiées comme Youtube en essayant d’envoyer à ces plateformes un fichier déjà allégé et d’une dimension suffisante.
Minimiser le code et les requêtes
Sur WordPress il existe des solutions comme WP Rocket ou Autoptimize pour gérer ces optimisations qui combinent et minifient les fichiers CSS et JS, désactivent les scripts inutiles sur certaines pages, et activent la mise en cache.
Sobriété graphique
L’un des piliers de l’éco-conception réside dans le design : un graphisme sobre, des animations légères et une limitation des vidéos permettent de réduire le poids des pages et donc leur empreinte carbone.
Contraintes graphiques
- Moins de couleurs et de polices : Limiter le nombre de couleurs et privilégier les polices système (Arial, Verdana, Trebuchet MS, Times New Roman…) pour éviter les appels externes ou l’ajout de fichier parfois lourds.
- Images optimisées : Bannir les grandes images décoratives inutiles ; privilégier les illustrations vectorielles (SVG) légères.
- Mises en page claires et hiérarchisées : On évite la surcharge graphique, les grandes images de fonds différentes sur toutes les pages par exemple.
Sobriété dans les animations
- Animations légères ou absentes : Les animations CSS ou JavaScript consomment des ressources. Limiter leur usage à ce qui est vraiment nécessaire pour l’expérience utilisateur, même si c’est extrêmement tentant de faire des effets d’animations.
- Suppression du « superflu » : Évitez les parallaxes, sliders automatiques, et autres effets visuels inutiles.
Vidéo : modération et alternatives
- Poids conséquent : Une vidéo peut peser plusieurs dizaines de Mo et consommer beaucoup de bande passante.
- Alternatives : Les GIF ou WebP optimisés ou des animations SVG légères, ou optez pour une miniature cliquable qui ouvre la vidéo en externe (YouTube, Vimeo).
- Optimisation : Si la vidéo est indispensable, on peut désactiver l’autoplay pour éviter de la jouer, et proposer des versions adapatés à la résolution du terminal.
Usage de l’IA : génération de code et d’images
L’intelligence artificielle est de plus en plus sollicitée pour générer du code, créer des visuels ou optimiser des contenus. Si ces outils sont puissants et pratiques, ils ont également un coût écologique non négligeable.
Les coûts énergétiques de l’IA
Les IA génératives (comme Midjourney, DALL·E, ChatGPT) reposent sur des modèles massifs nécessitant des centres de données très gourmands en énergie pour :
- l’entraînement initial,
- mais aussi chaque requête et génération.
Générer une image par IA va consommer beaucoup plus d’énergie et d’eaux qu’une photo faite avec son téléphone.
Vers un web plus responsable
Un site Internet léger et bien conçu sera non seulement plus écologique, mais aussi plus rapide et plus agréable pour les visiteurs. C’est un cercle vertueux qui bénéficie à tous : la planète, les utilisateurs, et le SEO !
Même si j’ai bien conscience de tout ça, c’est difficile d’être un modèle dans ce domaine, ma culture graphique, la pression des clients et mon intérêt pour les nouveaux outils sont parfois en contradiction avec ces valeurs. J’obtiens tout de même une note de 93/100 sur Yellow Lab Tools https://yellowlab.tools/result/h7tp47454b pour mon site Internet.
