8768 sujets

Développement web côté serveur, CMS

[Résolu] Utilisation du cache du navigateur

Bonjour.

Je souhaite mettre en cache les images de mon site afin que l'utilisateur n'ait pas à les télécharger du serveur web à chaque fois qu'il affiche une page sur laquelle elles apparaissent.

Pour faire mes tests, j'ai voulu faire simple :
j'ai simplement placé un fichier index.php contenant un lien vers un fichier test.html contenant une image (assez lourde, volontairement), et un lien de retour vers index.php, et tout ça, à la racine de mon site (/www)

Je vide le cache de Safari (version PC, je suis en fait un mac user forcé à travailler sous windows... :q) pour être tranquille. Ensuite je tape l'url de mon site pour afficher index.php, puis je clique sur le lien, qui m'amène vers test.html. Comme j'ai vidé mon cache, il me télécharge naturellement l'image. Si je reviens ensuite sur index.php, et que je réutilise le lien vers test.html, l'image utilisée est celle stockée dans le cache du navigateur, m'évitant d'avoir à la re-télécharger.
Tout ça est parfait, mais...

Si je ferme Safari, et que je reviens sur index.php, et que je clique sur mon lien, l'image doit être re-téléchargée, alors que j'aurais voulu que ce soit celle du cache qui soit utilisée.

Je me suis donc renseigné, et j'ai pu trouver pas mal d'infos, notamment l'utilisation des header cache-control, etc., ce que je me suis empressé d'essayer.
J'ai donc placé ce morceau de code dans mon .htaccess :


<filesmatch "\.(css|gif|jpe?g|js|png)$">
	header set cache-control "max-age=15724800, public"
	header set expires "Fri, 21 Dec 2012 00:00:00 GMT"
</filesmatch>

Seulement, ça n'a pas l'air de changer quoi que ce soit à mon problème (je n'ai évidemment pas d'erreur 5xx, donc à priori le code est compris par le serveur)...


Bref, quelqu'un saurait-il m'expliquer, si c'est possible - ce dont je ne doute pas, comment forcer un navigateur à utiliser les images qu'il a stockées dans son cache plutôt que d'aller les re-télécharger sur le serveur web, et ce, même après avoir été fermé puis ré-ouvert ?

Merci d'avance. Smiley cligne
Modifié par phpdoesnotcare (23 Apr 2010 - 21:20)
Bonjour, peut être que cela vous aidera


<IfModule mod_expires.c> 
    ExpiresActive On
    ExpiresByType text/css "access plus 10 years"
    ExpiresByType text/js "access plus 10 years"
    ExpiresByType text/javascript "access plus 10 years"
    ExpiresByType application/x-javascript "access plus 10 years"
    ExpiresByType application/x-shockwave-flash "access plus 10 years"
    ExpiresByType image/png "access plus 10 years"
    ExpiresByType image/gif "access plus 10 years"
    ExpiresByType image/jpg "access plus 10 years"
    ExpiresByType image/x-icon "access plus 10 years"
    #ExpiresByType text/html "access plus 1 seconds"
    #ExpiresByType application/xhtml+xml "access plus 1 seconds"
    ExpiresDefault "access plus 10 years"
</IfModule>

FileETag MTime Size
Header set Cache-Control "public"


nécessite mod_expires & mod_headers, la configuration est évidement à affiner et adapter à ses envies ...

edit : pour vérifier si cela fonctionne rien de tel que google speed/yslow ou un analyseur d'entêtes http (304)...
Modifié par Benjamin-Ds (23 Apr 2010 - 16:53)
J'ai commencé par utiliser ton code, et me suis rendu compte que j'obtenais sensiblement les mêmes résultats. Supposant ton code bon, j'en ai déduit que le mien l'était aussi et qu'il n'était qu'incomplet. J'ai donc repris mon code, et j'ai rajouté les lignes suivantes :

FileETag None
Header unset ETag
Header unset Last-Modified

Il semblerait que le problème soit résolu, comme le montre les screenshots suivant :
Après avoir vidé le cache de Safari :
http://img90.imageshack.us/img90/4026/capturedcran20100423205.png
Affichage de la même page :
http://img682.imageshack.us/img682/4026/capturedcran20100423205.png
Affichage de la même page, après avoir relancé Safari :
http://img245.imageshack.us/img245/4026/capturedcran20100423205.png

Si j'ai bien compris, le fait d'avoir ajouté ce code dans mon .htaccess empêche Safari d'envoyer une requête au serveur web, ne serait-ce que pour valider la validité dans le temps de mes images et fichiers css/javascript. Pour autant, il semblerait qu'après avoir été relancé, il y ait une trace de communication entre Safari et le serveur, puisqu'on peut apercevoir une légère latence, notamment pour l'image blank.png (en violet très pâle), ce que je ne comprends pas vraiment.

Mais le résultat semble être là quand même, puisqu'à regarder les temps totaux de chargement de la même page, il y a une très nette différence. Smiley cligne
Modifié par phpdoesnotcare (24 Apr 2010 - 19:45)
Je ne suis pas expert ...

Mais normalement je crois que lorsque tu relance ton navigateur et revisite un site, il va quand même envoyer une requêtes pour justement vérifier si la version de la ressource qu'il a dans son cache est toujours d'actualité (via les ETAG il me semble, mais tu les a désactivés dans ton code ...).

si oui le serveur web retournera un header avec le code 304 (not modified) au navigateur pour le prévenir que celle ci n'a pas besoin d'être re-télécharger (donc utilisation du cache, et une requête http est épargné).

edit : en fouillant mes favoris j'ai retrouvé un excellent blog sur la performance web, et tout cela y est abordé. Bonne lecture : http://performance.survol.fr/
Modifié par Benjamin-Ds (23 Apr 2010 - 22:36)
Oui, c'est ce que j'ai compris. Mais dans ce cas pourquoi voit-on apparaître une légère latence après redémarrage de Safari, alors que les etags ont été supprimés, et que par conséquent c'est censé sous-entendre qu'on empêche toute communication avec le serveur pour vérifier si un fichier a été altéré ou non ?
bonsoir,

je viens d'apprendre pas mal de chose en un seul post Smiley biggrin
Et le genre d'infos qu'on ne trouve jamais le jour où on les cherche Smiley lol

merci aux posteurs
laurent
Sujet clos
Aller à