L’éco-conception en WordPress, c’est possible

Dans cet article, nous verrons comment on peut simplement, et sans rentrer dans la technique avancée, avoir un bon niveau de pratique de l’éco-conception avec le CMS WordPress.

Suite à mon précédent billet où j’expliquais que j’avais fait le choix de ne pas utiliser de site statique pour mon site, notamment en pensant aux difficultés que pourrait avoir une petite organisation à le maintenir, j’ai fait le choix de me repencher sur la solution phare du marché : WordPress . Celle ci a de facto un certain nombre d’avantages :

  • Tout le monde la connait, c’est rassurant
  • De très, très, très nombreuses entreprises sont capables d’intervenir sur un site WordPress , du coup c’est pas/moins un outil ou on se retrouve pieds et poings liés avec un presta lambda (vécu).
  • Le backoffice est relativement simple, en tout cas pour un contributeur qui ne fait pas de grosses opérations.
  • N’importe quel hébergeur supporte WordPress

Donc partant de ça, je me suis posé la question dans les termes suivants : « Pour une personne qui prend WordPress comme un prérequis, est-il possible d’avoir quelque chose de propre en terme d’éco-conception ? »

Réponse courte : oui.

Petit aide visuel : Je vais essayer dans ce post et les suivants d’expliciter les bonnes pratiques faisant partie de la liste des 115 bonnes pratiques d’éco-conception en les matérialisant par 🌱#bonnepratique (par exemple 🌱#42 pour la bonne pratique 42 !) Si vous en voyez que j’ai raté, n’hésitez pas à me le signaler !

Première étape de l’éco-conception avec WordPress

Dans écoconception, il y a conception. C’est pas pour rien 😅.

La première étape, la plus importante, c’est de faire quelque chose de plus épuré possible 🌱#6 , ne pas mettre de « gras fonctionnel » (inutile d’avoir un bouton callback ou une prise de RDV par internet, pour moi aujourd’hui c’est du gadget) 🌱#1 et le « gras numérique » (bye bye le google map intégré, le google analytics, les animations façon star wars) de mon produit.

Pour ma part typiquement sur ce site, j’ai fait le choix d’un minimum d’images. Je rajoute quelques images d’illustration pour aérer un peu le visuel.

Design mobile First 🌱#7. Si ça marche sur mon vieux Smartphone fatigué, ça marchera sur mon navigateur flambant neuf.

5 pages. Ça suffit pour ce que j’ai à en faire. Sachant que j’ai un système pas obtus. Si demain j’ai besoin de 3 pages de plus je les mettrai. Mais pour le moment je n’en ai pas besoin donc je ne les fais pas.

Pour l’UX et l’UI, la philosophie est assez simple : je souhaite que l’utilisateur passe le moins de temps possible sur mon site 🌱#3. Plus vite il aura le contenu qui l’intéresse (« Suis-je un consultant intéressant pour son entreprise ? », « Est-ce qu’il pense que Hugo ça vaut le coup ? »), plus vite il éteindra son terminal, moins il se baladera sur le site, moins il chargera de pages. Du coup ça c’est vraiment écoconception (et pour le coup totalement anti économie de l’attention).

Il faut ensuite passer un peu de temps sur le rédactionnel, et on peut attaquer la mise en oeuvre.

WordPress : Mise en oeuvre de l’éco-conception

Pour moi le choix a été guidé par mes contraintes. Il me fallait :

  • Quelque chose de simple en terme de setup (je veux bien rentrer un peu dans le code, mais pas pas passer ma vie dedans),
  • De suffisamment versatile pour que si demain je décide de changer complètement d’avis je puisse le faire (exit les thèmes WordPress trop rigides),
  • Avec une existence assez longue pour être rassurante (vous n’avez jamais eu un thème ou plugin qui s’arrête soudainement de marcher et vous vous rendez compte qu’il n’existe ni support ni sources ?),
  • Si possible un « écosystème« , c’est à dire des choses réputées pour bien fonctionner ensemble.

Je vous passe les différents choix, essais, etc, mais j’en suis arrivé au combo suivant qui marche plutôt bien :

Thème : Generatepress

Generatepress a manifestement une popularité assez en hausse. Et il faut bien reconnaître qu’il ne manque pas d’arguments pour se faire apprécier.

Argument 1 en image :

Peu peuvent en dire autant…

Sur le site du thème, on trouve les points forts suivant mis en avant :

  • Stable et sécurisé : effort de respect des standards WordPress et qualité du code
  • Toute petite empreinte : un WP par défaut avec le thème par défaut c’est une page de 30kb !
  • Vitesse. Pas une priorité en écoconception, mais une conséquence logique de « Code clean » + « empreinte légère », c’est de très bonnes perfs
  • Accessibilité : respect des standards WCAG 2.0.
  • Pas/peu de dépendances : « Si ce n’est pas nécessaire on ne le charge pas ». Ils ont même retiré jQuery pour revenir sur du javascript de base ( 🌱#13 ) .
  • Optimisé SEO : HTML valide 🌱#15 , utilise Schema.org .

Avec un argumentaire comme ça je ne pouvais pas ne pas le tester. Je suis resté scotché devant la qualité de ce thème. Je ne rentrerai pas dans les détails techniques, si vous voulez il y a un article très détaillé sur WPMarmite qui décrit plutôt bien le thème, et qui arrive à peu près à la même conclusion 😊. Pour avoir une idée de ce qu’on peut faire avec le thème, on peut aller sur ce showcase qui montre tout un tas d’exemples de sites et qui montre bien jusqu’où on peut pousser le thème.

Une fois que ça c’est posé (personnellement j’utilise la version premium du thème, pour avoir les quelques petits-bonus-qui-simplifient-la-vie), on peut regarder vers les outils qui gravitent autour.

Plugins

Evidemment ça dépend de l’utilisation qu’on fait de son site, mais en général, on retrouve :

Beaver Builder : un page builder compatible avec GeneratePress, très simple d’utilisation et qui permet d’aller très vite pour monter les pages avec des layouts et des composants. Personnellement j’aurai du mal à revenir en arrière. Et même des gens pas du tout habitués au web peuvent assez facilement s’y retrouver. On m’a dit, et c’est l’argument qui m’a définitivement fait adopter l’outil : « Ah ouais en fait c’est même plus simple que de faire une diapo dans Powerpoint ». Quand on a dit ça on a tout dit 😅

Yoast SEO : Optimisation SEO de son site, je m’en sers assez peu mais cela me permet à minima de vérifier que tout est d’équerre.

Smush : optimisation d’images 🖼, je l’utilise pour 3 choses : ✂ redimensionner mes images à l’upload une bonne fois pour toutes 🌱#59 (genre quand on met une très jolie image de unsplash pour faire une photo d’article, qu’on ne sait pas ce que c’est un fichier lourd ou pas, et qu’on se retrouve avec un article qui fait 11 Mo juste à cause de l’image 😅). J’utilise évidemment la fonction de base 🗜 qui est de recompresser les images 🌱#76 , et j’utilise surtout une fonction qui n’apparaît que quand on est admin d’un site et qui fait apparaître un cadre jaune autour des images qui sont trop grandes et que le navigateur redimensionne à la volée (🌱#20 !). Au moins on peut plus les rater 🎯 .

Ninja Forms : un jour ou l’autre on a toujours besoin d’un formulaire 📝. Ninja forms marche très bien, s’intègre bien avec Beaver builder et Generatepress, et propose tout un tas d’extensions, un peu chères mais tellement simples d’utilisation. A noter que comme c’est un « gros » des formulaires, les aspects RGPD sont plutôt bien intégrés, notamment une auto expiration des données paramétrable.

BackupBuddy : là aussi un classique de chez classique, mais une nouveauté récente qui change la donne (pour moi), la possibilité d’uploader ses backups sur Onedrive. Etant donné que j’ai un Onedrive de 1To avec mon abonnement MS Office, je peux me permettre quelques backups d’avance. 💾💾💾

Avec ce combo là, j’ai pu mettre en place mon site sans forcer, sans sortir une fois l’éditeur de code et c’est la même recette de base que j’ai appliquée pour les-roseaux.fr, ouistrasbourg.eu, solierre.fr, avec à chaque fois des petites choses en plus suivant les spécificités du projet, donc c’est selon moi un très bon bon point de départ.

Un indicateur d’éco-conception simple à suivre : l’écoindex Green-IT

Pour le coup j’ai besoin d’un indicateur simple, j’utilise donc l’extension GreenIT-Analysis dispo ici pour Firefox ou ici pour Chrome.

L’outil me donne un écoindex de A à F principalement en fonction du poids de la page, de la complexité du DOM et du nombre de requêtes avec les serveurs. Comme pour un frigo, A c’est très bien, F il faudra travailler un peu…

L’outil apparaît dans les outils de développent Web (F12 dans Chrome). Pour ceux qui utilisent l’outil et qui sont par exemple administrateur de leur WordPress , je vous recommande de lancer ça dans une session anonyme afin d’éviter que les barres d’administration WP et ce genre de joyeusetés ne viennent polluer les analyses.

Donc on va sur son site en session anonyme,

On appuie frénétiquement (ou pas) sur F12 et on se rend dans le dernier onglet « GreenIT »)

Pour cet exemple je vais activer l’analyse des bonnes pratiques. Donc je coche, je lance l’analyse, et pour être sur, je rafraichis la page.

« A » tout de suite. Trop fort 😊.

En vrai j’ai un peu tâtonné pour arriver à A, mais de base, sans rien faire de spécial, j’étais déjà à « B » sans toucher aucun réglage.

L’analyse des bonnes pratiques donne le résultat suivant :

Plutôt pas mal de vert quand même

Les bonnes pratiques sont elles aussi issues de ma configuration de base. Certaines peuvent varier suivant l’hébergeur mais en gros c’est des choses sur lesquelles il faudra bricoler ou optimiser pour atteindre le 100%. Mais personnellement je vise pas le 100%. Je préfère avoir « la majorité des bonnes pratiques » de base et sans devoir me prendre la tête.

Vous ne pourrez pas tout faire…

(sauf si vous avez beaucoup, beaucoup de temps ou d’argent 💸💸💸)

A mon sens, le principal du principal c’est d’être conscient des choix que l’on fait, et d’être conscient des choix que l’on fait prendre à ses clients.

Quand on ne me demande « rien de spécial en terme d’écoconception », je reste sur mes exigences personnelles, puisque c’est moi qui ai le pouvoir de placer le curseur.

Mais des fois, vous aurez une vidéo de fond à intégrer, ou une map immonde avec 3 Mo de Js sur la page d’accueil qui va vous faire exploser l’écoindex. C’est pas grave. Si vous le savez, que votre client le sait, et que c’est un point d’amélioration à venir, alors tout va bien. Tout n’est pas remplaçable immédiatement, tout n’est pas optimisable immédiatement.

…mais vous pouvez commencer

Ensuite, il est plus facile de faire des concessions sur quelques points que de rester braqué sur des positions trop rigides. Je me suis moi même fait « le client » pour mon site, avec les polices. Je sais que c’est pas une bonne pratique, mais je tenais à utiliser ces polices, donc je l’ai fait. Mais en le sachant sciemment et du coup en cherchant à le « compenser » sur d’autres éléments.

En conclusion

Pour conclure cet article je dirai qu’on peut « assez facilement » arriver à des bons résultats d’éco-conception sur WordPress, sans être un expert en développement web. Certains thèmes dont GeneratePress nous aident à avoir la bonne démarche, et on peut facilement s’autocontrôler avec le plugin GreenIT-Analysis.

J’espère donc que ce genre de combinaison de thème et de plugins va rapidement se répandre !

Laisser un commentaire

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