Il est très important de bien configurer votre serveur nginx pour servir correctement les fichiers statiques (images, javascript, css, texte…).

Cela vous permet d’économiser la bande passante de votre serveur et également d’améliorer l’expérience utilisateur.
L’utilisateur aura l’impression que votre site se charge plus vite.

L’utilisateur n’aura pas besoin de télécharger de nouveau ce fichier js ou l’image car son navigateur l’aura déjà dans son propre cache.

La mise en cache des fichiers statiques, coté du navigateur, se fait à l’aide des headers renvoyés par le serveur.

Il faut être sur d’avoir le module ngx_http_headers_module compilé avec nginx. C’est le cas par défaut.

Il y a plusieurs paramètres à mettre en place pour configurer correctement nos headers.

Prenons l’exemple suivant :

location ~* \.(png|jpg|jpeg|gif|ico|woff|otf|ttf)$ {
  root /var/www/static/;
  access_log off;
  log_not_found off;
}

1. expires

Ce paramètre permet de contrôler la durée de mise en cache. Il est par défaut à off.
La directive expires permet d’agir sur les headers http Expires et Cache-Control

Ce paramètre peut prendre différents paramètres epoch,max,une durée, off ou une heure.

• off: désactive les headers http Expires et Cache-Control

• epoch: met le header Expires à la date du 1 January, 1970 00:00:01 GMT.

• max: met le header Expires à la date du Thu, 31 Dec 2037 23:55:55 GMT et le Cache-Control au maximum c’est à dire à 10ans

• une durée: met le cache à une durée relatif par rapport à l’accès au fichier.
  Par exemple expires 10d; signifie que votre navigateur conservera cette version de fichier pendant 10 jours.

• une heure: met une heure à partir de laquelle de fichier expire dans la journée.
  Il doit être préfixé par un @. Par exemple expires @12:10; signifie que votre fichier va expiré à 12h10

Dans la plupart des cas un expires max; ou expires 1y; sera bien efficace. Dans notre exemple cela donne :

location ~* \.(png|jpg|jpeg|gif|ico|woff|otf|ttf)$ {
  root /var/www/static/;
  access_log off;
  log_not_found off;
  expires 1y;
}

2. add_header

Cette directive prend des options libres c’est à nous de renseigner ce que l’on veut. Nos paramètres doivent correspondre aux standard du protocol http pour être interprété par l’ensemble des navigateurs et proxies.

Nous allons intervenir sur le header Cache-Control. Avec le paramètre expires nous sommes déjà intervenu sur le cache-control pour mettre max-age=31536000. Il faut maintenant décrire la façon dont cela doit être conserver. Plusieurs options sont à notre disposition :

• no-cache: cela indique que la prochaine requête sur la même url devra être validé par le serveur pour confirmer qu’elle n’a pas changé.
• no-store : interdit de stocker la réponse. On ne l’utilise pas pour les fichiers statiques mais généralement sur des urls qui contiennent des données confidentielles (mon compte par exemple).
• private: ne sera mis en cache que par les navigateurs et jamais par les serveurs proxies.
• public: peut être stocké par n’importe qui. Ce paramètre est implicite si le paramètre max-age est déjà en place.

Nous allons donc de notre coté mettre le paramètre add_header Cache-Control « public »; qui va permettre de mettre nos fichiers en cache pour tout le monde et de les stocker. Dans notre exemple cela donne :

location ~* \.(png|jpg|jpeg|gif|ico|woff|otf|ttf)$ {
  root /var/www/static/;
  access_log off;
  log_not_found off;
  expires 1y;
  add_header Cache-Control "public";
}

3. Test

A l’aide d’un curl nous allons tester que cela fonctionne.

$ curl -I https://www.cloud-devops.fr/wp-content/uploads/2016/02/log_nginx.jpg
HTTP/1.1 200 OK
Server: nginx
Date: Fri, 05 Feb 2016 12:07:27 GMT
Content-Type: image/jpeg
Content-Length: 181406
Last-Modified: Thu, 04 Feb 2016 21:31:59 GMT
Connection: keep-alive
ETag: "56b3c34f-2c49e"
Expires: Sat, 04 Feb 2017 12:07:27 GMT
Cache-Control: max-age=31536000
Pragma: public
Cache-Control: public
Vary: Accept-Encoding
Accept-Ranges: bytes

Nous avons le header Cache-Control à public, le Cache-control max-age à 365 jours et un Expires à la date du Sat, 04 Feb 2017 12:07:27 GMT.
Tout fonctionne parfaitement !