[Apache] Utiliser le cache des navigateurs

Parce que les sites internet sont de plus en plus esthétiques et par conséquent ont de plus en plus de ressources statiques (javascript, CSS ou images), il devient nécessaire de mettre en place des politiques de cache. Il en existe plusieurs sophistiqués tels que l'utilisation de serveurs de cache tels que Squid, les CDN mais il en est un simple et trop souvent oublié : le cache des navigateurs.
L'utilsation du cache navigateur est simple à mettre en oeuvre car il consiste à positionner des headers dans la réponse à la requête HTTP. La mise en place de ces headers se fait simplement grâce au serveur httpd de la fondation Apache.

Les headers de cache
Configuration de httpd
A propos de ETag

Les headers de cache :

Les navigateurs internet possèdent un cache interne dans lequel ils stockent diverses éléments afin de les restituer rapidement en cas de besoin sans avoir à interroger le serveur distant et ainsi gagner le temps de transfert réseau.

Il est possible de jouer avec les headers HTTP afin de provoquer la mise en cache d'une ressource pour un temps voulu ou au contraire pour interdire cette mise en cache.
Ces headers sont :

Cache-Control
Expires

Cache-Control est le header permettant de mettre en cache ou non la ressource. Ce header peut prendre plusieurs valeurs dont les principales sont :

max-age : définit la durée de mise en cache par le navigateur en cache de la ressource en seconde;
store et no-store : indiquent si la ressource doit être mise en cache par le navigateur.

Cache-Control est un header géré par le module Headers.

Expires indique la durée de mise en cache généralement à partir du content-type de la ressource. Il est spécifié avec une durée à ajouter et ce de manière assez souple : une quantité de secondes, de minutes, d'heures, de jours, de mois ou encore d'années.
Ce header est géré par le module Expires.

Configuration de httpd :

Les modules nécessaires à la gestion des caches ne sont pas intégrés dans le noyau de httpd. Par conséquent, il faut le compiler avec les options --enable-headers et --enable-expires.

ExpiresActive On

ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType image/gif "access plus 1 year "
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"

<FilesMatch "\.(gif|jpg|jpeg|png|js|css)$">
        ExpiresDefault "access plus 1 year"
        Header unset ETag
        Header set Cache-control "max-age=31536000, store"
</FilesMatch>

Quelques explications :

ExpiresActive On : activations du module Expires
ExpiresByType : suivit du content-type considéré, permet de mettre en cache pour la durée souhaitée. Ici 1 an à partir de la date d'accès au serveur. Les options disponibles sont seconds, minutes, hours, days, months et years. Ces options sont cumulables
Les lignes comprises entre les balises FilesMatch sont utilisées pour le module Headers et fixent la durée de cache pour les extensions de ressources spécifiées (Cache-Control et ExpiresDefaullt à un an), désactivent le ETags.

A propos de ETag :

Il existe une autre manière de mettre en place le cache des ressource par le biais de Etag. Ce header est généré par défaut par httpd mais peut se révéler problématique si une ferme de serveurs web est utilisé car il est généré par un mécanisme interne se basant sur la taille de la ressource et la date de modification ou bien par un checksum. Les méthodes de génération pouvant être différentes selon les serveurs, la gestion de cache peut donc en être compromise.

Pavnay