Le fameux cache, quand on travaille sur WordPress, c’est assez récurrent d’entendre ou répondre « tu as pensé à vider le cache ? » lorsque quelque chose ne fonctionne pas comme prévu. Tel le bon vieux réflexe de débrancher et de rebrancher la box internet lorsque celle-ci fait des siennes.
Et c’est vrai, dans pas mal de cas, effacer le cache permet de résoudre les soucis rencontrés au niveau de ton site internet. D’ailleurs, en préparant cet article, j’ai constaté que les recherches les plus courantes à propos du cache WordPress étaient vider le cache WordPress et Comment vider le cache sur WordPress ? C’est dire que c’est fréquent.
Alors pourquoi configurer des plugins de cache WordPress si ils posent des problèmes sur son site web ? On peut très bien s’en passer non ?
Non, bien entendu, configurer correctement la mise en cache apporte des avantages significatifs pour tous les utilisateurs d’un site.
Dans cette publication, je te présente en détail ma méthode pour optimiser ton site internet WordPress sans y passer des jours. Comme d’habitude, je préfère m’appuyer sur des outils légers, pas trop compliqués à configurer et qui ne surchargent pas l’interface d’administration WordPress pour ne pas « merdifier » l’expérience. Aussi, comme je suis attaché à ce que tout fonctionne localement, exit les CDN et autres services en ligne.
Configurer le cache de page sur WordPress
Le cache de page permet de fournir aux utilisateurs de ton site une version « pré-calculée » de la page qu’ils consultent. Autrement dit, si cette page a déjà été visitée, ton site WordPress fournira directement cette version sauvegardée au navigateur du visiteur, plutôt que de « recalculer » le contenu via de multiples requêtes.
Comment WordPress affiche-t-il un contenu ?
- Le visiteur clique sur un lien vers ton site, envoyant une requête HTTP (en anglais) à ton serveur.
- Le serveur reçoit la requête et la transmet à WordPress.
- WordPress exécute des scripts pour déterminer ce qu’il doit afficher, génère dynamiquement le contenu HTML en fonction de la requête et des données stockées dans ta base de données, puis renvoie ce contenu au serveur.
- Le serveur envoie le contenu HTML au navigateur du visiteur, qui l’interprète avec les autres ressources associées (CSS, JavaScript…) pour afficher la page web.
Optimisation avec le cache
Pour améliorer la vitesse du site et éviter de répéter ce processus à chaque visite, on sauvegarde le contenu HTML généré dynamiquement lors de la première visite d’un utilisateur. Cette version « pré-calculée » de la page est ensuite fournie directement aux utilisateurs suivants, ce qui accélère significativement le temps de chargement et réduit la charge du serveur.
Compression des données
En complément du cache, l’utilisation de la compression Gzip ou Brotli permet de réduire encore davantage le temps de chargement des pages. Ces algorithmes de compression réduisent la taille des fichiers transmis entre le serveur et le navigateur, ce qui accélère le transfert des données. Pour mettre en place ce système de cache sur un site WordPress, j’utilise l’extension de cache WordPress gratuite Cache enabler de KeyCDN.
Cache enabler est un petit plugin de cache très léger qui se configure facilement en quelques clics. Combiné aux plugins de cache dédiés aux ressources statiques et au cache objet, c’est une excellente alternative à d’autres extensions de mise en cache comme WP Rocket ou WP Super Cache.
➡️ Comment configurer cache enabler ?
Besoin de plus de performances ?
Découvre ZenPress, mon extension ultralégère gratuite pour débarrasser ton site WordPress des fonctions inutiles et des publicités, renforcer la sécurité et améliorer les performances.
Optimiser les ressources statiques et les mettre en cache
Les ressources statiques sont des fichiers que ne changent pas dynamiquement et sont servis tels quels au visiteur quand il consulte un site.
Elles comprennent notamment :
- Les feuilles de style (CSS).
- Les fichiers JavaScript (JS).
- Les images (JPG, PNG, WEBP…).
- Les polices (fonts).
Pour améliorer les performances d’un site WordPress, je les gère en deux parties :
- Réduire et agréger pour les CSS & JS.
- Adopter une politique de mise en cache efficace pour toutes les ressources statiques.
CSS & JS : Minifier et concaténer
Je me base essentiellement sur le travail de Harry Roberts et sa publication The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache (en anglais). Tu y retrouveras toutes les mesures et explications en détail.
Chaque thème et extensions qui ajoutent des fonctionnalités sur l’interface utilisateur (partie visible) d’un site va apporter ses propres CSS et JS. Pour alléger au mieux le poids d’une page, je m’assure d’abord qu’on charge seulement ces fichiers sur les pages pour lesquels on en a besoin.
Ensuite, j’applique cette méthode assez simple et « à l’ancienne » :
- Minifier les CSS et JS.
- Concaténer toutes les CSS en un seul fichier (sans toucher au CSS inclus dans le HTML de la page).
- Concaténer tous les JavaScript (JS) en un seul fichier et les positionner dans le pied de page (idem : pas touche au JS inclus dans la page).
Pour cette étape, j’utilise l’extension Autoptimize de Optimizing Matters.
➡️ Comment configurer autoptimize ? (publication à paraitre).
Pourquoi concaténer ?
Même si HTTP/2 est largement adopté aujourd’hui et permet un nombre de requêtes parallèles illimitées, contrairement au HTTP/1 qui n’en permet que six, un seul fichier volumineux peut être plus performant sur WordPress. Cela est dû à la latence et à la compression.
La latence
La latence représente le temps nécessaire pour établir une connexion et commencer à transférer des données, avant même le début du téléchargement effectif desdites données. Pour faire très simple : Imagine la latence comme le temps nécessaire pour ouvrir une porte avant d’entrer dans une pièce, chaque nouvelle connexion réseau nécessite ce « temps d’ouverture ».
Dans notre contexte, chaque fichier statique nécessite une nouvelle connexion qui a un « coût » en temps. Plus on a des fichiers, plus on cumulera la latence. Donc le temps pour télécharger les fichiers. De plus, beaucoup de sites WordPress sont hébergés sur des petites formules mutualisées qui ne sont pas forcément très performantes, ce qui contribue à augmenter le temps de réponse du serveur. Si celui-ci n’a qu’une requête à traiter, on limite la casse.
La compression
La compression repose sur le principe de détection et d’élimination des redondances. Plus un fichier est volumineux, plus il contient de répétitions que l’algorithme de compression peut identifier et optimiser. À l’inverse, les petits fichiers offrent peu d’opportunités de compression. Leur taille limitée signifie moins de redondances, donc moins de possibilités pour l’algorithme de créer des références compressées. Les en-têtes et métadonnées nécessaires à la compression représenteront proportionnellement une part plus importante du fichier final, réduisant ainsi le bénéfice réel de la compression. C’est pourquoi concaténer les ressources statiques permet de profiter au mieux de la compression qu’on aura pu activer facilement avec Cache Enabler.
Attention : la concaténation ne peut pas s’appliquer à tous les sites. Chaque WordPress a ses particularités. Dans le doute, teste les performances de ton site avec et sans la concaténation.
Une politique de cache agressive avec les entêtes de cache
Pour faire très simple, les entêtes de cache sont des instructions associées aux fichiers fournis par le serveur au navigateur du visiteur (ou d’autres dispositifs intermédiaires comme les proxys).
Pour diminuer la charge serveur, on va réduire le nombre de fois où les fichiers statiques du site vont devoir être fournis. Pour ce faire, on ajoute les instructions suivantes pour dire aux navigateurs des visiteurs combien de temps, ils peuvent garder une copie les fichiers statiques du site sans les redemander au serveur.
Règles à ajouter au .htaccess
# BEGIN CACHE
<IfModule mod_headers.c>
<FilesMatch "\.(ico|flv|jpg|jpeg|png|gif|webp|woff|woff2|ttf|eot|svg|css|js)$">
Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch ".*\.html$">
Header set Cache-Control "max-age=0, must-revalidate"
</FilesMatch>
<FilesMatch "autoptimize_.*\.(css|js)$">
Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>
</IfModule>
# END CACHELangage du code : Apache (apache)Cette politique de cache agressive défini la durée de conservation de la plupart des ressources statiques (CSS, JS, images, fonts…) à un an. Les éléments non spécifiés (comme les PDF), prennent la règle par défaut d’un mois.
Cet ensemble de directive est généraliste, ajoutes-y tes propres règles selon le type de fichiers présents sur ton site.
Le cache objet
Le cache objet est un mécanisme qui stocke des données fréquemment utilisées dans la mémoire vive ou un système de stockage rapide. Au lieu de refaire les requêtes encore et encore, celles qui ont déjà été demandées sont servies directement depuis ce cache. Sans lui, chaque vue de page nécessite de nouveaux appels à la base de données, ce qui ralentit le site.
Plusieurs extensions permettent de configurer différents types de cache objet pour WordPress.
SQLite3 & APCU
Si tu as un seul site WordPress sur ton espace d’hébergement web et que tu ne sais pas trop si Redis ou Memcached sont supportés, je te recommande l’extension SQLite Object cache.
➡️ Comment configurer SQLite Object Cache ? (publication à paraitre).
Redis
Si ton hébergeur web propose un serveur de cache Redis associée à ton hébergement, cela peut être un bon choix. Les sites utilisant Redis disposent d’une base de données SQL et d’un autre serveur de stockage non SQL : Redis. Tu peux utiliser l’extension Redis Object Cache.
➡️ Comment configurer Redis Object Cache ? (publication à paraitre).
Memcached
Si ton hébergeur web prend en charge Memcached, cela peut être une bonne option. Personnellement, je n’ai pas travaillé avec ce système de cache objet, mais l’extension recommandée sur la documentation de WordPress.org est Memcached Object Cache.
Une meilleure expérience utilisateur grâce à des outils légers
On a vu comment combiner de petites extensions de cache spécialisées pour des expériences utilisateur et administrateur au top.
Cela peut être un peu plus minutieux que de configurer des grosses solutions tout en un comme WP Rocket, WP Fastest Cache ou W3 Total Cache. Mais une fois qu’on a compris comment articuler ces outils ensemble les performances sont au rendez-vous !
J’espère que cette publication t’aidera. Si tu as des questions, besoin de support sur ton site WordPress, ou que tu veux apporter ta contribution, n’hésite pas à me contacter ou à laisser un petit commentaire !
Sources
- https://csswizardry.com/2023/10/the-three-c-concatenate-compress-cache/
- https://web.dev/learn/performance/general-html-performance/
- https://blog.futtta.be/2023/10/31/http-2-do-not-aggregate-well-maybe/
- https://blog.futtta.be/wp-content/uploads/2023/04/wordpress_meetup_antwerp_aosecrets_for_export.pdf
- https://developer.wordpress.org/reference/classes/wp_object_cache/
Laisser un commentaire