• Anthony Heddings
• July 29, 2020, 11:00am EDT

Le navigateur de chaque utilisateur utilise un cache intégré pour stocker les objets téléchargés, ce qui peut accélérer considérablement les visites répétées de votre site Web en le chargeant à partir du disque plutôt que du réseau. Voici comment le configurer dans Apache.

Comment fonctionne la mise en cache ?

La première fois qu’un utilisateur se connecte à votre site, il télécharge toutes les ressources statiques nécessaires au rendu de la page, y compris des choses comme votre logo. Lorsqu’il navigue vers une nouvelle page, celle-ci chargera votre logo depuis la mémoire plutôt que de le redemander, ce qui accélère considérablement les performances et réduit la charge de votre serveur web dans le processus.

Il s’agit d’une mise en cache côté client, mais de nombreux sites feront également appel à un réseau de diffusion de contenu, ou CDN. Un CDN est un réseau de serveurs qui se trouvent devant votre serveur web principal, ou serveur « d’origine ». Ce réseau met vos pages en cache, ce qui augmente votre bande passante maximale, réduit la latence d’accès et diminue considérablement la pression exercée sur votre serveur d’origine. Si vous souhaitez en savoir plus sur les CDN, vous pouvez lire notre guide à leur sujet ici.

Cache-Control est un en-tête que vous pouvez configurer pour que votre serveur web ajoute à toutes les requêtes sortantes, qui indiquera au navigateur et aux CDN comment mettre votre contenu en cache.

Certaines pages ne doivent jamais être mises en cache par des caches partagés comme les CDN. En faisant cela, vous risquez d’afficher les informations personnelles d’un utilisateur à d’autres. En règle générale, si la page va être exactement la même pour tous les utilisateurs, comme votre page d’accueil, vous pouvez la mettre en cache. Si elle affiche des informations confidentielles sur l’utilisateur, vous voudrez la mettre sur liste noire de votre cache. Les ressources statiques, comme les CSS et les images, peuvent généralement être mises en cache pour tout le monde, souvent pendant beaucoup plus longtemps.

Le temps que les objets passent dans le cache est également important. Appelé Time-To-Live (TTL), l’âge maximal de vos ressources en cache détermine combien de temps l’objet restera dans le cache avant d’être invalidé, et d’inciter l’utilisateur à demander un nouvel objet. Pour les ressources statiques qui ne changent pas beaucoup, vous pouvez définir des valeurs TTL très élevées, généralement autour de deux ans. Pour les choses que vous pourriez vouloir mettre à jour, vous voudrez définir des valeurs TTL plus faibles pour empêcher les ressources périmées de rester trop longtemps dans le cache.

Vous pouvez toujours utiliser des noms de fichiers versionnés pour déclencher un rechargement du cache. Si vous publiez une nouvelle version d’une feuille de style CSS, vous pouvez la nommer styles-1.0.1.css, et le navigateur de l’utilisateur (et tous les CDN en amont) la verra comme un nouveau fichier qui doit être retéléchargé. En outre, pour certains CDN, vous pouvez émettre des invalidations manuelles pour vider le cache existant sans changer aucun nom de fichier.

Comment utiliser Cache-Control dans Apache

Cache-Control a quelques options :

• public – Peut être mis en cache par n’importe qui, y compris les navigateurs et les CDN. Utilisez ceci pour la plupart des objets statiques.
• private – Contient des données sensibles qui ne peuvent pas être mises en cache par les CDN ou les reverse proxies. Le navigateur de l’utilisateur peut les mettre en cache localement. Utilisez ceci pour la plupart des pages authentifiées.
• no-cache – Malgré son nom, cela ne désactive pas la mise en cache. Le navigateur peut toujours mettre en cache la réponse pour des raisons de performances, mais il doit vérifier les mises à jour auprès du serveur d’origine avant de l’utiliser. Utilisez ceci si vous voulez que l’utilisateur revalide à chaque fois.
• no-store – Désactive entièrement la mise en cache. Utilisez ceci uniquement pour les données très sensibles qui ne devraient pas être envoyées deux fois.

En outre, vous pouvez ajouter la directive no-transform, qui désactive toutes les conversions qui peuvent être faites à la ressource. Par exemple, certains CDN compriment les images pour réduire la bande passante. Cette directive désactive ce comportement.

Dans Apache, vous devrez définir cet en-tête manuellement à l’aide de la directive Header set, comme suit :

Header set Cache-Control "max-age=84600, public"

La valeur max-age est définie en secondes, par exemple, max-age=300 pour un TTL de cinq minutes, et max-age=63072000 pour deux ans.

Vous pouvez placer cette directive à la racine de votre configuration pour l’appliquer à l’ensemble du site, mais une meilleure méthode consiste à appliquer les paramètres en fonction du type de fichier. Par exemple, pour définir un TTL élevé pour la plupart des médias statiques, vous pouvez utiliser un bloc FilesMatch:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=63072000, public" </FilesMatch>

Si vous voulez mettre sur liste noire un chemin spécifique pour qu’il ne soit pas mis en cache par les CDN, vous pouvez utiliser un bloc Directory :

<Directory "/private"> Header set Cache-Control "max-age=300, private" </Directory> 

Ou simplement faire correspondre un seul fichier:

<File "protected.html"> Header set Cache-Control "max-age=300, private" </File>

Les blocs avec les correspondances les plus spécifiques auront la priorité sur les correspondances regex générales, mais vous voudrez vérifier que tout est correctement défini du côté de la réception. Vous pouvez vérifier cela à partir des DevTools de Chrome, sous Network > Headers.

Si vous n’avez accès qu’à la configuration .htaccess, vous pouvez toujours utiliser la correspondance de répertoire en créant un nouveau fichier .htaccess dans chaque sous-répertoire.

Utiliser le contrôle de substitution pour modifier directement le comportement des CDN

L’en-tête Surrogate-Control fonctionne exactement comme Cache-Control, mais détaille des instructions spécifiques pour les CDN et les reverse proxies, plutôt que pour les utilisateurs finaux. De cette façon, vous pouvez dire aux CDN de faire une chose, mais envoyer différentes directions au navigateur.

Vous devrez définir cet en-tête manuellement, de la même manière que vous définissez Cache-Control:

Header set Surrogate-Control "max-age=300, public"

Vous voudrez certainement tester avec votre CDN pour vérifier que cela fonctionne-Surrogate-Control est assez nouveau, et n’est pas universel.