Eco-conception Wordpress : Comment réduire l'impact environnemental de son blog

Éco-conception WordPress : diminuer l’impact d’un blog

Quoi de mieux pour inaugurer ce blog que de parler de l’éco-conception de ce dernier ? Dans ce premier article, je vais vous expliquer comment j’ai essayé de réduire au maximum l’impact écologique de mon blog, en vous donnant quelques conseils pour aller encore plus loin dans l’éco-conception WordPress.

Pour ceux qui ne me connaissent pas, je travaille depuis plusieurs années en tant que Designer dans le secteur industriel. L’éco-conception est une problématique au cœur de mon travail. Je suis donc forcément tombée sur la communauté GreenIT. Créée en 2004, GreenIT.fr est la communauté des acteurs du numérique responsable qui s’intéressent, entre autre, à la sobriété numérique,à l’écoconception des services numériques, à la lowtech, et plus globalement à un avenir numérique alternatif.

En m’inspirant de leurs bonnes pratiques, voici comment j’ai réussi à diminuer au maximum l’impact environnemental de mon blog !

Article mis à jour en fonction des nouvelles actions prises pour diminuer encore plus l’impact.
Dernière mise-à-jour : 04/03/2021

Hébergement

Mon blog est actuellement hébergé chez l’hébergeur français OVH en solution mutualisée. Pour imager, plusieurs sites sont hébergés sur le même serveur que le mien. Comme mon blog ne va grimper au plafond niveau visites, un hébergement mutualisé est largement suffisant pour moi. Il permet de n’alimenter qu’un seul serveur pour plusieurs sites, donc d’économiser en énergie, en refroidissement,…

Par contre, OVH n’est pas l’hébergeur le plus « green » qui soit, mais je suis cliente chez eux depuis plusieurs années. Ils travaillent cependant à la réduction de consommation d’énergie :

En 2004, OVH a développé en interne une technologie innovante de refroidissement liquide des serveurs. En 2008, plus de 43 000 serveurs sont ainsi refroidis avec un mix watercooling 70%, et climatisation 30%. Le plus grand avantage est le PUE proche de 1,30. En effet, pour 100W nécessaires pour faire fonctionner le serveur, le datacentre consomme uniquement 30W pour les climatisations, les pompes et les pertes sur les transformateurs et onduleurs.

Document Green IT, OVH

Il est tout de même possible d’aller beaucoup plus loin en choisissant des hébergeurs alimentés par l’énergie renouvelable. Voici une liste de ceux que j’ai pu rencontrer pendant mes recherches :

  • Infomaniak : Hébergeur suivant les normes ISO 14001, 50 001, alimenté à 100% par l’énergie renouvelable
  • Hostpapa : Hébergeur alimenté à 100% par l’énergie renouvelable

Optimisation des images & Lazy Load

Sur mon blog, vous ne verrez que très peu d’images, et plus particulièrement dans les articles. En effet, les images en haute résolution représentent une grande charge en terme de temps de chargement, et donc de consommation d’énergie. Compresser les images et diminuer leur nombre allège cette charge. Vous pouvez compresser les images directement à partir de Photoshop (Exporter pour le web). Il en est de même concernant les vidéos, qui seront rarement présentes. Dans le cas où vidéo il y a, pensez à désactiver la lecture automatique.

Toujours à propos des images, j’ai mis en place ce que l’on appelle un « Lazy Load« . Cela permet de ne charger les images ou autres médias que lorsque nécessaire. Par exemple, dans un article contenant des images, ces dernières ne se chargeront qu’au fur et à mesure du défilement. Ainsi, si un utilisateur ne défile pas jusqu’à la fin de l’article, toutes les images n’ont pas besoin d’être chargées. L’énergie est économisée, et le blog gagne en performances avec un temps de chargement plus rapide.

Mise en cache

Un gros point dans l’éco-conception d’un WordPress est la mise en place d’un cache. La mise en cache permet de télécharger sur le poste d’un visiteur des éléments de page partagés (comme par exemple, la feuille de style du site, les scripts, les images,…). Ainsi, à chaque fois qu’un visiteur revient sur le site, ces données sont directement récupérées en local, plutôt qu’avec une nouvelle requête sur le serveur. Le transfert de données et le nombre de requêtes est diminué, améliorant les performances du site.

Optimisation de WordPress

Probablement la partie qui m’a demandé le plus de temps. Mon blog fonctionne via WordPress. C’est un CMS que je connais plutôt bien et que je trouve très pratique pour la gestion d’un blog. Malgré tout, l’utilisation d’un CMS est loin d’être le plus green possible. En effet, avoir un CMS revient un peu à avoir du code par dessus du code. Cependant, il est possible d’optimiser tout ça et de faire de l’éco-conception WordPress.

La partie la plus compliquée : trouver le bon thème. Tout simplement car il me fallait trouver un thème me plaisant esthétiquement, minimaliste, mais pas trop lourd niveau scripts. Beaucoup de thèmes utilisent beaucoup de scripts pour permettre une personnalisation très profonde. J’ai fini par me poser sur le thème Astra à l’esthétique très minimaliste, aux performances excellentes, mais surtout très léger. Pour aller encore plus loin, je suis tombée sur deux thèmes éco-conçus au cours de mes recherches :

  • Susty : Un thème 10 à 40 fois plus léger que la moyenne… Cependant, il présente pour moi des régressions importantes en terme d’UX et d’ergonomie. Il vous plaira tout de même comme base de travail si vous êtes développeur ou que vous aimez bidouiller pour l’adapter à vos besoins.
  • Neptune : Un thème éco-conçu par une agence bordelaise. Déjà beaucoup plus sympa côté UX et ergonomie, je le trouve cependant plus adapté pour un site professionnel.

Evidemment, j’ai supprimé tous les thèmes non-utilisés pour ne garder que celui actif.

Au cœur de l’éco-conception WordPress se trouve la chasse aux extensions et plugins. Leur accumulation a un impact très négatif sur les performances du site et au niveau environnemental. Aujourd’hui, il n’y a « que » 6 extensions / plugins installés sur mon blog, qui me sont essentiels. Pour optimiser encore plus de ce côté, vous pouvez directement écrire le code de la fonction que vous souhaitez dans le fichier functions.php.

Je passe ensuite à la minification de mes codes CSS et Javascript, en me servant d’outils comme Unused CSS ou Minifier.org. En effet, chaque ligne de code a un impact. En supprimant les commentaires présents dans le code, les déclarations inutiles, ou encore les espaces… cela diminue l’impact du site !


Voici ce que j’ai mis en place pour optimiser mon blog. Vous pouvez tester l’impact environnemental de votre blog via des outils comme EcoIndex ou encore Website Carbon.

6 réflexions sur “Éco-conception WordPress : diminuer l’impact d’un blog”

  1. J’adore !! Je suis Brigit de l’EDC Drancy association avec qui vous avez adopté Thelma. On a discuté sur Twitter.
    Je n’ai fait que survoler l’article mais je viendrais le relire plus en détail. Je connais bien WP désormais (blog de l’asso) mais j’ai encore des lacunes.
    Des choses à apprendre j’ai cru voir ça .. ;o)

    Mais c’est très bon. Parole d’experte en SEO.
    Juste un bémol, les rubriques sans contenu c’est pas top par contre. Pour Google en particulier.
    Mieux vaut les désactiver que les laisser en ligne sans contenu.
    J’aime le concept mais forcément … Vous avez adopter un chat avec notre association
    lol

    1. Bonjour Brigit et encore merci du partage sur Twitter !
      Je prends note de votre conseil sur les rubriques sans contenu, je ne les réactiverai que lorsque contenu il y aura 🙂
      Nous vous remercions pour le super travail que vous faites avec l’association, mon conjoint et moi sommes vraiment ravis d’avoir adopté avec vous et nous continuerons de partager les nouvelles annonces d’adoption, en espérant que toutes ces boules de poils puissent trouver un nouveau foyer 🙂

  2. J’ai adoré ton article qui est très instructif : l’écologie est quelque chose de très important pour moi, aussi tu m’as donné envie de faire un check up total de mon site pour le rendre moins gourmand en énergie et moins producteur de CO2.
    Tu donnes déjà pas mal de clefs et c’est chouette, je vais aller voir les thèmes que tu as conseillés. Et côté image moi c’est l’abus, j’en ai trop avec plein de titres caca (à base de chiffres ou de lettres sans aucun sens…).
    Hâte de lire tes prochains articles et bienvenue dans la blogosphere.

    1. Merci beaucoup pour ton retour !
      Tu peux toujours garder les images, mais en diminuant leur taille avec des plugins comme WP-Optimize tu pourras tout optimiser d’un coup (sans passer image par image… 😀 )
      Pour les thèmes, n’hésites pas à regarder du côté de ceux qui sont classés « light weight » ; sans être spécialement éco-conçus, ils sont très légers (comme Astra que j’utilise) donc te permettront d’avoir un thème performant et moins gourmand par extension.

    1. Merci à toi pour ton commentaire !

      Je vais essayer de mettre à jour cet article régulièrement avec d’autres pratiques que j’ai pu intégrer à mon blog, mais n’hésites pas à regarder du côté du collectif GreenIT ou encore Designer Ethiques qui viennent de sortir un guide sur l’éco-conception. Malheureusement, ce n’est pas axé WordPress, mais cela peut donner de bonnes idées 😀

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.