Google PageSpeed : Autoriser la mise en cache

[Jeangeorges]

Bonjour,
Je regarde actuellement à l'optimisation d'un site et l'outil pageSpeed de Google me dit d'activer la mise en cache des ressources.
Je n'ai pas eu de problème à le faire mais je m'interroge sur les conséquences.
Tout d'abord, qu'elle en est l'utilité ? Il me semble que les navigateurs mettent déjà par défaut les éléments en cache. Quel est alors l'intérêt d'ajouter ces règles.
Ensuite comment être sûr que lors d'une mise à jour du site, les navigateurs récupèrent la version actualisée du fichier ?
Il y a bien la technique de rajouter un paramètre get à la fin de l'adresse du fichier mais si je dois faire ça pour chaque fichier intégré dans mon html ça va être très long.
Merci d'avance.

 

[Bigb06]

Bonjour,

Les navigateurs mettent en cache les ressources suivant les règles données par le serveur (et donc le webmaster). Par exemple si aucune directive n'est donnée pour les images, le navigateur va faire au minimum une requete ETag pour vérifier si l'image n'a pas été modifiée, voir redemander l'image pour les navigateurs plus anciens.
Google PageSpeed peut mettre en place les bonnes directives de mise en cache afin que les images/css/js soient bien stockés par le navigateur et qu'il n'ait pas à questionner le serveur et demander si le fichier a été modifié pour chaque ressource.

 

[Jeangeorges]

Mais dans ce cas, comment signaler qu'un fichier a changé ?

 

[fobec]

Bonjour,

en fait, la gestion du cache internaute, à savoir vérifier si un fichier a été modifié depuis la dernière visite, est faite par le navigateur internet.
Pour cela, le serveur web retourne 2 dates (last-modified et Expires) dans l'entete du fichier ou un code 304.

Pour la mise en place, il existe 2 solutions:
1. définir une regle htaccess
2. dans le script PHP ajouter header('Expires') et header('Last-Modified') avant de transmettre le contenu du fichier css ou js

sur un moteur de recherche, tu trouveras des exemples de mise en place ou à tout hasard sur l'article
http://www.fobec.com/tuto/1114/compression-gzip-fichiers-css-javascrip ... 1and1.html

 

[Bigb06]

@fobec:
Il ne faut pas tout mélanger!

D'un coté on a les entêtes d'expiration, de l'autre les etags et last-modified, qui peuvent prendre différentes formes, mais généralement un md5 ou la taille du fichier.

La meilleure solution (celle implémentée par Google Pagespeed) est d'ajouter des entêtes d'expiration avec une date très lointaine, par exemple 5 ans pour les images. Dans ce cas, le navigateur ne revérifiera jamais si l'image a changé si celle ci est déjà en cache. Conséquence : 0 requête.
Dans le cas des etags, le navigateur va envoyé une petite requête et recevra une petite réponse si le fichier n'a pas été modifié. C'est déjà ça, et ça peut être utile dans certains cas, mais d'une manière générale pour les ressources js/css/images, on doit définir un entête avec une date d'expiration dans un futur lointain.

Prenons un exemple : si le site a 3 css, 2js et 15 images par pages, on économise 20 requêtes par page! Ce qui peut faire la différence entre un serveur complètement saturé et un serveur qui tient la route lors de passage radio ou télé, avec des pics de connexions sur quelques minutes.


Plus d'infos:
http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-13-co ... -7211.html
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

 

[Jeangeorges]

Oui mais ça ne répond pas à ma crainte principale :
Le jour où j'ai besoin de changer un fichier css ou javascript, comment faire pour que les navigateurs téléchargent une version actualisée s'ils possèdent toujours une version précédente marquée comme toujours valable par la durée de validité.

 

[Bigb06]

Très bonne question
En fait tout est géré : si le fichier css/js est modifié, le nom du fichier sera modifié par Google PageSpeed dans le code source HTML (par exemple en utilisant le md5 du fichier). Dès qu'une modification est apportée aux fichiers, le navigateur en sera averti au prochain chargement du fichier HTML.

 

[fobec]

A priori, Jeangeorges est passé par l'appli en ligne de pagespeed, il n'a pas installé le module page speed sur son serveur.

"comment faire pour que les navigateurs téléchargent une version actualisée"
Les navigateurs utilisent les deux valeurs pour valider le cache d'un fichier en local. Donc il suffit que la date retournée par header('Last-Modified') change pour que le navigateur recharge le contenu du fichier css ou js.
-

 

[mipc]

oui mais le problème c'est apparemment se service pour APACHE est pour

CentOS/Fedora (32-bit and 64-bit)
Debian/Ubuntu (32-bit and 64-bit)

https://developers.google.com/speed/pagespeed/module/download

du coup je ne crois pas que ça fonctionne sur APACHE pour Windows, j'ai le même soucie pour SPDY ou ça n'est prévue que pour les version Linux de APACHE et pas pour Windows.

 

[Jeangeorges]

Donc si je comprends bien je n'ai rien de spécial à faire ? J'active le cache et le navigateur vérifie quand-même la date de dernière modification des fichiers ?