Eco conception de son site web – Comment j’ai relevé le défi avec WordPress ?


Lecture 6 min

L’éco conception de son site web peut être complexe à réaliser, surtout si, comme moi, l’on ne maîtrise pas les langages de développement Web. Comment ai-je relevé le défi avec WordPress et sans coder ?

Lorsque j’ai eu l’idée de créer ce site web, l’éco concevoir n’était pas dans mes préoccupations. Je pensais qu’un simple site vitrine tel que celui-ci ne pouvait pas faire de mal, que son design épuré devait suffire à le rendre peu impactant. Je me suis fait plaisir, j’ai ajouté des photos, des pictos, des widgets sympas, du texte partout…

Jusqu’à ce que je découvre ecoindex.fr. C’est un outil en ligne gratuit qui permet de tester l’impact environnemental de son site web. Le choc a été rude… Mon mini site, mignon tout plein, faisait partie des mauvais élèves, puisqu’il était situé en-dessous de la médiane, avec un bon score C. Les impacts environnementaux d’un site web peuvent avoir de nombreuses sources, mais trois d’entre elles sont particulièrement marquantes : le poids de la page, la complexité de la page, et le nombre de requêtes HTTP nécessaires pour charger la page. Mon site n’était bon dans aucun des trois.

J’ai alors décidé de l’améliorer pour en diminuer l’impact environnemental. J’ai complété mon audit avec l’outil GTmetrix, qui permet aussi de tester la performance de son site web, et propose en plus des recommandations d’amélioration détaillées.

Le design est le premier pas vers l’éco conception de son site web…

En lisant l’article « Comment éco-concevoir un site web« , du blog « Le bon digital », j’ai vite compris que la clé d’un site web écologique, c’est sa frugalité. A commencer par l’arrière-plan. Le fond noir demande moins d’énergie qu’un pixel blanc pour s’afficher. J’ai donc remplacé mon fond blanc par un fond quasi-noir (un noir total aurait créé trop de contraste).

Puis, j’ai réduit le nombre de fonctionnalités et d’animations superflues pour privilégier un contenu plus statique. Par exemple, au lieu de créer un visualiseur d’images sliders (cliquer pour faire défiler), j’ai choisi d’afficher les images seules. J’ai aussi choisi de ne pas intégrer de vidéo, puisque ces mêmes vidéos sont déjà en ligne (publiées par mes précédents employeurs ou collègues). Un simple lien hypertexte suffit donc.

Comment réduire la taille des photos pour diminuer le poids de son site web ?

Venant du monde de la vidéo, je suis sensible à une belle photographie, et je sais l’importance qu’ont les images pour une bonne expérience utilisateur. Cela dit, la photo pèse très lourd sur une page web. Selon mon audit GTmetrix, mes photos prenaient à elles seules la moitié du poids total de ma page. Il fallait donc que je fasse quelque chose.

Je connaissais déjà l’outil Shortpixel, qui permet de réduire le poids d’une image sans en dégrader la qualité. J’ai voulu aller plus loin, et j’ai tenté plusieurs choses. J’ai redimensionné les images pour qu’elles s’adaptent aux différents écrans (ordi/tablette/mobile), réduit les couleurs et la résolution avec Photoshop à la manière de Low Tech Magazine. J’ai aussi supprimé les métadonnées inutiles de l’image grâce à ImageOptim. Ces techniques sont très utiles, mais apparemment pas meilleures que Shortpixel (ou alors je m’y prends mal…).

J’ai alors fait un choix plus radical, et je me suis posé la question de l’utilité de mes images. Finalement, pour un site tel que celui-ci, la plupart des photographies sont illustratives et n’apportent pas de réelle plus-value si ce n’est de rendre la lecture plus agréable. Et pour cela, je pense qu’un dessin peut avoir autant d’impact. J’ai alors décidé de ne conserver qu’une photographie indispensable, et d’illustrer le reste de mes contenus avec des dessins.


Pourquoi les dessins ou les pictogrammes sont-ils plus légers que les photographies ? Car ils peuvent être exportés en format SVG, qui est un format de dessin vectoriel extrêmement léger sans perte de qualité.


Eco conception de son site web avec WordPress, par quoi commencer ?

La première chose à faire lorsque l’on veut un site WordPress éco conçu, c’est de vérifier que le thème choisi soit léger, justement. Pour ma part, j’ai eu de la chance car j’avais choisi Astra pour son aspect épuré et sa liberté de personnalisation. Si vous souhaitez savoir quels thèmes WordPress choisir pour créer un site éco conçu, consultez cet article de Kinsta.com.


Si l’on souhaite éco-concevoir son site web, ne pas savoir coder n’est pas un frein. WordPress propose plusieurs solutions simples à mettre en œuvre pour améliorer la performance de son site, et ainsi en diminuer l’impact environnemental. A commencer par la réduction du nombre de requêtes…


Pourquoi réduire le nombre de requêtes de son site web ?

Pour pouvoir afficher une page web, le navigateur a besoin de télécharger toutes les ressources nécessaires (images, feuilles de style CSS, etc.). Celles-ci lui sont alors envoyées sous forme de fichiers pour qu’il les assemble et affiche la page. Chaque élément séparé d’une page web équivaut à une requête envoyée par le navigateur. Cela peut devenir gênant si, par exemple, j’ai beaucoup d’extensions qui génèrent chacune leur propre feuille de style CSS. Car, je précise, l’envoi d’une requête, en plus de ralentir le temps de chargement d’une page, consomme de l’énergie.

Comment réduire le nombre de requêtes de son site web pour en améliorer la performance ?

L’éco conception de son site web avec WordPress commence par un bon ménage : supprimer les plug-ins inutiles ou superflus. Par exemple, vous aviez installé un plugin pour le tester, mais finalement décidé de ne pas l’utiliser. Alors vous pouvez le supprimer. Autre chose à savoir : si votre site utilise une police d’écriture qui n’est pas déjà présente dans l’ordinateur du visiteur, le navigateur va devoir la télécharger pour afficher la page. Pour mon site, j’ai donc décidé d’utiliser une police système très répandue, tout en conservant l’aspect épuré que je souhaitais.


Il existe de nombreux plugin WordPress permettant de diminuer les requêtes nécessaires à l’affichage d’une page. Personnellement, j’ai choisi WP Fastest Cache, qui est gratuit. Ce plugin permet au serveur de conserver les ressources d’une page dans sa mémoire cache pendant une durée donnée. Cela réduit l’effort de ce dernier pour répondre aux requêtes. Ce plugin permet aussi de réduire le nombre de requêtes envoyées au serveur en combinant certains fichiers CSS ou JS entre eux. Au lieu d’avoir plusieurs fichiers CSS, on n’en a qu’un seul, plus gros, mais qui ne demande qu’une seule requête pour s’afficher.


WP Fastest Cache permet également de minifier le code source, ce qui va en diminuer le poids. En cochant ou décochant quelques cases, on peut diminuer la taille du code HTML et du code CSS en le compressant. Concrètement, cela supprime tout ce qui est superflu pour le bon fonctionnement du code, comme les sauts de ligne, les espaces ou les commentaires. Le code fonctionnera toujours aussi bien, il sera simplement moins lisible si un développeur veut y mettre le nez.

D’autres techniques sont détaillées dans cet article de Kinsta.com.

Eco conception de son site web, une affaire de deuil ?

Je peux maintenant dire que mon site web est éco conçu, du moins le mieux possible. J’ai à nouveau testé mon site sur GTmetrix et ecoindex.fr… Quelle amélioration ! Nombre de requêtes, OK. Rapidité de chargement, OK. Poids des images, considérablement réduit. Complexité de la page, OK. La version mobile est un peu plus lourde, je n’ai pas encore pu me résoudre à enlever certaines fonctionnalités. Mais je suis sur la bonne voie !

Pour créer un site internet écologique, il faut en quelque sorte faire un travail de deuil. Difficile d’abandonner complètement les images, les couleurs, ou un minimum d’interactivité pour que l’expérience utilisateur soit agréable. Pourtant, je suis convaincue que c’est possible. Le tout est d’être bien au clair sur ses objectifs, et de se demander, à chaque nouvelle idée, si celle-ci est vraiment nécessaire ou bien si elle peut être remplacée par une autre idée plus légère et tout aussi efficace.

Claire Ballini