Forcer la mise à jour de fichiers CSS ou JS

[Yhann]

Bonjour

Lors d'une mise à jour du contenu d'un fichier CSS ou JS, il est fréquent que l'internaute ne bénéficie pas des changements, car son navigateur utilise la version, en cache, de ces fichiers.

Une technique fort rependue consiste à placer un paramètre en GET, dans l'appel du fichier, dans le code HTML :

monFichier.css?version=1

L'idée serait que, en changeant ici la valeur de la variable version, on forcera le navigateur à charger le fichier monFichier.css, sans avoir à le renommer.

Cette astuce est toujours vantée comme LA solution idéale, évitant le chargement systématique du fichier CSS ; le chargement ne se ferait que lorsque qu'on changerait les paramètres qui suivent le nom du fichier.

Sauf que ce n'est pas si sûr. Mes essais, avec Firefox 3, montrent que, dès l'instant ou un paramètre existe (comme dans le code ci-dessus), le navigateur procède au chargement du fichier systématiquement.

Je rejoint donc l'avis de Bil (dernier commentaire) de cette page.

Cette astuce n'aurait donc pas la valeur qu'on lui prête ?

Modifié 15 Octobre 2008 par Yhann

[KnockedMaster]

Salut,

Et pourquoi ne pas essayer comme ça :

style-v1.css

C'est simple ou j'ai encore raté un épisode ?!

Knockedmaster

[Yhann]

Là, tu devras renommer ton fichier CSS.

Le but du jeux est de ne pas le renommer, pour pouvoir automatiser, via un script côté serveur comme PHP, la valeur du paramètre passé en GET.

Ainsi, il serait possible d'écrire :

<script type="text/javascript" src="script.js?v=<?=@filemtime('script.js')?>"></script>
<link rel="stylesheet" href="style.css?v=<?=@filemtime('style.css')?>" type="text/css" media="screen" />

[KnockedMaster]

Mouais, mais bon, sauf que comme tu dis, ça ne fonctionne pas ...

En renommant ton fichier, ça peut très bien être automatisé aussi, faut voir comment tu l'appelles, comment tu le gères ... et ça fonctionne à tous les coups !

D'ailleurs, si je ne m'abuse, c'est préconisé comme ça dans les pratiques d'optimisation d'un site web par Steve Souders, responsable performances chez Yahoo!

++

Knockedmaster

Modifié 16 Octobre 2008 par KnockedMaster

[Kioob]

Hello,

j'utilise depuis longtemps une technique similaire, et j'aurais plusieurs remarques :

- attention à Firebug : en effet depuis Firefox 3 celui ci est buggé et a une facheuse tendance à désactiver le cache (généralement c'est une fois sur deux)

- normalement les URL avec paramètres ne doivent pas être mise en cache (cf RFC il me semble), il est donc préférable de passer par un rewriting pour obtenir le même genre d'URL qu'indique KnockedMaster.

Chez moi ça donne généralement un truc de ce genre : /include/default.{timestamp}.css

L'idéal étant certainement d'utiliser le numéro de version de subversion, mais faute de mieux...

[Dudu]

Salut

Deux choses:

- Tu changes le contenu de tes feuilles de style si souvent que ça ??

- Firefox 3 me semble bien buggé. À mon avis, pour avoir tant de bugs, il a du être sorti dans la précipitation, ce n'est pas possible autrement. Attends la prochaine mise-à-jour avant de te fier à lui

[Yhann]

normalement les URL avec paramètres ne doivent pas être mise en cache (cf RFC il me semble)

Si cela est vrai, alors l'explication est posée et logique.

Tu changes le contenu de tes feuilles de style si souvent que ça ??

Souvent, non pas vraiment, mais ça arrive.

Mais là, ce n'est pas tant l'utilité que la solution proposée que j'étudie. Et il me semble important que si la solution présente sur le web est "trompeuse", il faut bien le dire.

Voilà donc qui est fait, et pour ma part, comme vous le proposez, je me tournerai plus vers le renommage des fichiers...

[Kioob]

Le gros avantage pour moi est de pouvoir mettre un long temps d'expiration (30 jours par exemple), sans pour autant risquer que les mises à jour mettent un mois à se propager.

Donc même avec une seule mise à jour par an, j'achète.