La mise en cache HTTP peut accélérer le temps de chargement de vos pages lors de visites répétées.
Lorsqu'un navigateur demande une ressource, le serveur qui fournit la ressource peut indiquer au navigateur combien de temps il doit temporairement stocker ou mettre en cache la ressource. Pour toute requête ultérieure pour cette ressource, le navigateur utilise sa copie locale au lieu de l'obtenir depuis le réseau.
Échec de l'audit des règles de mise en cache de Lighthouse
Lighthouse signale toutes les ressources statiques qui ne sont pas mises en cache:
![Capture d'écran de la section "Diffuser les éléments statiques" de Lighthouse avec un audit efficace des règles de cache](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/a-screenshot-the-lightho-d4eb993831c72.png?authuser=9&hl=fr)
Lighthouse considère qu'une ressource peut être mise en cache si toutes les conditions suivantes sont remplies:
- La ressource est une police, une image, un fichier multimédia, un script ou une feuille de style.
- La ressource possède un code d'état HTTP
200
,203
ou206
. - La ressource ne comporte pas de règle explicite sans mise en cache.
Lorsqu'une page échoue à l'audit, Lighthouse affiche les résultats dans un tableau à trois colonnes:
URL | L'emplacement de la ressource pouvant être mise en cache |
Valeur TTL du cache | Durée actuelle de mise en cache de la ressource |
Taille du transfert | Estimation des données que vos utilisateurs enregistreraient si la ressource signalée avait été mise en cache |
Mettre en cache des ressources statiques à l'aide de la mise en cache HTTP
Configurez votre serveur pour qu'il renvoie l'en-tête de réponse HTTP Cache-Control
:
Cache-Control: max-age=31536000
L'instruction max-age
indique au navigateur combien de temps il doit mettre en cache la ressource, en secondes.
Cet exemple définit la durée sur 31536000
, ce qui correspond à un an : 60 secondes × 60 minutes × 24 heures × 365 jours = 3 153 6 000 secondes.
Vous devez mettre en cache les éléments statiques immuables pendant une longue période, par exemple un an ou plus.
Utilisez no-cache
si les modifications et leur fraîcheur des ressources sont importantes, mais que vous souhaitez tout de même bénéficier des avantages de la mise en cache en termes de vitesse.
Le navigateur met toujours en cache une ressource définie sur no-cache
, mais vérifie d'abord auprès du serveur que la ressource est toujours à jour.
Une durée de cache plus longue n'est pas toujours préférable. En fin de compte, c'est à vous de décider quelle est la durée de cache optimale pour vos ressources.
Il existe de nombreuses instructions permettant de personnaliser la façon dont le navigateur met en cache les différentes ressources. Pour en savoir plus sur la mise en cache des ressources, consultez les pages Cache HTTP: guide de votre première ligne de défense et Configurer le comportement de mise en cache HTTP.
Vérifier les réponses mises en cache dans les outils pour les développeurs Chrome
Pour savoir quelles ressources le navigateur obtient de son cache, ouvrez l'onglet Réseau dans les outils pour les développeurs Chrome:
[comment]: <> (La liste suivante était un code court de web.dev, mais n'était pas traduit de l'anglais pour aucune langue.)
1. Appuyez sur Control+Shift+J
(ou Command+Option+J
sur Mac) pour ouvrir les outils de développement.
2. Cliquez sur l'onglet Réseau.
La colonne Taille des outils pour les développeurs Chrome peut vous aider à vérifier qu'une ressource a été mise en cache:
![La colonne Taille.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/the-size-column-4c3e86c3d8b8f.png?authuser=9&hl=fr)
Chrome diffuse les ressources les plus demandées à partir du cache de la mémoire, qui est très rapide, mais s'efface à la fermeture du navigateur.
Pour vous assurer que l'en-tête Cache-Control
d'une ressource est défini comme prévu, vérifiez ses données d'en-tête HTTP:
- Cliquez sur l'URL de la requête dans la colonne Nom du tableau "Requêtes".
- Cliquez sur l'onglet Headers (En-têtes).
![Inspecter l'en-tête Cache-Control via l'onglet "En-têtes"](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/inspecting-cache-control-881e2975bf9d3.png?authuser=9&hl=fr)
Cache-Control
via l'onglet Headers (En-têtes).
Conseils spécifiques à la pile
Drupal
Définissez l'âge maximal du cache du navigateur et du proxy sur la page Administration > Configuration > Développement. Consultez la section Ressources sur les performances Drupal.
Joomla
Voir Cache.
WordPress
Consultez la section Mise en cache dans le navigateur.