Si vous êtes un peu soucieux des performances de votre site internet et que vous avez bien suivi les recommandations de Yahoo pour accélérer votre site internet, vous avez certainement modifier la configuration de votre serveur http pour que ce dernier envoie une entête http expire sur les fichiers css et javascript de votre site internet.
Utilisation du expire
Ajouter un expire sur vos css et javascript permet au serveur http d'indiquer au navigateur de ne pas redemander le fichier avant une certaine date.
Exemple d'entête expire
Expires: Sun, 29 Mar 2009 09:24:16 GMT
En ajoutant l'entête précédente à mon fichier css j'indique au navigateur client de ne pas redemander ce fichier avant Dimanche 29 mars 2009, soit dans un mois. Le navigateur client va alors garder en cache le fichier et ne le redemandera plus à mon serveur avant un mois.
Le problème des entêtes expire lors des mises à jour
Cependant, comme tout n'est pas tout rose, si j'ai besoin de faire une correction de bug dans mon javascript ( ou si je peins mon site en noir avec mon css ), les utilisateurs qui ont l'ancienne version du fichier en cache n'auront pas la mise à jour puisque leurs navigateurs de rafraichira pas le fichier. Normal ! c'est ce que je lui ai demander en utilisant l'expire.
Heureusement il existe une solution : Faire du versioning.
Utilisation du versioning
L'astuce du versioning de fichier statique, permet de résoudre les problèmes de version induit par Expire.
Principe du versioning
Le principe du versioning est d'ajouter une query string qui est modifiée lors de la mise à jour du fichier, dans les url des fichiers statiques, ainsi le navigateur client pense que le fichier est un nouveau fichier et télécharge la nouvelle version
Exemple de versioning
Mon site utilise le versioning sur les fichier javascript et css, petit exemple du code html que j'utilise dans mes pages pour faire du versioning :
<link rel="stylesheet" type="text/css" href="/static/dev/style.css?2c3c00e5d8153f7c1860c50c915a5619"/>
<script type="text/javascript" src="/js/global.js?8486712dbe6223b8fc48452459dbf95b"></script>
La query string "?2c3c00e5d8153f7c1860c50c915a5619" correspond au md5 du fichier css au moment où la page est générée. Comme le md5 change en fonction du contenu du fichier, je suis sûr que mes visiteurs auront la dernière version de mon fichier. Si vous ne savez pas comment calculer un md5 je vous invite à lire mon article sur la fonction md5_file de php.
Isn't it amazing ?, si mais je n'ai rien inventé, flickr utilise le versioning d'image sur ses pages de gallerie. Sur cette page le code html de la balise image est le suivant :
<img src="http://farm2.static.flickr.com/1189/755378645_a29383dc9d.jpg?v=0" width="500" height="375" [...]>
La query string "?v=0" indique le numéro de version de l'image, en utilisant le expire sur ses images flickr économise de la bande passante, et en utilisant le versioning de fichier statique les utilisateurs ont toujours la dernière version des fichiers.
Image : Jorge Garcia
