Les extensions
WordPress a un très gros avantage ; il dispose de très nombreuses extensions pour compléter le moteur de base, lui apportant une multitude de fonctionnalités complémentaires.
WordPress a un très gros défaut ; il dispose de très nombreuses extensions.
Il faut donc les cibler au maximum en fonction du compromis et de l'utilité afin de maximiser les fonctionnalités et minimiser l'impact. Toutefois, il est possible d'en limiter l'impact a posteriori en fonction des besoins de chacune des pages comme nous allons le voir par la suite.
Au-delà des extensions obligatoires comme celles assurant la sécurité, la construction de page, ..., des extensions vont avoir un impact notable sur l'impact environnemental en traitant les problèmes de requêtes et/ou de poids.
Les trois principales sont le nettoyeur de code, le gestionnaire de cache et l'optimiseur d'images.
Le nettoyeur de code
Lorsque des extensions sont installées, c'est dans un objectif de fournir une fonctionnalité à présenter à l'internaute : calendrier des événements, gestionnaire de téléchargements de livres blancs, formulaires, ...
Toutefois, le(s) code(s) javascript et la ou les feuilles de style pour la présentation sont très souvent présents sur toutes les pages indépendamment du fait que la fonctionnalité est utilisée ou non.
De même, certaines fonctionnalités du moteur comme les émojis, des icônes spécifiques sont présentes de manière systématique.
Tout cela génère donc du poids et des requêtes inutiles qu'il va falloir éliminer.
L'extension choisie pour faire le ménage est Asset CleanUp. Il existe une version premium qu'Infogreen Factory a prise afin d'améliorer la gestion des exclusions.
Elle s'occupe de trois améliorations principales :
- La réduction automatique du code (ou minification) en éliminant les espaces, tabulations, commentaires, etc... et en changeant toutes les variables par une seule lettre => gain obtenu sur le poids du code
- La combinaison automatique des feuilles de style et des codes javascript pour en diminuer leur nombre => gain obtenu sur le nombre de requêtes
- La sélection manuelle du code javascript et des feuilles de style des extensions inutiles pour le contenu ciblé
Ce travail se fait globalement pour les améliorations ayant une portée sur tout le site et page par page pour finir de les optimiser individuellement. Ainsi, en fonction de la complexité du site, le résultat va être plus ou moins important mais il sera toujours positif.
La version premium présente l'avantage de pouvoir gérer les exclusions de code sur la base d'expression régulières (ne pas charger si le nom de la page commence par) mais aussi le déchargement complet d'une extension sur une page ou sur tout le site avec alors gestion des exceptions pour les pages sur lesquelles ce module doit être chargé ; par exemple, si une extension est choisie pour gérer le formulaire contact, il suffit de la décharger sur tout le site et de demander une exception pour la page contact.
L'essentiel de l'amélioration en terme de poids de page et du nombre de requêtes est issu de cette extension. Dans la dernière partie de cette série d'articles, je vous présenterai les améliorations certaines apportées par cette extension.
Le gestionnaire de cache
Leur objectif va être :
- de rendre statique les parties du site n'évoluant pas
- pourquoi redemander au serveur de générer une page lorsqu'elle a déjà été lue par un utilisateur et que son contenu ne bouge pas ?
- l'impact n'est pas mesurable par ecoindex.fr car le cache, pour cet objectif, n'améliore que l'accès mais pas le nombre de requêtes ou le poids, mais il est réel
- de combiner les feuilles de styles et les optimiser pour diminuer le nombre de requêtes et leur poids
- de faire la même opération avec le code javascript s'exécutant sur le navigateur de l'utilisateur
Comme les deux derniers items sont déjà pris en charge par le nettoyeur de code, ils ne sont donc pas mis en oeuvre dans le cadre du gestionnaire de cache dans la solution Infogreen Factory. Il est alors possible de choisir un gestionnaire de cache simple et Infogreen Factory a choisi WP-Optimize.
Ainsi, le gestionnaire de cache participe à l'accélération de l'affichage et à rendre la navigation plus agréable.
L'optimiseur d'images
Les images peuvent être de plusieurs formats selon la finalité mais toutes peuvent être optimisées sur au moins quatre axes :
- le format de l'image : pour faire simple, le format jpeg est celui qui permettra de conserver le mieux l'information dans la taille la plus réduite et mieux ; des formats plus modernes existent et sont plus efficaces comme JPEG2000 ou WebP
- Le format PNG sera à privilégier lorsqu'il y a un besoin de transparence : logo s'affichant toujours de la même manière quel que soit le fond d'écran
- la taille de l'image qui doit être la plus adaptée ; WordPress s'occupe de proposer l'image la plus proche possible de la taille attendue, mais si votre site fait 1200 px de large, autant prévoir des images de 1200
- la qualité associée au taux de compression pour les formats avec perte
- la suppression des exifs (ce sont les informations type géolocalisation, date, ... qui y sont contenues)
Des outils en ligne existent pour convertir (https://convertio.co/fr/) et optimiser (https://imagify.io/fr) mais il est possible aussi d'intégrer une extension pour s'occuper des quatre axes. Imagify qu'Infogreen Factory a choisie par exemple peut compresser les images de manière importante et les présenter au format WebP.
Saurez-vous faire rapidement la différence entre les deux images ? Et si tel est le cas, est-ce vraiment important pour le message ?