Lorsque vous visitez un site web, votre navigateur va interroger le serveur et charger toutes les ressources (html, css, js, images, etc…) afin de vous afficher la page demandée. Chaque fois que vous allez charger une ressource cela va prendre un certain temps.
Le cache va permettre de stocker ces fichiers sur votre disque dur afin d’éviter au navigateur de requêter le serveur à chaque appel.
Cela permet de :
- Réduire le temps d’attente
- Réduire le trafic réseau
Nous allons voir les bases de la mise en cache afin de comprendre comment accélérer la vitesse de chargement de votre site.
Les en-têtes HTTP Expires et Cache Control
En-tête HTTP Expires
L’en-tête HTTP Expires indique le temps pendant lequel le fichier reste en cache. Tant que ce délai n’est pas dépassé, le navigateur récupère le fichier qui est en cache et ne le recharge pas.
Ce n’est qu’une fois ce délai dépassé que le navigateur renvoi une demande au serveur pour vérifier s’il y a eu une mise à jour du ficher. C’est ce que nous verrons plus loin avec les validateurs.
Pour vos sites, vous pouvez gérer le cache en insérant les lignes suivantes dans votre fichier .htaccess :
<IfModule mod_expires.c> ExpiresActive on ExpiresByType image/jpg "access plus 20 days" ExpiresByType image/png "access plus 20 days" ExpiresByType image/gif "access plus 20 days" ExpiresByType image/jpeg "access plus 20 days" ExpiresByType text/css "access plus 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" </IfModule>
A vous de modifier le temps de mise en cache suivant vos besoins. Vous pouvez utiliser :
- years
- months
- weeks
- days
- hours
- minutes
- seconds
Cache Control
Le cache-contrôle utilise différents en-têtes de réponse. Une ressource peut également être public ou privé.
Mais celle qui nous intéresse ici est max-age. Qu’est-ce que le max-age ? Il s’agit d’une donnée en seconde qui indiquera pendant combien de temps la ressource est considérée comme fraiche depuis l’exécution de la 1ere requête. Pendant tout ce laps de temps, le navigateur utilisera la ressource en cache.
Exemple : Si j’ai une ressource avec un max age de 86400, pendant les 24 heures suivant la 1ere requête, le fichier ne sera pas rechargé.
Voici un exemple de code à ajouter dans votre fichier .htaccess :
# BEGIN Cache-Control Headers <ifmodule mod_headers.c> <filesmatch "\\.(ico|jpe?g|png|gif|swf|gz|ttf)$"> Header set Cache-Control "max-age=2592000" </filesmatch> <filesmatch "\\.(css)$"> Header set Cache-Control "max-age=2592000" </filesmatch> <filesmatch "\\.(js)$"> Header set Cache-Control "max-age=2592000" </filesmatch> <filesmatch "\\.(html|htm)$"> Header set Cache-Control "max-age=7200" </filesmatch> </ifmodule> # END Cache-Control Headers
Là aussi, à vous d’optimiser ce code en fonction de vos besoins.
Expires ou Cache Control : Quel est le meilleur choix ?
Expires et Cache Control, ont le même rôle. Il n’est pas nécessaire d’utiliser les deux si vous ne maîtrisez pas le sujet.
Mais si les deux systèmes sont utilisés, cela ne posera pas de problème non plus. Sachez que la directive Cache Control max-age prend la priorité sur le Expires.
Que dit Google à propos de la mise en cache navigateur ?
Il se contredit…un peu. Dans ses ressources sur page speed insight, Google nous informe sur ses préférences en matière de gestion du cache :
«Nous recommandons d’utiliser l’en-tête Expires plutôt que Cache-Control: max-age, car le premier est plus largement accepté. »
Mais dans son sujet sur la mise en cache, il est indiqué :
« L’en-tête Cache-Control a été défini dans le cadre de la spécification HTTP/1.1 et remplace les en-têtes précédents (par exemple Expires) utilisés pour définir les règles de mise en cache de la réponse. Tous les navigateurs modernes sont compatibles avec Cache-Control. Nous n’avons donc besoin de rien d’autre.»
Les navigateurs gèrent cela correctement et l’utilisation de l’un ou l’autre ne changera pas vos performances. Par contre le Cache Control vous permet un contrôle plus précis en jouant avec les directives.
A quoi servent les validateurs Last Modified et ETag ?
Le validateur va permettre de vérifier que l’élément en cache demandé a changé. En effet, il est inutile d’effectuer le téléchargement de la ressource si elle n’a pas été modifiée.
Last Modified
Le validateur le plus courant est Last-Modified. Il indique la date de dernière modification de la ressource.
Cache-Control: max-age=31536000 Last-Modified: Mon, 03 Jan 2016 17:45:57 GMT
Pour savoir si le navigateur doit télécharger le fichier, il envoie une requête avec un en-tête If-Modified-Since afin de savoir s’il y a eu une modification.
L’ETag
L’ETag a le même objectif. Il permet de contrôler si la ressource en cache est différente du serveur. Contrairement au Last-modified, l’ETag ne renvoie pas de date mais un code (une empreinte digitale).
ETag: "686897696a7c876b7e"
Les navigateurs vont utiliser l’en-tête If-None-Match afin de savoir si l’empreinte est identique. Si elle est différente, le cache téléchargera à nouveau la ressource.
Dans le cas où les ressources n’ont pas changé, après que les caches aient envoyé la requête, le serveur renverra une réponse 304 Not Modified qui indiquera au navigateur de reprendre le fichier qu’il a stocké.
Mettre à jour les fichiers en cache
Le cache peut poser souci en cas de modification sur le site. Imaginons que vous venez de faire des modifications CSS. Le problème est que vous avez mis vos fichiers CSS en cache pendant une semaine. Les nouveaux internautes verront alors la version modifiée de votre site tandis que les internautes ayant déjà visité votre site cette dernière semaine, auront accès à l’ancienne version puisque les fichiers seront encore en cache.
En effet, le navigateur n’ira pas consulter le serveur puisque le délai d’expiration du max-age ou du expires n’est pas dépassé.
La question est donc comment faire pour l’internaute voit toujours la version à jour de votre site web ?
Tout simplement en modifiant le nom du fichier. Vous pouvez incorporer par exemple une version à votre fichier : style.V2.css
L’URL est alors modifiée. Aucun internaute n’aura ce fichier en cache. Il sera téléchargé sur le serveur par tous les internautes.
La vitesse de votre site améliorée
Pour conclure, si vous travaillez votre note sur GT Metrix, voici un exemple de notation avant et après optimisation du cache dans le .htaccess :
– Avant optimisation du cache :
– Après optimisation du cache :
Avoir une note élevée indique que la vitesse de chargement de votre site est optimisée. Cela vous permettra d’avoir de meilleurs résultats en termes de performance.
Ces notes permettent de vous donner une idée de l’optimisation actuelle de votre site. Cette note est définie grâce à plusieurs critères présentés sous forme de recommandations. Afin de vous donner une situation plus précise, chaque recommandation est également notée afin que vous puissiez visualiser l’état d’optimisation de chaque critère de performance.
Cet article a été rédigé pour le blog de l’Agence Web.