path: root/files/fr/web/http/caching/index.html

---
title: Mise en cache HTTP
slug: Web/HTTP/Cache
tags:
  - Guide
  - HTTP
  - Le cache
translation_of: Web/HTTP/Caching
---
<div>{{HTTPSidebar}}</div>

<p class="summary">Les performances des sites et applications web peuvent être significativement améliorées en réutilisant les ressources déjà collectées précédemment. Les caches web réduisent la latence et le trafic du réseau, et ainsi diminuent le temps nécessaire à l'affichage de la représentation d'une ressource. En utilisant la mise en cache HTTP, les sites web deviennent plus réactifs.</p>

<h2 id="Différents_types_de_caches">Différents types de caches</h2>

<p>La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps.</p>

<p>Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un <em>cache partagé</em> est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un <em>cache privé</em> est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web.</p>

<p><img alt="Ce que permet un cache, avantages et inconvénients des caches privés ou partagés." lang="fr-FR" src="https://mdn.mozillademos.org/files/16128/HTTPCacheType-fr.png" style="height: 573px; width: 910px;"></p>

<h3 id="Caches_de_navigateur_privés">Caches de navigateur privés</h3>

<p>Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via <a href="/fr/docs/Web/HTTP" title="en/HTTP">HTTP</a> par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache.</p>

<h3 id="Caches_de_proxy_partagés">Caches de proxy partagés</h3>

<p>Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Par exemple, un fournisseur d’accès à Internet ou votre entreprise peut avoir mis en place un proxy web au sein de son infrastructure de réseau local pour servir des utilisateurs multiples, de sorte que les ressources populaires sont réutilisées plusieurs fois, réduisant le trafic réseau et la latence.</p>

<h2 id="Cibles_des_opérations_de_cache">Cibles des opérations de  cache</h2>

<p>La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache :</p>

<ul>
 <li>Résultat positif de requête de lecture : une réponse {{HTTPStatus(200)}} (OK) à une requête {{HTTPMethod("GET")}} contenant une ressource telle qu’un document HTML, une image ou un fichier.</li>
 <li>Redirection permanente : une réponse {{HTTPStatus(301)}} <em>(Moved Permanently).</em></li>
 <li>Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} <em>(Not Found)</em>.</li>
 <li>Résultat incomplet : une réponse {{HTTPStatus(206)}} <em>(Partial Content)</em>.</li>
 <li>Réponses autres que {{HTTPMethod("GET")}} si quelque chose est défini comme pouvant être utilisé comme clé de cache.</li>
</ul>

<p>Une entrée de cache peut aussi consister en de multiples réponses stockées différenciées par une clé secondaire, si la requête fait l’objet de négociation de contenu. Pour plus de détails, voir les informations à propos de l’en-tête {{HTTPHeader("Vary")}} <a href="#Varying_responses">ci-dessous</a>.</p>

<h2 id="Contrôle_de_la_mise_en_cache"><span class="tlid-translation translation"><span title="">Contrôle de la mise en cache</span></span></h2>

<h3 id="L'en-tête_Cache-control"><span class="tlid-translation translation"><span title="">L'en-tête Cache-control</span></span></h3>

<p><span class="tlid-translation translation">Le</span> {{HTTPHeader("Cache-Control")}} HTTP/1.1 <span class="tlid-translation translation"><span title="">Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses.</span> <span title="">Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournie</span></span>s.</p>

<h4 id="Pas_du_tout_de_cache_mémoire">Pas du tout de cache mémoire</h4>

<p><span class="tlid-translation translation"><span title="">Le cache ne doit rien stocker concernant la demande du client ou la réponse du serveur.</span> <span title="">Une demande est envoyée au serveur et une réponse complète est téléchargée à chaque fois.</span></span></p>

<pre>Cache-Control: no-store
Cache-Control: no-cache, no-store, must-revalidate
</pre>

<h4 id="Pas_de_cache"><span class="tlid-translation translation"><span title="">Pas de cache</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Un cache enverra la demande au serveur d'origine pour validation avant de publier une copie en cache</span></span>.</p>

<pre>Cache-Control: no-cache</pre>

<h4 id="Caches_privées_et_publiques"><span class="tlid-translation translation"><span title="">Caches privées et publiques</span></span></h4>

<p><span class="tlid-translation translation"><span title="">La directive "public" indique que la réponse peut être mise en cache par n'importe quel cache.</span> <span title="">Cela peut être utile si les pages avec une authentification HTTP ou des codes d’état de réponse qui ne sont pas normalement mis en cache doivent maintenant être mis en cache.</span> <span title="">En revanche, "privé" indique que la réponse est destinée à un seul utilisateur et ne doit pas être stockée par un cache partagé.</span> <span title="">Un cache de navigateur privé peut stocker la réponse dans ce cas.</span></span></p>

<pre>Cache-Control: private
Cache-Control: public
</pre>

<h4 id="Expiration">Expiration</h4>

<p><span class="tlid-translation translation"><span title="">La directive la plus importante ici est "max-age = &lt;secondes&gt;", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle.</span> <span title="">Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande.</span> <span title="">Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive.</span> <span title="">Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Pour plus de détails, voir aussi la section</span></span> <a href="#Freshness">Freshness</a> <span class="tlid-translation translation"><span title="">ci-dessous.</span></span>.</p>

<pre>Cache-Control: max-age=31536000</pre>

<h4 id="Validation">Validation</h4>

<p><span class="tlid-translation translation"><span title="">Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées.</span> <span title="">Pour plus de détails, voir la section</span></span> <a href="#Cache_validation">Validation</a> <span class="tlid-translation translation"><span title="">ci-dessous</span></span>.</p>

<pre>Cache-Control: must-revalidate</pre>

<h3 id="L'en-têtePragma"><span class="tlid-translation translation"><span title="">L'en-tête</span></span><code>Pragma</code></h3>

<p><span class="tlid-translation translation"><span title="">{{HTTPHeader ("Pragma")}} est un en-tête HTTP / 1.0. Il n'est pas spécifié pour les réponses HTTP et ne constitue donc pas un remplacement fiable pour l'en-tête général HTTP / 1.1 Cache-Control, bien qu'il se comporte de la même manière que Cache</span><span title="">-Control: no-cache, si le champ d'en-tête Cache-Control est omis dans une requête.</span> <span title="">Utilisez Pragma uniquement pour une compatibilité ascendante avec les clients HTTP / 1.0</span></span>.</p>

<h2 id="Fraîcheur_(Freshness)">Fraîcheur (Freshness)</h2>

<p>Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("<em>cache eviction"</em>). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour.   Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh =&gt; freshness);  Aprés son expiration, elle est considérée périmée (<em>stale</em>). Les algoritmes d'éviction privilégient souvent les ressources fraîches.  Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un  {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante.</p>

<p>Ici un exemple de ce processus avec un cache de proxy partagé :</p>

<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p>

<p>Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "<code>Cache-control: max-age=N</code>" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas),  on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce <code>Expires</code> existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête <code>Date</code> moins la valeur de l'en-tête <code>Last-modified</code> divisée par 10.</p>

<p>Le temps d'expiration s'organise comme ceci :</p>

<pre>expirationTime = responseTime + freshnessLifetime - currentAge
</pre>

<p>Où <code>responseTime</code> est le moment auquel a été reçue la réponse selon le navigateur.</p>

<h3 id="Ressources_revues_et_corrigées">Ressources revues et corrigées</h3>

<p>Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web.  Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur.  C'est possible avec des ressources mises à jour régulièrement ou trés souvent mais ça devient problématique pour les ressources mises à jour trés rarement.  Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web :  les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite.</p>

<p>Les développeurs Web ont inventé une technique que Steve Sounders a appelée <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>. Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration trés éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web.  Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi.</p>

<p>Cette technique a un avantage de plus : mettre à jour deux ressources en cache en même temps ne fera pas qu'une version périmée d'une des ressources sera utilisée avec la nouvelle version de l'autre. C'est trés important quand les sites ont des feuilles de style CSS ou des scripts JS qui ont des dépendances mutuelles c'est-à-dire qui dépendent l'un de l'autre parce qu'ils se réfèrent aux mêmes éléments HTML.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p>

<p>La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme  1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date.</p>

<h2 id="Validation_de_cache">Validation de cache</h2>

<p>La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête  "<code>Cache-control: must-revalidate</code>". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans<code> Advanced-&gt;Cache</code> . Il y a une option pour forcer la validation chaque fois qu'un document est chargé.</p>

<p>Quand on arrive au moment d'expiration d'un document en cache, il est soit validé soit redemandé. La validation ne peut intervenir que si le serveur a fourni soit un validateur fort <em>(strong validator</em>) soit un faible (<em>weak validator</em>).</p>

<h3 id="ETags">ETags</h3>

<p>L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "<em>opaque-to-the-user agent" </em> qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne  représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête <code>ETag</code> est une partie de la réponse pour une ressource, le client peut délivrer un  {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache.</p>

<p>L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête  <code>Last-Modified</code> est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache.</p>

<p>Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal  {{HTTPStatus(200)}} <code>OK</code>, ou bien retourner un statut {{HTTPStatus(304)}} <code>Not Modified</code> (avec un corps de réponse vide)  pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache.</p>

<h2 id="Varier_les_réponses">Varier les réponses</h2>

<p>L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes  et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine.</p>

<p>Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête  <code>Vary</code> il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête <code>Vary</code> ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête.</p>

<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p>

<p>Cela peut être trés utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête  <code>Vary: User-Agent</code>, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche  à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" (<a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>) n'est à craindre.</p>

<pre>Vary: User-Agent</pre>

<p>Parce que la valeur d'en-tête  {{HTTPHeader("User-Agent")}} est différente  ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa.</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching</a></li>
 <li><a href="https://www.mnot.net/cache_docs">Caching Tutorial – Mark Nottingham</a></li>
 <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP caching – Ilya Grigorik</a></li>
 <li><a href="https://redbot.org/">RedBot</a>, un outli pour vérifier vos en-têtes HTTP relatives au cache.</li>
</ul>