Optimisation du site fertiles.labascule.org

Posté le ven. 24 septembre 2021 dans greenIT

État initial

Après une mise à jour de WordPress, et de ses thèmes et plugins, voici les scores obtenus sur les différents outils d'analyse en ligne pour la page principale :

Résultat de l'analyse de LightHouse

Et voici pour le détail des performances qu'il sera possible d'améliorer :

Détails des performances

Résultat sur PingDom

La page est très lourde et charge de nombreuses ressources (119 requêtes !).

Résultat de WebPageTest

Il y aura du travail au niveau des entêtes liés à la sécurité, le chargement de la page, et le cache des ressources.

Résultat de SecurityHeaders.com

Sécurisation des entêtes HTTP

Commencons par rajouter ces entêtes HTTP :

Header always set X-Frame-Options "SAMEORIGIN"
Header always set X-Content-Type-Options "nosniff"
Header always set Referrer-Policy "strict-origin-when-cross-origin"
Header always set Feature-Policy "microphone 'none'"
Header always set Permissions-Policy: "microphone=()"
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"

Ce qui donne un bien meilleur score sur https://SecurityHeaders.com/ :

Résultat sur SecurityHeaders.com

Je ne pense pas ajouter l'entête Content-Security-Policy, car je ne maitrise pas les changements à venir sur le site et je ne veux pas bloquer les futurs développements.

Suppression des plugins inutiles

De nombreux plugins non activés ont été désinstallé, afin de réduire le poids total du site pour les backups. Il reste encore de nombreux plugins, dont certains pourraient sûrement être désactivé, mais je vais attendre d'en parler avec les concepteurs⋅trices pour avoir leur avis avant de les supprimer.

Encodage des images au format WebP

Mon extension préférée pour cette tache est WebP Converter for Media. Elle permet de convertir les images existantes, et de convertir à la volée les images rajoutée via la bibliothèque de média de WordPress. Elle est simple et rapide à utiliser : il faut simplement cocher les répertoires contenant des images à convertir, choisir une qualité (j'ai laissé 85%, même si on pourrait probablement mettre moins), et lancer la régénération des images.

Le plugin affiche une erreur critique lorsqu'on tente d'optimiser les images. Il va falloir investiguer là-dessus. 🧐

Activation du cache

Pour le cache, j'utiliser maintenant l'extension WP-Optimize car elle possède des fonctionnalités de nettoyage de la base de données. C'est toujours utile pour un site assez ancien avec beaucoup d'historique qui l'alourdit.

Je configure WP-Optimize pour nettoyer la base de données réguilèrement, activer la mise en cache des pages, activer la compression gzip, et minifier les fichiers JavaScript et CSS.

Résultats

À cette étape, le site a perdu en performance !

Résultat de l'analyse de LightHouse

Et voici la partie performance :

Détails des performances

Voici l'état actuel pour les points les plus importants :

  • "defer offscreen images" : je vais tenter un plugin de lazy loading ;
  • "reduce unused JavaScript" : impossible de faire quoi que ce soit pour le moment : il faudrait probablement ne pas utiliser Elementor, ou bien supprimer les plugins "extra" pour éviter de charger du contenu inutilement.
  • "Serve images in next-gen formats" : il va falloir déboguer le plugin précédemment installé WebP Converter for Media.

Une fois le plugin Lazy Loader installé, le score n'a guère augmenté…

Détails des performances

Supprimons tout ça, et testons un autre plugin.

L'installation et la configuration des plugins Autoptimize et WP YouTube Lyte ont permis d'obtenir un score de 46, mais les opportunités suivantes sont toujours présentes :

Détails des performances

Conclusion

Je n'irai pas plus loin tant que Elementor et tous les autres plugins liés seront installés, car j'ai l'impression que ce sont eux qui ralentissent le site et qui empêche les plugins d'optimisation de fonctionner pleinement.