Mise en cache de fichiers html php et css

Version imprimable

11/06/2007, 23h45
12monkeys

Mise en cache de fichiers html php et css

Bonsoir

Je ne sais pas trop si je pose ma question au bon endroit vu qu'il englobe plusieurs domaines.

Je voudrais savoir comment les navigateurs gèrent la mise en cache de certains fichiers particuliers : les css par exemple. Si on crée un fichier css avec le style de son site, puis qu'on le modifie par la suite, l'ancien fichier reste t'il en cache ? Ce qui poserait problème vu qu'on ne peut pas faire de mise à jour, c'est à dire cliquer sur le bouton actualiser... ça actualise que la page html et non le fichier css ?

Autre type de fichier : les php. Mon cas particulier : je souhaite faire un fichier php que je voudrais inclure dans mes pages web, c'est le même problème ?? ...

On ne peut pas mettre de balise meta ni dans l'un ni dans l'autre, alors ils risquent de ne pas s'afficher correctement. Les visiteurs risquent de ne pas voir les pages mises à jour ??

Merci de votre aide.
12/06/2007, 09h28
magnus2005

Oui les navigateurs garde tous les fichiers en cache.
Le plus difficile à forcer la mis à jour est le fichier css En particulier sous IE
quand il veut pas le mettre à jour c est particulierement penible.

La gestion de la cache differe beaucoup selon les navigateurs.
Pour developer sous FF2 tu peux la desactiver et effacer tous les fichiers temporaires automatiquement (dans les options) quand tu quittes le navigateur pour tous remettre à plat.
Pour les appli en prod. tu peux mettre dans les en tete des pragma no cache et des update avec les META. Mais ce sont des directives purement indicative. Si un proxy cache ou IE n'a pas envie de les prendre en compte à ce moment la c est :aie:

En general sur 2 jours la cache temporaire est rarement conservé ce qui fait que le probleme n'arrive pas si souvent en production. Par contre quand tu developes c'est pas la meme chanson.
12/06/2007, 14h19
12monkeys

Bonjour,

Citation:

Pour les appli en prod.

Cette partie là je ne l'ai pas comprise...

En ce qui concerne la balise META je connais et j'utilise. Ma question était plus précise : en ce qui concerne les fichiers css et les fichiers php (dans le cas particulier que je donne : soit un fichier extérieur qu'on veut intégrer à une page html par integer). Pour ces fichiers on ne peut pas utiliser la balise META : on ne peut pas en mettre dans un fichier css ??? ni dans un fichier php à intégrer (une balise meta se retrouverait en plein milieu du code, entre les <body>...)

Alors est ce que cela pose réellement problème ?? Ce ne doit pas être une question neuve ou originale, cela est très important à mon sens et donc si cela pose problème cela a du être largement commenté ? (j'ai rien trouvé par recherche).
12/06/2007, 15h19
magnus2005

Desolé pour les raccourcis :

pour les applications en productions c'est le contraire des applications en developement.
La css ne change pas souvent pour les applications en productions.
13/06/2007, 14h01
12monkeys

Bonjour

J'ai bien trouvé ça :

Citation:

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

En particulier :

Citation:

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

Mais est ce que ceci va fonctionner dans un fichier css ? et dans un fichier php qui sera à inclure au milieu d'un autre ???

Mes questionnements ne semblent pas soulever beaucoup de commentaires !! Alors que cela me semble quand même être une question primordiale : si un visiteur ne peut pas voir un site à jour parce que les fichiers css et php "à inclure" restent dans le cache pendant plusieurs voire semaines !!?!??!? :(
13/06/2007, 14h12
Bisûnûrs

Une manière infaillible est de mettre un timestamp derrière l'appel de ton fichier.

Exemple en PHP :

Code:

<link rel="stylesheet" href="style.css?<?=date('YmdHis')?>" type="text/css" />
13/06/2007, 16h53
12monkeys

Merci de ta réponse,

C'est comme ça que vous faites ou que font les pros ?

Faut il noter simplement :

Code:

<?=date('YmdHis')?>

ou remplacer le

Code:

'YmdHis'

par une date ? Et qu'est ce que ça signifie. Je pense : Y year ; m month ; d day ; H houre ; mais le reste ? i et s ??

J'ai recherché : le timestamp ça donne le temps "Unix" le nombre de secondes écoulées depuis 1970... Pour ma curiosité personnelle comment ça marche exactement, enfin qu'est ce que ça fait pour qu'on ai pas le fichier en cache qui soit recherché ?

Merci
13/06/2007, 17h07
Bisûnûrs

Citation:

Envoyé par 12monkeys

C'est comme ça que vous faites ou que font les pros ?

En tout cas c'est comme ça qu'il faut faire pour que ça fonctionne dans tous les cas.

Citation:

Envoyé par 12monkeys

Faut il noter simplement :

Code:

<?=date('YmdHis')?>

ou remplacer le

Code:

'YmdHis'

par une date ? Et qu'est ce que ça signifie. Je pense : Y year ; m month ; d day ; H houre ; mais le reste ? i et s ??

J'ai recherché : le timestamp ça donne le temps "Unix" le nombre de secondes écoulées depuis 1970... Pour ma curiosité personnelle comment ça marche exactement, enfin qu'est ce que ça fait pour qu'on ai pas le fichier en cache qui soit recherché ?

Merci

Pour comprendre la fonction date(), c'est ici que ça se passe :

http://fr2.php.net/manual/fr/function.date.php

Donc tu laisses le code tel qu'il est, la fonction date() va rajouter derrière le fichier la date courante 'AnnéeMoisJourHeureMinuteSeconde'.

Ce qui va ressembler à :

Code:

<link rel="stylesheet" href="style.css?20070613170531" type="text/css" />

Ca ne mettra pas le fichier en cache, parce qu'à chaque fois que tu vas faire appel à la page, le timestamp derrière le fichier aura changé, donc ton navigateur considèrera qu'il ne s'agit pas du même du coup il va le retélécharger.
13/06/2007, 17h34
12monkeys

Merci de cette réponse claire.

J'abuse :oops:

mais j'avais oublié de demander pour les fichiers php en include ? On peut faire comme ça ??

Citation:

<?php
include 'vars.php?=date('YmdHis')';
?>
13/06/2007, 17h59
Bisûnûrs

Code:

include 'vars.php?'.date('YmdHis');
13/06/2007, 20h24
marcha
Salut tous le monde,
Citation:
Envoyé par 12monkeys

...pour les fichiers php en include ? On peut faire comme ça ??

Code:

1 2 3 4 <?php include 'vars.php?=date('YmdHis')'; ?>
Non, l'inclusion se fait coté serveur, cela n'a rien à voir avec le cache
du client. tu n'a pas de soucis lors des includes tant que tu n'utilise
pas de système d'accélération php qui met en cache (précompilé)
les portions de code inclus.

Et pour revenir à la proposition de Bisûnûrs, le fait de mettre une date
qui change à chaque fois permet bien d'éviter que le navigateur mette
en cache le css, c'est très fiable, mais écrit tel quel c'est pas économique
au niveau de la bande passante, car le navigateur recharge les css
tous le temps, quand bien même celui-ci n'a pas changé.
Code:

1 2 <link rel="stylesheet" href="style.css?<?=filemtime('styles.css')?>" type="text/css" />
En utilisant filemtime, on renvoie un timestamp unix qui correspond à la
date de dernière modification du fichier css, ceci à l'avantage de ne
pas changer tant que le css n'a pas changé, et de permettre une mise
en cache pour économiser la bande passante
13/06/2007, 22h44
12monkeys

Bonsoir

Citation:

Envoyé par marcha

Non, l'inclusion se fait coté serveur, cela n'a rien à voir avec le cache
du client. tu n'a pas de soucis lors des includes tant que tu n'utilise
pas de système d'accélération php qui met en cache (précompilé)
les portions de code inclus.

Ok, merci, je n'y aurais pas pensé...

Citation:

Et pour revenir à la proposition de Bisûnûrs, le fait de mettre une date
qui change à chaque fois permet bien d'éviter que le navigateur mette
en cache le css, c'est très fiable, mais écrit tel quel c'est pas économique
au niveau de la bande passante, car le navigateur recharge les css
tous le temps, quand bien même celui-ci n'a pas changé.

En y réfléchissant ce soir je me suis dit ça et j'allais poster pour poser la question

Citation:

En utilisant filemtime, on renvoie un timestamp unix qui correspond à la
date de dernière modification du fichier css, ceci à l'avantage de ne
pas changer tant que le css n'a pas changé, et de permettre une mise
en cache pour économiser la bande passante

Ben en fait c'est ce que je cherche...

Merci de votre aide à tous...
14/06/2007, 09h45
magnus2005

Excellent le filetime j'y avais jamais pensé ?

Du coup la méthode du timestamp devient nettement plus intéressante.
En outre pour l'appliquer a tous les fichiers (en particulier pour les .js)

Bonjour,

J'ai enlevé "Résolu" parce que j'ai enfin testé toutes ces informations...

Et ... ça ne fonctionne pas...

En ce qui concerne les include, ils se font peut être coté serveur mais vu que le contenu html qui est inclus avec include est sauvegardé avec la page en cache, si on ne réactualise pas on affiche le fichier en cache et non le fichier réactualisé.

Il en est de même pour le code php dans une page.

Enfin le "filemtime" ne fonctionne pas non plus pour ce que j'ai indiqué ci dessus : le code php génère du code html qui est mis en cache, c'est ce qui est en cache qui est affiché sauf à actualiser la page.

De tout ceci j'ai fait des tests sur un site de free, voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Titre</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Expires" content="Fri, 1 Sept 2007 07:00:00 GMT"> <link rel="stylesheet" href="style.css?<?=filemtime('style.css')?>" type="text/css"> </head> <body> bonjour aurevoir rebonjour blablabla rerireirieri <?php echo ' ceci est un essai en php - ceci est la modification autre modif'; ?> <?php include 'inclusion.php'; ?> </body> </html>
Code:

1 2 ceci est une inclusion ; ceci est une inclusion ; ceci est une inclusion. 
Alors y'a t'il une chose que j'ai mal compris ?? ou une erreur dans mon code...

Bref il me semble qu'il ne reste que :

Code:

<meta http-equiv="Expires" content="Fri, 1 Sept 2007 07:00:00 GMT">

05/07/2007, 19h07
marcha

Salut,

A ce stade je te conseil de regarder le traffic http pour voir ce qu'il y a dans les
entête. Savoir si la requête est réellement faite ou pas. si oui, regarder si il s'agit d'un GET, HEAD ou si il y a un If Modified Since. Observe les en-têtes Cache-Control
et Pragma.

Installe LiveHttpHeaders ou FireBug sur ton FireFox et regarde ce qu'il se passe.
05/07/2007, 19h11
12monkeys

Désolé

J'ai du écrire ces bétises pour me rendre compte de leur énormité ! Je confonds en fait la mise en cache des fichiers css et include... et le résultat que cela entraine dans la page qui, elle est mise en cache.

Me trompe-je ??
05/07/2007, 19h28
magnus2005
J'utilise une méthode quasi infaillible pour les fichiers flash et java qui sont très souvent sujet à une mis en cache. C'est pas élégant mais c'est très efficace. Voila j'ai fais une méthode qui va chercher le fichier le plus récent du répertoire selon un certain pattern de départ. La fin de nom de fichier je met toujours un timestamp.(Exemple avec la style.css ça donne style200707051925.css). J'ai fait un script ANT qui me fait tous ça automatiquement quand je build les fichiers applet mais fondamentalement ça fonctionne pour tous le fichiers (j'ai fais ça pour les .swf aussi).
Avantage :
- en lisant le code source on sait si c'est le bon fichier.
- ça optimise la gestion de la cache du coup ça reduit la charge reseau et ça charge plus vite.
Désavantage :
- Consomme un peu plus de ressource CPU sur le serveur
05/07/2007, 19h30
blueice

PHP s'exécute côté serveur, donc la page est rechargée à chaque fois, donc aucun problème de cache !
Si tu fais une modification elle sera automatiquement prise en compte.

Si tu veux résoudre le problème, il suffit de rendre ta feuille de style dynamique. "styles.php"
05/07/2007, 19h48
12monkeys

Citation:

Envoyé par blueice

Si tu fais une modification elle sera automatiquement prise en compte.

Ben ça dépend ! :D Et c'est ce que je n'avais pas compris tout de suite : je vais au pire : si la page html n'a pas de "meta expire" que l'internaute ne fais pas "actualiser" et qu'il a un cache gigantesque ça pourrait durer des semaines avant qu'il ne voit ces mises à jour.

Non en fait plus je réfléchis et moins je comprends...

Dans le cadre du filemtime pour un css : le code

Code:

<?=filemtime('style.css')?>

donne par exemple dans le fichier html après interptation

Code:

href="style.css?1183653418"

c'est à dire si on affiche la page et qu'on affiche la source.

Ce que j'ai fait lors de mes tests : j'ai quitté la page html en question, puis j'ai modifié le fichier css, et puis je suis retourné sur la page html, la modification ne s'est pas appliquée. En affichant la source de la page, le code html du code php, soit href="style.css?1183653418" reste le même, en faisant actualiser et en revenant sur la source, alors et seulement là cette suite de chiffres est modifiée.
Logique, puisque le résultat html produit par le code php est mis en cache, que le php soit modifié coté serveur, le navigateur s'en fou puisqu'il cherche la page dans le cache...

Ai-je bien compris là ??
05/07/2007, 19h54
magnus2005

Il me semble que tu as bien compris,
Il faut que tu appliques le système de timestamp à l'URL qui donne accès a ta page.
Ce genre de problème arrive souvent avec les proxy cache.
http://www.mysite.fr/test.html?id=3213132123
Perso j'ajoute le systeme currenttime en milliseconde a la fin de chaque URL
05/07/2007, 19h56
blueice

Pas sûr que tu es tout compris.
Le fait qu'une page soit en php, fait, qu'elle est rechargée à CHAQUE fois, puisqu'à chaque requête de la page, le serveur la traite et l'envoi à ton navigateur, donc si tu affiches une page avec une css statique et que tu modifies la css, la css est conservée dans le cache du navigateur, même si la page est en PHP, par contre si ta feuille de style est dynamique, le cache sera remplacée sur chaque page.
05/07/2007, 20h06
magnus2005

Citation:

Le fait qu'une page soit en php, fait, qu'elle est rechargée à CHAQUE fois, puisqu'à chaque requête de la page, le serveur la traite et l'envoi à ton navigateur,

Oui et non,
Un serveur web n'envoie pas vraiment la page c'est la navigateur qui va la chercher.
Le serveur web reconstruit la page quand le navigateur lui demande. Encore faut- il que le navigateur lui demande une nouvelle page, si le navigateur trouve la même en cache il est possible qu'il choisisse de ne pas faire de requête sur le serveur. Voir même chose avec un réseau avec un proxy cache.
05/07/2007, 20h10
blueice

Citation:

Un serveur web n'envoie pas vraiment la page c'est la navigateur qui va la chercher.

8O

Alors comment ton navigateur peut-il savoir qu'il doit récupérer la page traitée ! :king:
05/07/2007, 20h39
12monkeys

Citation:

Envoyé par blueice

Pas sûr que tu es tout compris.
Le fait qu'une page soit en php, fait, qu'elle est rechargée à CHAQUE fois, puisqu'à chaque requête de la page, le serveur la traite et l'envoi à ton navigateur, donc si tu affiches une page avec une css statique et que tu modifies la css, la css est conservée dans le cache du navigateur, même si la page est en PHP, par contre si ta feuille de style est dynamique, le cache sera remplacée sur chaque page.

Ok alors oublions le css et concentrons nous sur le php. Ceci est identique avec un echo 'texte'; avec du texte à l'interieur par exemple...

Quand j'affiche le code source (par afficher la source) de ma page index.php :

Code:

<link rel="stylesheet" href="style.css?1183660271" type="text/css">

Je quitte la page, je change le fichier css, je retourne sur la page et je regarde le code source :

Code:

<link rel="stylesheet" href="style.css?1183660271" type="text/css">

c'est identique ! j'actualise alors et je retourne voir le code source :

Code:

<link rel="stylesheet" href="style.css?1183660329" type="text/css">

Ca a changé... c'est bien la preuve que la page php ne s'est pas rechargée cette fois ci, non ???

J'essaye de comprendre...:aie:
05/07/2007, 20h50
blueice

Chez moi c'est tout le contraire, j'ai beau modifier la page elle n'est pas gardée et elle est mise à jour, ce qui me semble très logique !
Tu fais un filemtime() il est normal que la requête soit envoyée au serveur.
05/07/2007, 21h24
magnus2005

Citation:

Alors comment ton navigateur peut-il savoir qu'il doit récupérer la page traitée !

Le navigateur ne le sait pas, voila le problème ici. Et avec un proxy cache il peut ne jamais le savoir.
La gestion de la cache varie énormément selon la config du navigateur et du réseau. Le principe est grosso modo si la resource (ici la page web) à la même URL le navigateur essaie d'éviter de faire une requête au serveur (que ce soit une page PHP, JSP ou HTML) et il va chercher celle qu'il a déjà copié sur le disque. 12monkeys a fait une belle démonstration de la problématique.

Je te conseil donc d'ajouter un timestamp ou bout de toutes les URL.
et d'utiliser toutes les méthodes pour désactiver la cache. Comme celle que tu as déjà trouvé comme le Pragma no cache.
Donc les commandes de no cache dans l'en tete HTTP et dans le header HTML.
Si tu veux tester et être sur qu'il n'y pas de cache tu peux configurer Firefox 2 pour effacer toute la cache à chaque redémarrage quand tu développe pour être sur que le mis à jour a eu lieu.
Sinon en régle general, la cache est plutôt une bonne chose donc il faut faire attention à ne pas trop lutter contre et essayer de travailler avec elle. C'est une solution écologique, réduit la consommation de ressources réseau et CPU. donc comme l'électricité chez nous est nucléaire, la cache web réduit les déchets nucléaires. 8O
05/07/2007, 21h35
12monkeys

Je te promets je ne fait pas exprès :(

Et c'est du à quoi ? Free peut être ??
05/07/2007, 22h09
magnus2005

Sans chercher très loin IE à une gestion de la cache tres etrange et Firefox à un cache tres poussé il utilise beaucoup plus qu'IE.
Sans raison parfois IE ne veut pas rafraîchir une page, même si il est configuré avec l'option "vérifier la page à chaque passage". Avec IE il est impossible désactiver complètement la cache.

Personnellement je ne pense pas que les FAI fournissent des pages en cache à l'insu de leur client (hors proxy bien sur).
06/07/2007, 09h36
12monkeys

Bonjour

En effet j'ai testé sous IE 7. Je devrais tester sous Firefox pour voir si avec lui la page .php est à chaque fois réactualisée automatiquement ou pas...

En fait ce n'est pas pour développer que je posait la question mais bien pour savoir ce qu'il fallait faire pour que les visiteurs voient un site mis à jour (travaillant sur un site amateur destiné à un publique absolument novice en informatique et en navigation internet). C'est bien pour ça que je cherchait la solution la meilleure entre mise en cache et non mise en cache...

En fait je pense que je vais revenir au <meta http-equiv="Expires" content="Fri, 1 Jun 2007 07:00:00 GMT">. Je cherchait une méthode plus pratique parce que là je suis obligé de gérer en avance la date des futures mise à jour quand j'intègre la date... Et vu que je ne veux pas modifier toutes les pages à chaque fois je vais intégrer cette date en php par un include...

Code:

<meta http-equiv="Expires" content="<?php include 'date_expire.include.php'; ?>">

Qu'en pensez vous ? Une fois que la date sera expirée le navigateur recherchera la nouvelle page et donc la date d'expiration sera mise à jour...
06/07/2007, 09h51
magnus2005

C'est bonne idée. Cela fonctionne en théorie.
Sinon si c'est pour un site web sans applicatif cela devrait être suffisant, les navigateurs gérant la cache assez correctement les 80% du temps.Pour les cas ou il ne le font généralement il "surcache" les fichiers image et les css ce qui ne donne que de petit artefact d'affichage qui sont de mon point vue de technicien négligeable (d'un point d'un commercial on tombe dans l'inacceptable :roll: )

Bon courage

Fuseau horaire GMT +2. Il est actuellement 20h42.