Comment définir les en-têtes HTTP (pour le contrôle du cache)?

238

Comment activer la mise en cache du navigateur pour mon site? Dois-je simplement mettre cache-control: public quelque part dans mon en-tête comme ça?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Cache-Control:public;
>

J'utilise la dernière version de PHP en développement sur la dernière version de XAMPP.

http browser-cache andrew
la source
quelle langue côté serveur utilisez-vous? PHP ?, ASP ?, JSP? la façon dont vous définissez les en-têtes est similaire mais pas tout à fait la même. Ou si vous mettez des images en cache ... cela se fait souvent dans votre configuration Apache (ou serveur Web)
scunliffe
Malheureusement, cette "solution" génère simplement un DOCTYPE invalide ;-) Si vous souhaitez le faire à partir de HTML (je ne le recommanderais pas), vous utiliseriez META HTTP-EQUIV

Réponses:

198

Pour utiliser le contrôle du cache en HTML, vous utilisez la balise META , par exemple

<meta http-equiv="Cache-control" content="public">

La valeur dans le champ de contenu est définie comme l'une des quatre valeurs ci-dessous.

Quelques informations sur le Cache-Control tête sont les suivantes

HTTP 1.1. Valeurs autorisées = PUBLIC | PRIVÉ | NO-CACHE | PAS DE MAGASIN.

Public - peut être mis en cache dans des caches partagées publiques.
Privé - ne peut être mis en cache que dans le cache privé.
No-Cache - ne peut pas être mis en cache.
No-Store - peut être mis en cache mais pas archivé.

La directive CACHE-CONTROL: NO-CACHE indique que les informations mises en cache ne doivent pas être utilisées et que les requêtes doivent être transmises au serveur d'origine. Cette directive a la même sémantique que le PRAGMA: NO-CACHE.

Les clients DEVRAIENT inclure à la fois PRAGMA: NO-CACHE et CACHE-CONTROL: NO-CACHE lorsqu'une demande de non-cache est envoyée à un serveur dont la conformité à HTTP / 1.1 n'est pas connue. Voir également EXPIRES.

Remarque: Il peut être préférable de spécifier les commandes de cache dans HTTP que dans les instructions META, où elles peuvent influencer plus que le navigateur, mais les mandataires et autres intermédiaires qui peuvent mettre en cache les informations.

Codemwnci
la source
30
HTML5 l'interdit et <meta>a toujours été un moyen terrible et floconneux de spécifier la mise en cache.
Kornel
1
@porneL J'ai du mal à comprendre quelle partie de vos liens interdit quelle partie de la réponse ... les spécifications de la balise META ne disent rien sur le fait de ne pas aimer ce qui est écrit ici ou de l'interdire?
Félix Gagnon-Grenier
1
@ FélixGagnon-Grenier "L'attribut http-equiv est un attribut énuméré" signifie qu'il n'autorise que les valeurs du tableau dans la spécification. Il appelle même la mise en cache dans la dernière section ("autres directives pragma"):> Les directives pragma correspondant aux en-têtes qui affectent le modèle de traitement HTTP (par exemple la mise en cache) ne doivent pas être enregistrées, car elles entraîneraient un comportement de niveau HTTP différent pour agents utilisateurs qui implémentent HTML que pour les agents utilisateurs qui ne le font pas.
Kornel
3
Le document cité n'est pas correct en ce qui concerne la no-storevaleur (malgré le document lui-même faisant référence à RFC 2068 ) - no-storeempêche le document d'être stocké / mis en cache du tout, n'importe où. Alors que no-cachecela permet de le stocker, mais il doit vérifier avec le serveur à chaque fois. Les navigateurs auront tendance à stocker des no-cachepages pour activer la fonctionnalité du bouton de retour, etc.
MrWhite
3
Google fournit l'une des références les plus simples pour la mise en cache HTTP IMO: developers.google.com/web/fundamentals/performance/…
MrWhite
137

Vous pouvez définir les en-têtes en PHP en utilisant:

<?php
  //set headers to NOT cache a page
  header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1
  header("Pragma: no-cache"); //HTTP 1.0
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

  //or, if you DO want a file to cache, use:
  header("Cache-Control: max-age=2592000"); //30days (60sec * 60min * 24hours * 30days)

?>

Notez que les en-têtes exacts utilisés dépendront de vos besoins (et si vous devez prendre en charge HTTP 1.0 et / ou HTTP 1.1 )

scunliffe
la source
3
Pragmaet Expiressont probablement redondants pour la grande majorité des navigateurs. fastly.com/blog/headers-we-dont-want
thijsai
1
@thijsai ouais HTTP / 1.0 est massivement obsolète aussi ... utilisez uniquement les en-têtes dont vous avez besoin en fonction de votre matrice utilisateur
scunliffe
51

Comme je l'ai écrit, il est préférable d'utiliser le fichier.htaccess . Attention cependant au moment où vous laissez le contenu dans le cache.

Utilisation:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

Où: 604800 = 7 jours

PS: cela peut être utilisé pour réinitialiser n'importe quel en-tête

William
la source
30

La page http://www.askapache.com/htaccess/apache-speed-cache-control.html suggère d'utiliser quelque chose comme ceci:

Ajouter des en-têtes de contrôle de cache

Cela va dans votre fichier racine .htaccess mais si vous avez accès à httpd.conf c'est mieux.

Ce code utilise la directive FilesMatch et la directive Header pour ajouter des en-têtes de contrôle de cache à certains fichiers.

# 480 weeks
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>
kiwi en colère
la source
3
L'ordre est-il si important? "max-age = 290304000, public" Ou "public, max-age = 290304000" ou les deux ont également raison?
Satya Prakash
2
L'ordre n'a pas d'importance si les valeurs ne sont pas en conflit (comme cacheet no-cache). max-ageet publicne pas entrer en conflit donc l'ordre n'a pas d'importance.
Blaise
1
Notez que puisqu'il utilise la Headerdirective, vous devez l'activer mod_headers.
Skippy le Grand Gourou
@Skippy le Grand Gourou comment activer les mod_headers?
Sam
@SamuelStratford J'ai lu que cela diffère des autres distributions, mais sous Debian, vous pouvez utiliser a2enmodou créer un lien symbolique de /etc/apache2/mods-available/headers.loadà /etc/apache2/mods-enabled/headers.load.
Skippy le Grand Gourou
21

C'est le meilleur que .htaccessj'ai utilisé dans mon site Web actuel:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

##Tweaks##
Header set X-Frame-Options SAMEORIGIN

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

<IfModule mod_headers.c>
    Header set Connection keep-alive
    <filesmatch "\.(ico|flv|gif|swf|eot|woff|otf|ttf|svg)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesmatch>
    <filesmatch "\.(jpg|jpeg|png)$">
        Header set Cache-Control "max-age=1209600, public"
    </filesmatch>
    # css and js should use private for proxy caching https://developers.google.com/speed/docs/best-practices/caching#LeverageProxyCaching
    <filesmatch "\.(css)$">
        Header set Cache-Control "max-age=31536000, private"
    </filesmatch>
    <filesmatch "\.(js)$">
        Header set Cache-Control "max-age=1209600, private"
    </filesmatch>
    <filesMatch "\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
      </filesMatch>
</IfModule>
Erich García
la source
3
Exemple presque parfait d'un fichier .htaccess ... Ce serait complet si des images spécifiques étaient incluses et comment écrire le chemin d'accès à l'image ET où placer le fichier .htaccess (par exemple dans le répertoire image ou le répertoire index)? .. .par exemple. '<IfModule mod_headers.c> <Files /img/myimage.jpg> En-tête ajouter Cache-Control "max-age = 3600, must-revalidate" </Files> </IfModule>' ... est-ce que cela fonctionnerait? .. . OU ... ou collé dans le répertoire img '<filesmatch "^ (exemple \ .jpg | sample \ .png) $"> Ensemble d'en-têtes Cache-Control "max-age = 31536000, public" </filesmatch>' '.. Une stratégie tout de même semble risquée - de toute façon des exemples spécifiques seraient formidables si possible
Marco-UandL
2
juste FYI: la compression gzip sur les fichiers JS et CSS peut aider à briser votre cryptage SSL. Si vous comptez sur la sécurité, n'activez pas gzip
Eduard Void
1
Ceci met en cache la page de compte de connexion, vous ne pouvez donc pas vous déconnecter de votre compte. Pire encore, quelqu'un ne peut pas simplement accéder à la page du compte et être connecté avec la dernière connexion des utilisateurs. Il n'est pas conseillé de l'utiliser sur un site de commerce électronique, vous devez ensuite supprimer le <filesMatch "\.(x?html?|php)$">pour éviter la mise en cache des pages HTML statiques. Le reste des filematches est ok.
nicoX
1
Vous avez dupliqué <filesmatch "\.(eot|woff|otf|ttf|svg)$">.
nicoX
2
Vous définissez csset jssur privé si vous disposez de la mise en cache du proxy. Je n'ai trouvé aucune recommandation dans votre lien à ce sujet. La plupart des CDN vous recommandent de mettre ces valeurs en cache.
nicoX
14

Pour le serveur Apache, vous devez vérifier mod_expires pour définir les en-têtes Expires et Cache-Control.

Alternativement, vous pouvez utiliser la directive Header pour ajouter Cache-Control par vous-même:

Header set Cache-Control "max-age=290304000, public"
Peter Štibraný
la source
5

La balise de contrôle meta cache permet aux éditeurs Web de définir comment les pages doivent être gérées par les caches. Ils comprennent des directives pour déclarer ce qui doit être mis en cache, ce qui peut être stocké par les caches, les modifications du mécanisme d'expiration et les contrôles de revalidation et de rechargement.

Les valeurs autorisées sont:

Public - peut être mis en cache dans des caches partagées publiques
Privé - ne peut être mis en cache que dans le cache privé
no-Cache - ne peut pas être mis en cache
no-Store - peut être mis en cache mais pas archivé

Veuillez faire attention à la sensibilité à la casse. Ajoutez la balise META suivante dans la source de votre page Web. La différence d'orthographe à la fin de la balise est que vous utilisez "/> = xml ou"> = html.

    <meta http-equiv="Cache-control" content="public">
    <meta http-equiv="Cache-control" content="private">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache-control" content="no-store">

Source-> MetaTags

Karthik NG
la source
correction: aucun magasin ne doit pas être mis en cache, aucun cache ne doit être mis en cache mais doit être vérifié avec le serveur avant d'être réservé - voir palizine.plynt.com/issues/2008Jul/cache-control-attributes
DangerMouse
Cache-Control no-store - no-store est similaire à no-cache dans la mesure où la réponse ne peut pas être mise en cache et réutilisée, mais il existe une différence importante. no-store nécessite que la ressource soit demandée et téléchargée à partir du serveur d'origine à chaque fois. Il s'agit d'une caractéristique importante lorsque vous traitez des informations privées.
MarcoZen
5

OWASP recommande ce qui suit,

Dans la mesure du possible, assurez-vous que l'en-tête HTTP de contrôle du cache est défini avec no-cache, no-store, must-revalidate, private; et que l'en-tête HTTP pragma est défini avec no-cache.

<IfModule mod_headers.c>
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
    Header set Pragma "no-cache"
</IfModule>
Won Jun Bae
la source