Cache du contenu statique en .htaccess

Le temps de chargement des pages est (depuis longtemps) un point crucial dans le développement web. Il existe de nombreuses façons d’accélérer ce temps de chargement, dont une, la mise en cache par le navigateur des éléments statiques.

Le principe :

Sur votre site vous utilisez une feuille de style, des fichiers javascripts ainsi que des images qui sont les mêmes sur plusieurs de vos pages (voir sur toutes…). L’objectif est de ne les servir qu’une seule fois à chaque visiteur.
Pour cela, les navigateurs ont un cache (également appelés « fichiers temporaires »), qui lui permet de réutiliser des éléments qu’il a déjà chargé, pour peu que votre site lui ai indiqué de tenir ce comportement.

Gain estimé :

Les éléments statiques sont assez nombreux et volumineux, que ce soit les librairies javascript (jQuery, les lightbox, etc …) ou encore les images (une belle bannière en header du site, etc …), on accumule les kilo-octets…
Lorsque ces éléments sont mis en cache, le volume de données transférées se voit ainsi divisé par 6 ou 10.

Comment ?

Ce comportement peut être défini dans un fichier .htaccess, voici le code à insérer :

<ifModule mod_headers.c>
  <FilesMatch "\.(js|css|ico|jpg|jpeg|png|gif)$">
    Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT"
    Header unset ETag
    FileETag None
    Header unset Last-Modified
    Header set Cache-Control "max-age=864000, public"
  </FilesMatch>
</ifModule>

Il faut également activer le mod_headers sur le serveur Apache (par ex : « sudo a2enmod headers » sous debian/ubuntu)

Analyse du code :

• « Header set Expires … » : indique au navigateur un date d’expiration dans un futur (assez) lointain
• « Header unset ETag » : va nous permettre de débrayer le système de validation de contenu du navigateur, ainsi c’est notre Cache-Control qui va gérer la mise en cache.
• « FileEtag None » : idem ci-dessus
• « Header unset Last-Modified » : comme pour les Etag, nous ne voulons pas que ce soit le navigateur qui décide de rafraichir le contenu
• « Header set Cache-Control … » : Nous indiquons au cache du navigateur que le contenu est valide pendant 10 jours (exprimé en secondes)

Conclusion :

Cette technique est assez simple à mettre en place, permet d’économiser de la bande passante et de servir ses pages plus rapidement à chaque visiteur (à partir de sa seconde page vue…).
Il y a donc tout à gagner en adoptant cette pratique.