Guide : tout savoir la mise en cache avec WordPress


Optimiser un site Web passe parfois par des modifications pour alléger le contenu, la réduction de la taille des fichiers (comme les images ou le Javascript). Parfois, l’optimisation passe aussi par les logiciels et la façon dont sont traitées les requêtes. C’est de cette façon que le cache peut être utile. Le cache est une façon d’accélérer un site Web et permet de gagner de précieuses secondes sur le chargement de vos pages Web. Bien utilisé, il permet aux utilisateurs de navigateur plus vite et réduit également la charge de calcul sur vos serveurs. Cet article vous propose de découvrir comment faire pour accélérer votre site avec un cache WordPress.

Explication sur la mise en cache avec WordPress

Chaque page visitée sur votre site Web nécessite une (voire plusieurs requêtes) au serveur. Celui-ci traite la demande et le résultat est envoyé au navigateur de l’utilisateur avant d’être affiché. Étant donné que le serveur Web doit traiter toutes les demandes, il faut un certain temps pour que le résultat soit prêt. C’est d’autant plus vrai si vous avez un site Web avec beaucoup de données ou de contenus (avec des images, des articles, des vidéos, etc.).

C’est là que mettre en place un cache peut devenir intéressant. Le plugin ou le serveur de cache va stocker le résultat des requêtes traitées et les stocker sur le disque dur ou en mémoire RAM (en fonction de la configuration souhaitée). Ainsi, vos pages se chargent beaucoup plus rapidement et toutes les requêtes n’ont pas à passer par une étape de calcul par votre serveur. Pour faire bref, la mise en cache réduit la quantité de travail nécessaire pour générer un affichage de page.

Quand faut-il utiliser un cache WordPress ?

À quel moment dois-je utiliser un plugin de cache WordPress ? Cela fonctionne-t-il sur n’importe quel site Web ? Quels sont les avantages de la mise en cache ?

Se poser ces questions est justifié. Ces interrogations peuvent peut-être vous guider dans le choix de la technologie à utiliser ou encore de la façon d’implémenter votre couche de cache. Que vous utilisiez votre propre serveur Web ou êtes sur un serveur mutualisé l’ajout d’un cache, apporte souvent des avantages.

Parfois, il faut noter que certains hébergeurs déploient déjà une solution de cache avec leurs services. C’est par exemple le cas de WPServeur ou encore de Kinsta, et même de Cloudways. Très souvent, les hébergeurs qui proposent déjà des solutions de cache vous l’indiqueront explicitement et il ne sera pas nécessaire (parfois même interdit) de rajouter des plugins ou des logiciels de cache.

Pourquoi utiliser un cache ?

Que vous utilisiez une solution logicielle (ex. Varnish, Nginx, Nuster, etc.) ou des plugins, vous avez toujours besoin de cache. Qu’est-ce que cela m’apporte de faire de la mise en cache ?

  • Votre site est plus rapide. C’est l’argument que nous mettons en avant dans cet article, mais il est toujours bien de le répéter, car il s’agit du principal avantage du cache.
  • L’expérience est meilleure. Avoir un site Web qui se charge vite améliore la qualité de l’expérience des utilisateurs et augmente la probabilité qu’ils parcourent les pages.
  • Votre serveur consomme moins de ressources. Lorsque vos pages sont en cache, les requêtes ne sont plus traitées par votre CMS (ex. WordPress), votre base de données (DB) n’est plus sollicitée. Cela induit une charge moindre sur votre serveur et peut impliquer une réduction de vos coûts d’hébergement.
  • Votre SEO se porte mieux. La vitesse de chargement des pages est un critère dans l’optimisation de votre placement dans les résultats des moteurs de recherche. Losque les robots de Google, Bing ou encore DuckDuckGo parcourent votre site, ils seront en capacité de crawler plus profondément vos pages.
  • Le TTFB (Time To First Byte) est réduit – temps entre la requête et le premier octet reçu par le navigateur. Le TTFB est un indicateur qui permet de noter la rapidité d’un site Web. Plus cette valeur est basse et moins l’utilisateur a besoin de patienter. Pour rappel, si une page ne se charge pas en moins de 3 secondes sur mobile, les utilisateurs quittent en grande majorité le site Web.

Comparaison : avec et sans cache

Pour vous aider à comprendre le principe de mise en cache, nous avons effectué quelques tests sur un serveur Web avec WordPress pour que vous puissiez voir la différence.

Nous utilisons Pingdom pour valider la performance du site Web et l’inspecteur de code source du navigateur (ici Firefox). Nous pourrons avoir une indication du temps de chargement de la page dans sa globalité, mais aussi du temps nécessaire au traitement d’une requête.

Test de vitesse sans cache

Temps de chargement d'un site Web WordPress sans cache
Le temps de chargement est de 1,36s sans mise en cache

En utilisant Pingdom et sans mise en cache, le temps de chargement de la page est de 1,36s. Ici, aucun cache n’est utilisé avec WordPress. Le serveur Web reçoit la requête et la livre à Pingdom.

Test de vitesse avec cache

Temps de chargement d'un site Web WordPress avec plugin de cache et reverse proxy

En activant la mise en cache avec un plugin WordPress et un reverse proxy Nginx, le temps de chargement est de 309ms.

Conclusion sur les tests de mise en cache

Activer la mise en cache, la compression et la réduction des ressources dans les plugins de cache permet d’avoir moins de requêtes et de charge sur le serveur Web. Le résultat est sans appel, le site est 4 fois plus rapide.

Quel cache utiliser ?

Il existe plusieurs méthodes pour faire de la mise en cache. Si vous gérez votre propre serveur ou si vous utilisez un hébergement mutualisé, vous pouvez vous tourner vers les plugins pour WordPress. Si vous avez la responsabilité de votre serveur Web et de son administration, vous pouvez vous tourner vers un second type de cache, celui du serveur Web (ou du reverse proxy). Vous pouvez aussi utiliser un CDN pour faire office de cache et décharger la livraison de vos ressources sur un prestataire (ex. BunnyCDN).

Il existe aussi différentes méthodes de mise en cache. Il y a par exemple le cache bytecode, le cache objet, le cache de page ou le cache par CDN.

Cache Bytecode

Le cache Bytecode stocke le code compilé de votre application (ex. PHP avec WordPress), afin que la requête suivante réutilise le code compilé existant. Lorsqu’un script PHP est traité, il doit être compilé en un code opérationnel (« bytecode » ou « opcode« ) lisible par la machine. OPCache est par exemple embarqué dans PHP et réalise cette fonction. OPcache stocke le code compilé pour l’utiliser à nouveau lors de la nouvelle requête. L’utilisation d’OPcache améliore l’efficacité de PHP, mais les changements dans le code source demandent à ce que le cache soit invalidé.

Cache objet

Logo de Redis
Redis est un exemple de logiciel de cache objet

Le cache objet stocke les résultats des requêtes de la base de données de telle sorte qu’ils soient accessibles plus vite (en mémoire RAM par exemple). Lors d’une requête sur votre site Web, votre application va intérroger le cache objet si les données existent déjà. Le but est d’éviter que la base de données ne soint sollicitée. Certaines extensions comme W3 Total Cache supportent la mise en cache d’objets. Il est aussi possible d’utiliser un plugin en plus de Redis pour cet usage.

Cache de page : plugins de cache

WP Super Cache : plugin de compression et de cache WordPress
WP Super Cache est un plugin de mise en cache WordPress

Certains sont plus accessibles que d’autres, mais tous ont de très bonne critiques sur le store officiel de WordPress. Beaucoup d’articles comparent les plugins de cache pour WordPress, mais le choix est très souvent une question personnelle des administrateurs.

Cache de page : CDN

BunnyCDN : CDN pour la mise en cache de site Web
Un CDN est une méthode de mise en cache parfaite pour les gros sites Web

Un CDN (Content Delivery Network) qu’il soit fait maison ou externalisé est un service qui a pour objectif de stocker vos données au plus près de vos clients. Le CDN stocke vos pages Web et ressources sur ses serveurs dans plusieurs pays pour les délivrer quand vos utilisateurs en ont besoin.

Cache de page : reverse proxy

Varnish Cache : mise en cache de page Web
Varnish Cache est un reverse proxy pour la mise en cache de site Web

Le serveur Web est le logiciel qui communique avec le navigateur de vos visiteurs il est parfois surmonté d’un reverse proxy qui dans le cas de sites Web à fort trafic va basculer les requêtes de vos clients sur différents serveurs. Le reverse proxy peut très souvent être configuré pour faire de la mise en cache. C’est par exemple le cas de Varnish ou de Nginx.

Comment fonctionne un reverse proxy ?
Principe de mise en cache avec reverse proxy
Un reverse proxy collecte les requêtes des clients pour les mettre en cache

Pour comprendre ce qu’est un reverse proxy (« proxy inverse » en français) et sa fonction dans un environnement de serveur Web, il faut en premier lieu se familiariser avec les termes qui s’y rapportent. Pour cela, faisons un petit paragraphe de définitions.

Proxy

Un proxy est un logiciel qui fait office d’intermédiaire et se place entre deux hôtes pour surveiller, anonymiser, nettoyer ou encore optimiser les échanges. Lorsque vous naviguez sur le Web avec un nom de domaine ou un lien, votre navigateur se connecte à un serveur Web et récupère les ressources pour les traiter et les afficher.

Lorsque vous souhaitez anonymiser vos requêtes Web, vous pouvez utiliser un serveur proxy. Celui-ci téléchargera les ressources avant de vous les envoyer. Vous êtes alors complètement masqué par le serveur proxy qui agit comme une façade pour le site Web final.

Un exemple de serveur proxy (aussi nommé « forward proxy« ) est celui qui est mis en place par les entreprises pour bloquer l’accès de leurs employés à certains sites (comme les réseaux sociaux).

Reverse proxy
Reverse proxy Nginx
Nginx agit peut-être configuré en reverse proxy

Le reverse proxy est le logiciel intermédiaire qui fait le lien entre Internet et le serveur Web. Il agit comme une façade et est le point d’entrée de toutes les requêtes envoyées au site Web. Il existe, non pas pour protéger ou anonymiser les requêtes des utilisateurs sur Internet, mais pour apporter des fonctions supplémentaires au serveur Web. Il aggrège les requêtes des clients avant de les transférer à un ou plusieurs serveurs. Par exemple, le reverse proxy peut selon le contexte se charger de nettoyer les requêtes ou de mettre en cache les pages des serveurs Web pour les délivrer plus vite. C’est l’administrateur du reverse proxy qui définit les politiques de celui-ci.

Quels sont les reverse proxy du marché ?

Les reverse proxy les plus utilisé sur le marché sont :

  • Varnish
  • Nginx
  • Apache
  • Squid
  • IIS
  • Lighttpd
  • F5 BIG-IP
  • HAProxy
  • Nuster
  • Traefik
  • Caddy

Dans cette liste, certains ont parfois aussi la fonction de serveur Web, c’est par exemple le cas de Nginx.

Pourquoi faut-il utiliser un reverse-proxy sur son site Web ?

Plusieurs raisons peuvent vous pousser à utiliser reverse proxy. Nous avons compilé plusieurs avantages ci-après.

  • Sécurité : un reverse proxy peut protéger votre serveur Web des attaques avec des règles supplémentaires. Les pirates qui essayent de scanner votre serveur Web auront moins d’informations sur celui-ci.
  • Résolution SSL/TLS : Le reverse proxy peut agir comme un point de terminaison des requêtes HTTPS et négocier les certificats avec le navigateur de vos clients. Ces requêtes sont alors converties en HTTP sur le serveur Web. Vous libérez alors votre serveur Web de la gestion des certificats et celui-ci peut alors s’occuper d’actions supplémentaires comme le traitement de votre page Web.
  • Administration centralisée des certificats : grâce au reverse proxy vous pouvez placer toutes vos configurations sur un même serveur et réduire le temps passé à maintenir chaque serveur Web.
  • La compression : le reverse proxy peut se charger de compresser les ressources de votre site Web avant de les envoyer aux clients.
  • Mise en cache : vous pouvez configurer votre reverse proxy pour mettre en cache vos pages et faire en sorte de ne fournir que du contenu statique quand cela est possible. Il y a alors moins de requêtes vers le serveur et votre application Web (ex. WordPress) et vos pages seront plus rapides.

En conclusion sur la mise en cache avec WordPress

Il existe beaucoup de méthodes (parfois complémentaires les unes des autres) pour mettre en cache un site Web et réduire le temps que l’internaute passe à attendre. Que cela soit sur WordPress ou non, il est possible d’utiliser des plugins, des fonctions de cache, des prestataires ou même des logiciels.

Dans ce premier article sur le cache, nous avons abordé ce qu’est la mise en cache et avons abordé beaucoup de méthodes. Dans un prochain article, nous entrerons plus en détail dans la mise en œuvre d’un cache avec reverse proxy avec Varnish, mais aussi avec Nginx.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Articles qui pourraient vous intéresser