Écoconception et WordPress

Partie 1 - Raisons et premiers choix

Introduction

Un site web pour quel usage ?

Pour quelle raison se poser la question de l'écoconception et WordPress ?

En effet, Infogreen Factory a souhaité mettre en place un site avec plusieurs objectifs associés. Le premier est d'en faire un site vitrine où les services et missions sont présentés ; c'est un objectif des plus classiques. Le deuxième, habituel lui aussi, est de pouvoir proposer l'actualité ou les idées que l'équipe partage sur le Numérique Responsable. Le troisième est de présenter les membres constitutifs de la société avec leur parcours et leur engagement.

Nous ne sommes pas des développeurs. Un point important des spécifications concerne donc la simplicité de mise en oeuvre et d'alimentation en articles.

Écoconception et WordPress

Cette rubrique aborde, en tout premier lieu, le sujet de la configuration de WordPress et de son écosystème. Une réflexion de numérique responsable doit également prendre en compte l’hébergement et la composition de pages ou d’articles. Ces deux sujets seront toutefois traités plus succinctement.

Elle se positionne sur l’amélioration de la mesure faite par ecoindex.fr (autour du CO2 généré et de l’eau consommée) et autres outils de mesure présentés en fin de série et du respect de l’accessibilité. Et ce uniquement sur la phase "configuration" et non "codage" comme il faudrait le faire si l'écoconception était abordée sur l'ensemble du cycle de vie du site.

Mais elle traite aussi le compromis qui doit être trouvé entre la maximisation de la performance environnementale et le service fourni. Les 3U viennent donc au-devant de la scène ; un site sans visites par manque de contenu attractif n’a alors qu’un impact négatif.

Écoconception

« Intégration systématique des aspects environnementaux dès la conception et le développement de produits (biens et services, systèmes) avec pour objectif la réduction des impacts environnementaux négatifs tout au long de leur cycle de vie à service rendu équivalent ou supérieur. »

Source : Pôle éco-conception


La structure des articles sur le sujet :

  • 1 : Les fondations du site
  • 2 : Les extensions utiles pour la performance
  • 3 : L'accessibilité
  • 4 : Outils de mesure et conclusion

Les résultats de l'optimisation

Après avoir posé ces bases et avant d'aborder cette série d'articles, il est intéressant de voir quels sont les résultats obtenus sur la page d'accueil après les choix initiaux et les actions d'amélioration.

Mesures Résultats
PageSpeed Insight de Google Mobile : 99/100

Ordinateur : 100/100

FastOrSlow Au niveau mondial : 98/100

Au niveau France : 100/100

GTMetrix Performance : 100/100

Structure : 98/100

LightHouse de Google (extension Firefox ou Chrome) Performance : 100/100

Best practices : 100/100

GreenIT (extension Firefox ou Chrome) Ecoindex A avec 79/100

1,42g de CO2 et 2,13cl d'eau

Ecoindex.fr Note A

1,44g de CO2 et 2,16cl d'eau

Website Carbon 0,08g de CO2 par visite

Top 8%


Les fondations du site

logo-WordPress

« WordPress est un système de gestion de contenu gratuit, libre et open-source. Ce logiciel écrit en PHP repose sur une base de données MySQL et est distribué par la fondation WordPress.org. »

Source : Wikipédia

Pourquoi WordPress ?

Infogreen Factory a pris un SGC (système de gestion de contenu) plus communément appelé CMS (content management system) pour réaliser son site vitrine. Et ce SGC est WordPress. Le fait qu’il soit open source est un élément important de la décision en plus du fait qu’il est modulaire, lui permettant d’être généraliste sans avoir un moteur trop imposant.

Pourtant, écoconception et WordPress sembleraient ne pas aller ensemble ; la présentation de pages à partir d’un générateur dynamique va entrainer des requêtes, du poids et une complexité qui sont les inducteurs de la mesure fournie par ecoindex.fr.

Si le choix a été fait dans ce sens, c’est pour l’aspect pratique de création d’un site (pas besoin de connaissance HTML, CSS, JS,…)  et son côté facile d’accès pour rédiger des articles. Un site statique donnerait en matière de performance de meilleurs résultats, mais serait plus difficile à appréhender et ainsi à alimenter. C’est donc le compromis qui a été adopté. Si la contrainte avait été de disposer d’un site nécessitant peu d’évolutions, il est évident que le choix se serait porté sur un site statique.

Mais à partir de là, il ne faut pas que seul le côté pratique soit pris en compte sans perdre de vue l’écoconception et c’est cette gestion du compromis que cet article s’attache à présenter.

Hébergement

L'hébergement doit répondre à deux critères principaux : être labellisé par la Green Web Foundation et être localisé en France pour le respect des données.

Infogreen Factory a choisi l'hébergeur IONOS by 1&1 qui répond aux deux.

Le thème

Une fois WordPress installé, il faut choisir le thème qui servira de fondation pour l’exposition du site. WordPress arrive avec des thèmes standards, légers, mais présentant peu de fonctionnalités.

La galerie de thèmes est immense et chacun peut adopter le thème en fonction de son métier. Il en existe des généralistes et c’est vers ceux-là que le choix s’est axé pour se finaliser sur GeneratePress. Un de ses objectifs est d’être léger ce qui est très bien en vue de l’écoconception.

logo-GeneratePress

Ce thème est fortement déployé avec un très bon suivi ce qui procure un code de qualité et surtout, dans l’objectif d’une minimisation de l’impact environnemental, il est très frugal ; sa répercussion sur le code d’une page est de moins de 10 ko ; c’est toujours 10 ko de plus, mais c’est un compromis acceptable.

Avec l’extension permettant d’avoir les fonctionnalités premium, la capacité de configuration est élevée pour un impact modique.

Configuration

Une fois le thème installé, il faut maintenant le configurer avec toujours en tête de trouver le bon compromis. Plus il y a des widgets, par exemple, et plus la structure de chaque page se complexifie. Vous vous rappelez ? C’est un des inducteurs d’ecoindex.fr.

Il faut donc revenir à la règle des 3U et notamment le premier : est-ce que le site et son audience ont besoin de cette information ?

Et pour cela, GeneratePress Premium propose un module de configuration des pages, Elements, permettant de retoucher tout ou partie de la disposition selon des critères, fournissant une grande souplesse à la présentation. Par exemple, avoir sur les pages une barre latérale pour présenter certaines activités est intéressant. Mais lorsqu’un article est consulté, il est préférable de se concentrer sur l’essentiel du contenu, le texte. Le reste n’est pas utile. Elements permet simplement de supprimer l’inutile et donc de limiter la complexité de la page web et de diminuer son poids.

La mise en page faite (je reviendrai sur la taille et l’optimisation des images qui servent de logo ou placées dans un widget plus loin), les couleurs choisies, il faut s’occuper maintenant de la typographie. Le choix de la police est important. Il y a d’un côté les polices dites système (intégrées dans le navigateur de l’utilisateur final) et d’autres polices comme celle de Google, à télécharger.

Polices de caractère

Ces dernières présentent deux problèmes dont un peut se régler partiellement. Le premier concerne la localisation de la source de ces polices. Si rien n’est fait, le serveur du site va se connecter aux serveurs de Google aux États-Unis, en faisant plusieurs requêtes ; et hop, un autre inducteur d’ecoindex.fr. Il est possible de réduire la distance en téléchargeant les polices sur le serveur hébergé, mais les requêtes persisteront. Le deuxième problème est que, même optimisée, l’utilisation d’une police de Google induit des kilo-octets supplémentaires ; un autre inducteur d’ecoindex.fr.

Pourquoi, alors, ne pas utiliser une police système ? Elles sont suffisantes pour présenter très correctement du texte dans un environnement professionnel, sont lisibles et sans impact environnemental induit !

Infogreen Factory a choisi Verdana pour tous les caractères (paragraphe, titre…) avec une configuration uniquement dans le thème et non au cas par cas, au gré des rédactions d’articles ou de pages.

Le constructeur de page

Le constructeur de page a pour objectif (en simplifiant) de faciliter la mise en page d'un article par la création d'une grille dans laquelle il suffira d'écrire ou de positionner les contenus.

Site web de SiteOrigin pour son PageBuilder Une exigence à avoir pour son choix concerne la complexité du code généré. En effet, le constructeur va ajouter de la structure pour gérer l'organisation de la page, du code CSS pour le style et du code javascript pour le fonctionnement.

Tous les constructeurs ne se valent pas que ce soit sur la facilité d'usage ou la complexité du code. Un compromis doit être trouvé.

Le choix s'est porté sur SiteOrigin PageBuilder qui est pratique, simple d'emploi et qui minimise le code généré au seul code utile. Il est suffisamment polyvalent pour proposer des fonctionnalités intéressantes et suffisantes pour une présentation professionnelle.

Ce que certains considèrent comme un défaut, à savoir le peu de fonctionnalités, le manque d'options et l'impossibilité de toucher aux haut et bas de page en font ici des avantages indéniables.

Conclusion de l'article Écoconception et WordPress - Partie 1

Nous avons posé les fondations du site pour réussir à en minimiser l'impact tout en ayant des fonctionnalités adaptées à l'équipe Infogreen Factory.

Dans l'étape suivante de la démarche Écoconception et WordPress, nous allons mettre en oeuvre les extensions pour aller plus loin dans l'optimisation et diminuer autant que possible l'impact environnemental.

Nous espérons vous retrouver dans le prochain article.

À très bientôt.