Le cache

Module 6: Vitesse · Temps de lecture : 9 minutes

Objectif pédagogique : après cette leçon, vous saurez expliquer les différents types de cache qui existent et configurer et vérifier correctement un cache de page.

Notions clés : cache de page, cache navigateur, Cache-Control, cache d'objets, Redis, OPcache, CDN, extension de cache, LiteSpeed Cache, exceptions (connecté, panier, paiement), vider le cache, doublons d'extensions de cache

Le cache : ne pas refaire deux fois le même travail

Un cache conserve le résultat d'un travail, afin de ne pas devoir le refaire la fois suivante. Sur un site WordPress, cela se produit à quatre endroits, du plus important au plus petit :

Le cache de page

La leçon 1.2 l'a montré : sans cache, WordPress recrée entièrement la page à chaque visite. Avec un cache de page, le premier visiteur la génère, et les suivants reçoivent le code HTML enregistré. Un TTFB d'une seconde peut ainsi passer à quelques centièmes de seconde, et votre offre peut supporter bien plus de visiteurs simultanés.

La manière d'obtenir un cache de page dépend de votre serveur web :

• LiteSpeed (nombreux hébergements mutualisés, dont WebOké) : le serveur web dispose de son propre cache. L'extension gratuite LiteSpeed Cache le pilote depuis WordPress : quelles pages peuvent entrer dans le cache, quand elles sont vidées. Comme le cache se trouve dans le serveur web, PHP n'est même pas démarré pour une page mise en cache.
• Apache ou nginx : une extension de cache qui enregistre le code HTML sous forme de fichiers, comme WP Super Cache, W3 Total Cache ou une extension payante comme WP Rocket. Ou un cache géré par l'hébergeur au niveau du serveur.
• L'hébergement WordPress géré dispose souvent de son propre cache ; dans ce cas, vous n'installez généralement pas d'extension de cache.

Choisissez-en une seule. Deux extensions de cache en même temps (par exemple LiteSpeed Cache et WP Rocket) se gênent mutuellement : travail en double, pages qui ne sont pas vidées, erreurs étranges. Sur un serveur LiteSpeed, LiteSpeed Cache fonctionne avec le cache du serveur web ; une autre extension de cache ne le peut pas.

Ce qui ne doit pas entrer dans le cache

Un cache de page donne le même code HTML à tout le monde. Cela pose problème pour les pages qui diffèrent selon le visiteur :

• les utilisateurs connectés (la barre d'administration, « Bienvenue, Lisa ») ;
• le panier, le paiement et Mon compte sur une boutique en ligne ;
• les pages avec un formulaire contenant un code à usage unique (nonce), qui expire après un certain temps ;
• les pages qui affichent un contenu différent selon la localisation, la langue ou un cookie.

Les bonnes extensions de cache ignorent automatiquement les utilisateurs connectés et les pages WooCommerce connues. Pour d'autres extensions (un espace membre, un système de réservation), vous devez définir vous-même des exceptions. Le signe que quelque chose ne va pas : un visiteur voit le panier de quelqu'un d'autre, ou un formulaire renvoie « expiré » ou « demande invalide ».

Vider le cache : quand le cache est-il périmé ?

Si vous modifiez une page, la version enregistrée doit disparaître. Lors de l'enregistrement d'un article, les extensions de cache vident généralement cette page, la page d'accueil et les archives. Lors d'une modification du menu, du thème ou d'un widget, il faut souvent vider tout le cache. Si vous constatez l'ancienne version après une modification, videz le cache (dans la barre d'administration de l'extension de cache) et vérifiez dans une fenêtre de navigation privée, afin que votre propre cache navigateur n'interfère pas.

Le cache navigateur

Le serveur indique au navigateur, via des en-têtes, combien de temps il peut conserver un fichier :

cache-control: public, max-age=31536000

Cela signifie : conservez ceci pendant un an. Pour les feuilles de style, les scripts, les polices et les images, une longue durée convient parfaitement, car WordPress ajoute un ?ver= différent après l'adresse lors d'une nouvelle version, et le navigateur considère alors qu'il s'agit d'un nouveau fichier. Pour le code HTML lui-même, une courte durée (voire aucune) est habituelle, afin que les visiteurs voient rapidement les modifications.

De nombreux hébergeurs et extensions de cache gèrent cela. Dans l'exercice de cette leçon, vous allez le vérifier.

Cache d'objets et Redis

Un cache de page n'aide pas pour les utilisateurs connectés ni pour le panier. C'est là qu'intervient un cache d'objets : WordPress conserve le résultat des requêtes à la base de données en mémoire, dans un programme comme Redis ou Memcached. La fois suivante où la même requête se présente, WordPress récupère la réponse depuis la mémoire plutôt que depuis la base de données.

Cela est particulièrement utile pour les boutiques en ligne, les sites membres et les sites avec de nombreux rédacteurs connectés. Pour un site d'information classique avec un cache de page, la différence est minime. Un cache d'objets nécessite que votre hébergeur propose Redis ou Memcached ; vous l'activez ensuite avec une extension (LiteSpeed Cache le permet, il existe aussi des extensions dédiées).

Un CDN

Un CDN (content delivery network, réseau de diffusion de contenu) est un réseau de serveurs répartis en de nombreux endroits dans le monde qui conservent des copies de vos fichiers (et parfois de vos pages entières). Un visiteur les reçoit depuis le serveur le plus proche. Cela aide surtout pour les visiteurs éloignés et en cas de trafic important. Pour un site néerlandais avec des visiteurs néerlandais sur un serveur néerlandais, le gain est minime. Un CDN avec proxy (comme Cloudflare) modifie également votre DNS et votre certificat (cours DNS, leçon 7.5) ; ne faites pas cela sans comprendre ce que cela implique.

En pratique : à quoi cela ressemble-t-il dans un panneau

Nous utilisons LiteSpeed Cache sur un serveur LiteSpeed comme exemple. D'autres extensions de cache proposent des réglages similaires sous d'autres noms.

1. Installez et activez LiteSpeed Cache dans Extensions > Ajouter une extension.
2. Ouvrez LiteSpeed Cache > Cache : « Activer le cache » est activé, « Mettre en cache les utilisateurs connectés » est désactivé (sauf si vous savez ce que vous faites).
3. Pour une boutique en ligne : vérifiez dans Exclure que le panier, le paiement et Mon compte y figurent (avec WooCommerce, cela se fait automatiquement).
4. Laissez d'abord désactivées les autres fonctionnalités (optimisation du CSS et du JavaScript, images). Activez-les une par une et testez après chaque étape : ce sont justement ces fonctionnalités qui peuvent parfois casser un thème.
5. Vérifiez dans une fenêtre de navigation privée avec les outils de développement (F12, Réseau, première requête) : lors du deuxième chargement, vous devez voir x-litespeed-cache: hit.

Résumé

• Il existe quatre types de cache : page (le gain le plus important), navigateur, objet et OPcache.
• Sur un serveur LiteSpeed, LiteSpeed Cache pilote le cache du serveur web ; sur Apache ou nginx, vous utilisez une autre extension de cache. Choisissez-en une seule.
• Les utilisateurs connectés, le panier, le paiement et les pages personnelles n'ont pas leur place dans le cache de page.
• Videz le cache après des modifications du menu ou du thème et vérifiez dans une fenêtre de navigation privée.
• Un cache d'objets (Redis) aide pour les boutiques en ligne et les utilisateurs connectés ; un CDN aide surtout pour les visiteurs éloignés et le trafic important.

Quiz

Exercice

Exercice A6.2 : Votre cache de page fonctionne-t-il ? Indiquez l'adresse de votre site. Le programme interroge la page d'accueil deux fois à bref intervalle, sans cookies, et vérifie, lors de la deuxième requête, les en-têtes indiquant un succès de cache (x-litespeed-cache: hit, x-cache: HIT, cf-cache-status: HIT, un age supérieur à 0, ou l'en-tête d'un autre cache connu). Ensuite, il interroge une feuille de style issue de la page d'accueil et vérifie que le navigateur peut la conserver au moins sept jours (cache-control: max-age ou expires). Notez quel cache vous utilisez.

Pour aller plus loin

Ces articles décrivent les étapes dans les panneaux de WebOké ; dans d'autres panneaux, le fonctionnement est similaire.

• Guide DirectAdmin 18.3: Mon site web est lent
• Guide DirectAdmin 15.7: Redis
• Mon site est lent ou utilise trop de CPU : comment le rendre plus rapide
• OPcache : 30 secondes de délai lors de la modification d'un fichier PHP
• Gzip est-il activé dans DirectAdmin et LiteSpeed ou Apache ?
• Le cache dans WordPress (developer.wordpress.org, en anglais) : https://developer.wordpress.org/advanced-administration/performance/cache/