5 pistes de travail pour un site éco-conçu avec WordPress

L’éco-conception web, c’est le nouveau sujet à la mode. Et l’écosystème WordPress n’y échappe pas. Véritable engagement pour les uns, déclaration d’intention pour d’autres, il n’en est pas moins que ce sujet a son importance aujourd’hui. Alors, sans tomber dans le Greenwashing web, voici quelques pistes de travail pour intégrer l’éco-conception dans votre démarche de conception d’un site WordPress.

Commençons par définir l’éco-conception web.
Et pour cela, nous appelons à la barre notre fidèle ChatGPT, dont nous reprendrons et complèteront la définition de l’éco-conception web.

L’éco-conception web ? Pour des sites Bio ?

L’éco-conception web vise à concevoir et exploiter des services numériques en minimisant leur impact environnemental sur tout le cycle de vie, sans sacrifier l’expérience utilisateur ni la valeur business du service. Elle combine sobriété fonctionnelle, technique (code, média, requêtes, cache), infrastructures efficientes (hébergement bas-carbone, CDN) et mesure d’empreinte (poids, énergie, CO₂e) pour réduire transferts, calculs et matériel, prolonger la durée de vie des équipements et ne traiter que l’utile.

Donc non, on ne parle pas là de sites web Bio. Plutôt de sites réalisés en conscience de ce qu’ils nécessitent comme énergie afin d’être accessibles partout dans le monde, 24h/24.

Les idées reçues sur l’éco-conception web

L’éco-conception web, car elle adopte le mode « éco », traine avec elle beaucoup d’idées reçues. Ces idées sont d’ailleurs souvent relayées par des voix sans réelle expérience en la matière. Parce que c’est souvent plus facile de crier quelque chose sur les toits que de chercher à creuser pour comprendre réellement de quoi on parle.

Petit florilège :

• L’éco-conception, ça donne des sites moches
  Comme si on avait besoin de parler d’empreinte carbone web pour rencontrer des sites horribles. Alors non, pas du tout. Les sites moches n’ont pas attendu l’éco-conception pour circuler sur la toile. Et une équipe de conception web qui connait son travail saura intégrer les contraintes techniques d’éco-conception dans sa réflexion afin de produire des sites de valeur pour ses clients.
• Un hébergeur « green » suffit
  Non. Un hébergeur Green, c’est bien. Encore faudra-t-il vérifier qu’on est sur des actes, et non sur des promesses. Mais concevoir un site, c’est aussi gérer des éléments techniques non relatifs au serveur (code, requêtes…) ou bien des médias, dont le poids est souvent les premiers postes d’émission (images trop lourdes, vidéos…).
• L’éco-conception, c’est pour des sites pas chers
  Oui, parce « éco » = économique ? Sauf que non. Faire mieux requiert des compétences plus que moyennes. Concevoir pour le mieux, Designer pour du mieux, Coder pour du mieux… et tout ça au service du business d’un client : autant de compétences qui se pratiquent à haut niveau. Cela ne veut pas dire qu’un site éco-conçu coûtera forcément plus cher qu’un site classique. Ça signifie simplement qu’il y a toutes les raisons pour qu’il ne coûte pas moins cher.

Comment éco-concevoir son site WordPress : 5 pistes de travail

[1] Un environnement technique maîtrisé

Commencez par opter pour un hébergement qui est capable de justifier ses engagements environnementaux ; Attention toutefois, cela ne doit pas se faire au détriment des ressources techniques mises à disposition.

Votre hébergeur peut également proposer une offre de CDN, utile si votre site doit être accessible rapidement par une cible internationale.

Enfin, prévoyez pour un plugin de cache, du type WP Rocket. Bon pour les performances, l’expérience utilisateur, et les requêtes au serveur, etc.

[2] Re-questionner les appels aux ressources externes

Autre élément technique (encore), mais avec un impact important.
On a souvent l’habitude d’utiliser des services externes, intégrés à notre site WordPress, afin d’exécuter des actions bien spécifiques :

• Youtube et cie. pour afficher des vidéos
• Hubspot, Mautic, et toutes les autres solutions CRM intégrables
• Zapier, N8N, etc, pour envoyer de la donnée du site vers des applications tierces et lancer des automatisations

Sur le principe, se servir d’un « spécialiste métier » pour éviter de re-coder à la main ce qui existe déjà, c’est bien. Très bien même. Tout re-coder soi-même en se disant qu’on va faire mieux que les meilleurs dont c’est le métier, c’est de l’énergie mal placée.

La question en éco-conception, c’est de se demander « pourquoi ». En matière d’appel aux ressources externes, privilégiez donc de connecter les ressources vraiment nécessaires à votre site. Oubliez les « on ne sait jamais, ça peut servir », et privilégiez si possible des solutions légères (exemple de l’impact total d’un plugin Hubspot, pour afficher un seul formulaire sur votre site).

[3] Une conception avec l’éditeur de blocks

Travaillez avec Gutenberg : l’éditeur de blocks.

Déjà, parce que c’est l’éditeur natif : vous évitez donc un énième plugin (bon pour les performances) ainsi qu’une dépendance métier externe avec un Page Builder tiers, dont vous devrez sans doute payer la version Premium chaque année.

Ensuite, Gutenberg est aujourd’hui une solution mature. Fini les déboires des débuts, la communauté est importante et les possibilités sont aujourd’hui aussi illimitées qu’avec n’importe quelle autre solution. Tout en restant léger, en générant du code sémantique, et en proposant une expérience d’édition vraiment satisfaisante.

Enfin, la question de Gutenberg est un très bon test : elle vous aidera à détecter les prestataires WordPress « à la page » de ceux qui aiment « camper dans leurs habitudes » sans se remettre en question. Et ça, ça détermine la destination que vous serez capable d’atteindre avec votre partenaire WordPress.

Gutenberg, du Design au Développement.

Gutenberg, c’est la matérialisation de l’approche modulaire : de la conception au Design en passant par le Développement su site, concevoir avec Gutenberg amène à penser en briques fonctionnelles et graphiques, qui composent tout le site. Plus de sens, plus de rationalisation, et un Design par pour autant limité, à condition de connaître son sujet. C’est comme ça qu’on travaille aujourd’hui.

Last but not Least : exploitez les Blocks natifs avant tout. Avec l’éditeur de blocks, on est tenté de vouloir créer des blocks personnalisés à tout va. Retenez-vous, et utilisez les blocks natifs et leurs possibilité à leur maximum. Ce n’est qu’à ce moment que nous pourrons évoquer des blocks sur-mesure.

Sur ce dernier point, ma Masterclass de Design avec Gutenberg est là pour vous aider à tirer le meilleur parti de l’outil.

[4] Une stratégie de média efficace

Les images et la vidéo, ce sont les fléaux de l’éco-conception. Ça ne veut pas dire qu’il faut s’en passer : il faut simplement penser le Design de son site de manière plus maline.

Quelques exemples :

• Concevoir la charte de son site avec le plus d’éléments vectoriels possibles :
  intégrables en CSS ou via des SVG optimisés
• Installer une extension d’optimisation d’images sur son site, Imagify par exemple, et utiliser les formats les plus performants (webp)
• Évitez d’uploader des images trop volumineuses (coucou l’image qui fait 3000px de large… pourquoi ?!), vous encombrez votre espace serveur pour rien
• Utilisez les intégration Youtube (et autre) finement : on évite les pages pleines de vidéos externes

[5] Repenser l’animation des sites web

Ahhh, l’animation des sites. Alors oui, l’animation et les micro-interactions, ce sont les petits éléments qui confèrent une dimension supérieure à un site web. On rend le tout plus désirable, plus moderne, et c’est important.

La grande question quand on cherche à éco-concevoir, c’est « qu’est-ce qu’on anime » et « dans quelle mesure l’animation consomme comparé à ce qu’elle apporte ».

Ainsi, en éco-conception web, on évitera les sites « expérience » avec des transitions de page monstrueuses, des animations d’éléments lourds et complexes. On privilégiera les micro-interactions réalisables en CSS (ou avec un minimum de JavaScript) et on pensera des animations malines (qui ont vraiment de l’impact).

Enfin, lorsqu’on aura besoin de vidéos, on se tournera vers des solutions plus légères, comme le Lottie par exemple. En gros, ce sont des animations « vectorielles », donc uniquement en code, et sans bitmaps : léger, fluide, performant. Rendez-vous sur cette page pour visualiser quelques exemples.

Comment mesurer l’impact environnemental de mon site ?

Afin d’évaluer l’impact environnemental actuel de votre site, ou bien d’auditer l’état d’un site qu’un•e prestataire est en train de vous réaliser, vous pouvez vous rendre sur ces différents sites. Et par souci de transparence, je vous donne même les score du site de Bter, à la date de rédaction de cet article.

• Website Carbon Calculator
  Le site Bter obtient la note A sur une échelle de A+ à F
• Éco Index
  Le site Bter obtient la note C sur une échelle de A à G
• GreenIT Analysis
  Le site Bter obtient la note B sur une échelle de A à G
• Kastor
  Le site Bter obtient la moyenne de 87/10
• Yellow Lab
  Le site Bter obtient la note A
• GT Metrix
  Le site Bter obtient la note C sur une échelle de A à F
• Lighthouse / Pagespeed
  Le site Bter obtient la moyenne de 95/100 en desktop et de 91/100 en mobile

En termes d’inspirations, vous pouvez aussi vous rendre sur ce site afin de découvrir des exemples de sites web éco-conçus, avec leur score : la preuve qu’on peut faire de l’éco-conception en restant beau, performant, et sans forcément chercher la note de 100 à tous les étages.