Optimiser (un peu) les performances de votre thème WordPress

Twitter Facebook Google Plus Linkedin email
closeCet article a été publié il y a 5 ans 6 mois , il est donc possible qu’il ne soit plus à jour. Les informations proposées sont donc peut-être expirées, les commandes ne sont peut-être plus valides.

Avec le nombre de visites sur le blog qui augmente drastiquement (on a plus que triplé entre les chiffres du mois d’Octobre et ceux de Janvier), je me dois de faire plus attention aux performances de mon site. J’ai déjà commencé avec une première étape, l’utilisation de PHP-FPM qui accélère un peu le traitement du PHP. Lors d’un test avec GTmetrix, j’ai découvert quelque chose d’embarrassant avec mon nouveau thème : les éléments du thème ne sont pas pris en compte par le navigateur pour les mettre en cache. Pourquoi ? Comment y remédier ? Pas difficile en fait.

Le problème des Query Strings

Les query strings sont des paramètres ajoutés aux appels de fichiers dans un code HTML. Par exemple :

utilise, pour appeler la police Awesome, une Query String (le ?ver=4.1 après le lien vers le fichier). C’est pratique, mais ça pose un problème de taille : les navigateurs vont exclure les fichiers appelés de cette manière de la mise en cache. Pour rappel le cache permet de garder sur votre machine des fichiers qui ne sont pas modifiés souvent, histoire de les afficher beaucoup plus vite que si vous deviez tout retélécharger à chaque fois.

Un abus dans le thème Simone

Avec le nouveau thème, et en ajoutant les plugins, ce sont pas moins de 16 fichiers qui sont systématiquement récupérés à chaque chargement de page, que vous les ayez déjà ou pas. Et ça pète le score dans GTmetrix, sur les deux tests. Il faut donc trouver un moyen de passer à travers.

Le site du développeur du thème, et ce n'est qu'un extrait

Le site du développeur du thème, et ce n’est qu’un extrait

Faire sauter les Query Strings

En effet, il n’est pas possible de dire au navigateur de les ignorer. la seule solution est de les retirer du code source de la page avant qu’elle soit envoyée par le serveur.

Et magie, de la même manière que sur iPhone ou Android, il y a une application extension pour ça. Son nom ? Très difficile : Remove Query Strings From Static Resources. Un très mauvais et surtout trop long nom pour une extension pourtant légère et limpide. Il suffit de l’installer depuis le panneau d’administration, de l’activer, et magie, les query strings disparaissent.

Ne pas oublier la gestion du cache côté serveur

En effet, j’avais pourtant déjà ajouté des règles d’expiration dans la configuration du site dans Apache, mais bizarrement, le JavaScript n’était pas pris en compte. Notamment parce que je n’avais pas la bonne description MIME manifestement. Donc, j’ai mis les règles suivantes à la fin de mon Vhost Apache (je les mets toutes pour rappel) :

J’ai donc donné une durée de vie d’un mois au JavaScript, au CSS, et un an aux images. Ça permet de pouvoir couvrir d’éventuelles mises à jour des fichiers importants du thème. Et si vous avez un problème, sachez que vous pouvez recharger complètement la page. J’ai décrit le raccourci clavier « kivabien » pour votre navigateur dans un précédent billet.

Et c’est pas fini

Mine de rien, ce petit ajustement (le plugin est très léger) m’a fait gagner un rang dans chaque test de GTmetrix. Ce n’est qu’une des briques devant mener à un site capable d’absorber toujours plus de visites. J’ai en effet plusieurs autres pistes à explorer : cache « global » (Varnish par exemple), bascule sur nginx (déjà activé le mode mpm-worker d’Apache au lieu d’mpm-prefork), validation et utilisation d’HHVM au lieu de PHP-FPM (test validé à la maison, mais pas sur ce serveur cependant), et gros, gros fine-tuning de MariaDB (difficile, car le serveur est utilisé par plusieurs applications différentes, pas seulement des sites web).

perf-gtmetrix

À côté, j’ai aussi redimensionné certaines images, trop grandes et qui étaient redimensionnées de votre côté. Toujours ça de gagné. Y’a encore du pain sur la planche pour gérer la célébrité 🙂

le plus récent le plus ancien
Notifier de
Benjamin
Invité
Benjamin

Un wordpress est très simple à full cacher avec Varnish. Tu pourras encaisser des pics de trafic sans souci. Tu auras presque plus aucune requêtes transmises à ton backend