Discussion :

[nicolas2603]

Bonjour, je cherche à optimiser la navigation de mon site Internet, et pour cela j'ai défini une durée de mise en cache des fichiers dans mon .htaccess.
Seulement, je souhaite mettre en cache toutes les images, fichiers css et fichiers javascript pour 1 semaine, à l'exception d'un fichier javascript.
J'ai donc tenté de mettre ceci dans mon .htaccess, mais comment savoir si ce code est bon ou si ça ne sert à rien ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<FilesMatch ".(gif|jpg|jpeg|png|ico|swf|js|css|pdf|xls|css|js)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "monfichier.js">
Header unset Cache-Control
</FilesMatch>

Merci d'avance.

[_Mac_]

En testant ?

Avant tout, vide le cache de ton navigateur. Ensuite, il te faut un outil du genre LiveHttpHeaders sur Firefox ou plus gros du genre Wireshark pour voir les en-têtes HTTP renvoyés par le serveur Web. Ce que tu peux peut-être aussi faire avec Firefox c'est télécharger 2 ou 3 fichiers .js et .css différents directement (en tapant leur URL dans la barre d'adresse) et de faire un clic droit > Informations sur la page : y a peut-être un champ qui parle du cache.

[nicolas2603]

Pas faux !!
Je vais tester ça

Edit :
Alors avec livehhtpheaders je peux lire pour un fichier js "GET /css/jQuery/plugins.js HTTP/1.1 : Cache-Control: max-age=0" et "HTTP/1.1 304 Not Modified : Cache-Control: max-age=604800".

J'ai un peu du mal à comprendre ce que cela signifie.

[_Mac_]

Les 604800, c'est la durée de validité de la ressource demandée (/css/jQuery/plugins.js) en secondes. 604800 secondes, ça fait 7 jours.

[nicolas2603]

Oui ça ok, mais pourquoi y a-t-il deux valeurs différentes de Cache-Control: max-age pour un même fichier ?

[_Mac_]

Le premier max-age est envoyé par le navigateur. Il veut dire que le navigateur veut le document le plus récent possible par rapport à l'en-tête Date qu'il a dû envoyé également. Le second max-age indique au navigateur que la ressource qu'il a déjà n'expirera que dans 604800 secondes.

[nicolas2603]

D'accord, ce qui veut dire que mon htaccess ne fonctionne pas, sinon je n'aurai pas le second max-age à 604800 secondes !

[_Mac_]

Ben dans la mesure où ton .htaccess contient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Header set Cache-Control "max-age=604800"

je dirais au contraire qu'il marche très bien

[nicolas2603]

Oui, mais je lui demande effectivement de garder en cache 7 jours les fichiers, sauf monfichier.js !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<FilesMatch ".(gif|jpg|jpeg|png|ico|swf|pdf|xls|css|js)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "monfichier.js">
Header unset Cache-Control
</FilesMatch>

Et c'est l'entête de ce fichier où justement je retrouve le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Header set Cache-Control "max-age=604800"

alors que logiquement si ça fonctionnait il devrait y avoir max-age=0 non ?

[_Mac_]

C'était pas évident à comprendre : ta trace HTTP parle de /css/jQuery/plugins.js : comment savoir que c'était le fichier à ne pas mettre en cache ?

Sinon, essaie de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Header set Cache-Control "max-age=0"

plutôt que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Header unset Cache-Control

Essaie également de déplacer ton bloc <FilesMatch "monfichier.js"> avant l'autre <FilesMatch>.

[nicolas2603]

C'était pas évident à comprendre : ta trace HTTP parle de /css/jQuery/plugins.js : comment savoir que c'était le fichier à ne pas mettre en cache ?

Alors oui, désolé, c'est une faute de frappe, il faut lire monfichier.js et non pas plugins.js !!

J'ai donc essayé les deux propositions, à savoir déplacer le bloc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<FilesMatch "monfichier.js">

avant l'autre et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Header set Cache-Control "max-age=0"

, et aucun changement.

J'ai également essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<FilesMatch "monfichier.js">

ainsi qu'avec son chemin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<FilesMatch "/css/jQuery/monfichier.js">

comme dans le header, mais aucun changement non plus !

[_Mac_]

Juste pour le test : tu peux commenter tout le bloc <FilesMatch ".(gif|jpg|jpeg|png|ico|swf|pdf|xls|css|js)$"> et vérifier que la conf pour ton fichier fonctionne ?

ce que je crains c'est que ce bloc <FilesMatch ".(gif|jpg|jpeg|png|ico|swf|pdf|xls|css|js)$"> prend le pas sur l'autre car il est plus générique. J'ai peur qu'il faille faire plusieurs blocs pour implémenter le "tous les .js sauf monfichier.js" car je ne vois pas de syntaxe d'expression régulière qui colle (mais peut-être qu'elle existe) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<FilesMatch "\.(gif|jpg|jpeg|png|ico|swf|pdf|xls|css)$">
...
</FileMatch>
 
<FilesMatch "(?!monfichier)\.js">
...
</FileMatch>
 
<FilesMatch "monfichier\.js">
...
</FilesMatch>

[nicolas2603]

C'était ça : le bloc <FilesMatch ".(gif|jpg|jpeg|png|ico|swf|pdf|xls|css|js)$"> prenait le pas sur l'autre car plus générique !!

Je n'ai effectivement pas réussi à trouver une syntaxe "tous les .js sauf monfichier.js" qui fonctionne, donc pour les .js j'ai fait des blocs séparés. Cette solution me parait donc pas trop mal !

Merci bcp

[_Mac_]

Tu n'as pas essayé ma syntaxe ? Elle est un peu tordue mais tu as un premier bloc pour dire "tout ce qui se termine en .js et qui ne commence pas par monfichier" et tu as le bloc pour monfichier.js.

[nicolas2603]

Si, j'ai essayé la syntaxe. Quand je mets les 2 lignes je me retrouve avec une erreur serveur, et quand je ne mets qu'1 des 2 lignes ça n'est pas pris en compte !!

[_Mac_]

Quand je mets les 2 lignes je me retrouve avec une erreur serveur

Tu peux nous montrer le .htaccess complet que tu as essayé et qui cause cette erreur serveur ? Il n'y a pas que 2 lignes à ajouter : ce sont 2 blocs <FilesMatch> complets à mettre.

[nicolas2603]

J'ai mis ce code. Bien entendu je pensais "bloc" quand j'ai dis "ligne".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#-------------------------------------------------------
# Temps de mise en cache - 1 semaine sauf monfichier.js
#-------------------------------------------------------
 
<FilesMatch "monfichier\.js">
Header set Cache-Control "max-age=0"
</FilesMatch>
<FilesMatch "(?!monfichier)\.js">
Header set Cache-Control "max-age=604800"
</FileMatch>
<FilesMatch ".(gif|jpg|jpeg|png|ico|swf|pdf|xls|css)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>