Faire en sorte que les navigateurs mettent en cache les fichiers statiques sur nginx

Ce tutoriel explique comment vous pouvez configurer nginx pour définir l’en-tête HTTP Expires et la directive max-age de l’en-tête HTTP Cache-Control des fichiers statiques (tels que les images, les fichiers CSS et Javascript) à une date future afin que ces fichiers soient mis en cache par les navigateurs de vos visiteurs. Cela permet d’économiser de la bande passante et rend votre site web plus rapide (si un utilisateur visite votre site une deuxième fois, les fichiers statiques seront récupérés depuis le cache du navigateur).

Je ne donne aucune garantie que cela fonctionnera pour vous !

1 Remarque préliminaire

Je suppose que vous avez une configuration nginx fonctionnelle, par exemple comme indiqué dans ce tutoriel : Installer Nginx avec PHP5 (et PHP-FPM) et support MySQL (LEMP) sur Ubuntu 12.04 LTS

2 Configuration de nginx

L’en-tête HTTP Expires peut être défini à l’aide de la directive expires qui peut être placée à l’intérieur de http {}, server {}, location {}, ou d’une instruction if à l’intérieur d’un bloc location {}. En général, vous l’utiliserez dans un bloc location pour vos fichiers statiques, par exemple comme suit :

| location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; } |

Dans l’exemple ci-dessus, tous les fichiers .jpg, .jpeg, .png, .gif, .ico, .css et .js obtiennent un en-tête Expires avec une date 365 jours dans le futur à partir du moment d’accès du navigateur. Par conséquent, vous devez vous assurer que le bloc location {} ne contient vraiment que des fichiers statiques qui peuvent être mis en cache par les navigateurs.

Rechargez nginx après vos modifications :

/etc/init.d/nginx reload

Vous pouvez utiliser les paramètres de temps suivants avec la directive expires :

• off fait que les en-têtes Expires et Cache-Control ne seront pas modifiés.
• epoch définit l’en-tête Expires au 1er janvier 1970 00:00:01 GMT.
• max définit l’en-tête Expires au 31 décembre 2037 23:59:59 GMT, et le Cache-Control max-age à 10 ans.
• Un temps sans préfixe @ signifie un temps d’expiration relatif au moment d’accès du navigateur. Un temps négatif peut être spécifié, ce qui définit l’en-tête Cache-Control à no-cache. Exemple : expires 10d; ou expires 14w3d;
• Un temps avec un préfixe @ spécifie un temps d’expiration absolu dans la journée, écrit sous la forme Hh ou Hh:Mm, où H varie de 0 à 24, et M varie de 0 à 59. Exemple : expires @15:34;

Vous pouvez utiliser les unités de temps suivantes :

• ms : millisecondes
• s : secondes
• m : minutes
• h : heures
• d : jours
• w : semaines
• M : mois (30 jours)
• y : années (365 jours)

Exemples : 1h30m pour une heure trente minutes, 1y6M pour un an et six mois.

Notez également que si vous utilisez un en-tête Expires lointain, vous devez changer le nom de fichier du composant chaque fois que le composant change. Par conséquent, il est judicieux de versionner vos fichiers. Par exemple, si vous avez un fichier javascript.js et que vous souhaitez le modifier, vous devez ajouter un numéro de version au nom du fichier du fichier modifié (par exemple, javascript-1.1.js) afin que les navigateurs doivent le télécharger. Si vous ne changez pas le nom du fichier, les navigateurs chargeront le fichier (ancien) depuis leur cache.

Au lieu de baser l’en-tête Expires sur le temps d’accès du navigateur (par exemple, expires 10d;), vous pouvez également le baser sur la date de modification d’un fichier (veuillez noter que cela ne fonctionne que pour des fichiers réels qui sont stockés sur le disque dur !) en utilisant le mot-clé modified qui précède le temps :

expires modified 10d;

3 Test

Pour tester si votre configuration fonctionne, vous pouvez installer le plugin Live HTTP Headers pour Firefox et accéder à un fichier statique via Firefox (par exemple, une image). Dans la sortie de Live HTTP Headers, vous devriez maintenant voir un en-tête Expires et un en-tête Cache-Control avec une directive max-age (max-age contient une valeur en secondes, par exemple 31536000 est un an dans le futur) :

4 Liens

• nginx HttpHeadersModule : http://wiki.nginx.org/HttpHeadersModule
• Plugin Live HTTP Headers pour Firefox : https://addons.mozilla.org/en-us/firefox/addon/live-http-headers/

À propos de l’auteur

Falko Timme est le propriétaire de Timme Hosting (hébergement web nginx ultra-rapide). Il est le principal mainteneur de HowtoForge (depuis 2005) et l’un des développeurs principaux d’ISPConfig (depuis 2000). Il a également contribué au livre O’Reilly “Administration système Linux”.