web-dev-qa-db-fra.com

Image max-age / cache-control non définie

Afin d'accélérer mon site Telium j'ai créé le .htaccess ci-dessous. J'ai beaucoup de grandes images sur mon site, je veux donc que les navigateurs mettent en cache autant que possible. Toutefois, lorsque je navigue sur mon site Web avec les outils de développement ouverts (dans Chrome), je constate que toutes les images de mes pages sont re-téléchargées à chaque actualisation.

Mon .htaccess est situé à la racine du site Web et ressemble à ceci:

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch ".(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(js)$">
# was private  
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

Voici un exemple des en-têtes de réponse associés à une image récupérée à chaque actualisation:

Accept-Ranges:bytes
Cache-Control:public
Connection:Keep-Alive
Content-Length:75149
Content-Type:image/jpeg
Date:Thu, 28 May 2015 12:56:46 GMT
ETag:"a9e0dd3-1258d-516beac088af3"
Expires:Sat, 27 Jun 2015 12:56:46 GMT
Keep-Alive:timeout=5
Last-Modified:Sat, 23 May 2015 12:11:09 GMT
Server:Apache/2.4.12 (Unix) OpenSSL/1.0.1e-fips mod_bwlimited/1.4 mod_fcgid/2.3.10-dev

Quelqu'un peut-il suggérer ce que je dois changer pour que le navigateur mette en cache ces images (et le texte)?

Mise à jour: après avoir ajouté max-age, le nouvel en-tête est le suivant:

Accept-Ranges:bytes
Cache-Control:public, max-age=2592000
Connection:Keep-Alive
Content-Length:118966
Content-Type:image/jpeg
Date:Thu, 28 May 2015 20:11:33 GMT
ETag:"a9e0de5-1d0b6-516bead2e811c"
Expires:Sat, 27 Jun 2015 20:11:33 GMT
Keep-Alive:timeout=5
Last-Modified:Sat, 23 May 2015 12:11:28 GMT
Server:Apache/2.4.12 (Unix) OpenSSL/1.0.1e-fips mod_bwlimited/1.4 mod_fcgid/2.3.10-dev
imagescachebrowsers
1
TSG

Tu devrais changer ...

Header set Cache-Control "public"

...à...

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

... mais remplacez x par le nombre de secondes que vous souhaitez que tout navigateur prenant en charge HTTP 1.1 mette l'élément en cache. La raison pour laquelle j'ai supprimé "public" est parce que public est la portée par défaut dans laquelle la mise en cache est appliquée (c'est-à-dire qu'elle s'applique aux navigateurs et aux mandataires intermédiaires).

Les vérifications et étiquettes si-modifiées comme suggéré par Richhallstoke sont utiles, mais des demandes sont toujours adressées au serveur même pour recevoir une réponse 304. La mise en cache avec un âge maximum défini (que ce soit via l'en-tête Expires ou l'âge max du contrôle de cache) signifie que le navigateur utilisera le cache local autant que possible jusqu'à ce que l'âge défini soit atteint ou qu'un rafraîchissement forcé soit effectué. Cela signifie davantage d'économies de bande passante pour le client.

0
Mike

Il y a vraiment deux options:

  1. Vous pouvez supprimer les en-têtes Last-Modified et ETag. Les navigateurs Web n'essaieront donc pas de savoir s'il existe une version plus récente, mais se contentent de faire confiance à la date/heure Expires que vous avez fournie.

  2. Vous pouvez vérifier si HTTP_IF_MODIFIED_SINCE correspond au dernier horodatage modifié ou si HTTP_IF_NONE_MATCH correspond à l'ETag, puis renvoyez un en-tête HTTP/1.1 304 Not Modified à la place de la ressource demandée.

    Je ne connais pas de méthode permettant d'y parvenir directement à partir d'un fichier de configuration Apache .htaccess. Toutefois, vous pouvez le faire en PHP. Voir l'exemple de code source dans ma réponse ici: résultats étranges obtenus à partir de tests lorsque vous essayez de servir un serveur page de téléchargement rapide d'images… pourquoi?

Certaines personnes sont convaincues qu'il est préférable de laisser le navigateur gérer la mise en cache et de se débarrasser des en-têtes (option 1). Toutefois, si vous modifiez votre site Web avant l'horodatage Expires, les utilisateurs accédant aux ressources pourront voir leurs anciennes versions mises en cache par rapport au nouveau code HTML. contenu jusqu’à ce que vous appuyiez sur Ctrl + F5 pour forcer l’actualisation de tous les fichiers requis par la page. La vérification des en-têtes (option 2) et la restitution du contenu uniquement si une version plus récente est disponible expliquent comment le protocole HTTP a été conçu pour être utilisé efficacement.

Auparavant, lorsque chaque demande de ressource nécessitait une connexion réseau distincte et que les navigateurs n'utilisaient qu'un maximum de 10 connexions simultanées au même serveur, cela pourrait entraîner des retards dans le temps de chargement des pages, à condition toutefois que votre serveur Web soit configuré pour autoriser les connexions persistantes. les navigateurs Web vont ensuite relier les demandes de ressources et les envoyer les unes après les autres très rapidement sur la même connexion.

0
richhallstoke