La mise en cache HTTP peut accélérer le temps de chargement de votre page lors des visites répétées.
Lorsqu'un navigateur demande une ressource, le serveur fournissant la ressource peut indiquer au navigateur la durée pendant laquelle il doit stocker ou mettre en cache temporairement la ressource. Pour toute requête ultérieure concernant cette ressource, le navigateur utilise sa copie locale plutôt que de l'obtenir à partir du réseau.
Échec de l'audit des stratégies de cache Lighthouse
Phare signale toutes les ressources statiques qui ne sont pas mises en cache:
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 est associée à un code d'état HTTP
200,203ou206. - La ressource ne dispose pas d'une stratégie de mise en cache explicite.
En cas d'échec de l'audit d'une page, Lighthouse répertorie 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 du cache de la ressource |
| Transfer Size (Taille de transfert) | Estimation des données que vos utilisateurs pourraient enregistrer 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 la durée de mise en cache de la ressource, en secondes.
Cet exemple définit la durée sur 31536000, ce qui correspond à 1 an:
60 secondes × 60 minutes × 24 heures × 365 jours = 3 1536 000 secondes.
Vous devez mettre en cache les éléments statiques non modifiables pendant longtemps, telles qu'un an ou plus.
Utilisez no-cache si la ressource est modifiée et si l'actualisation est importante.
mais 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 mise en 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 optimale du cache pour vos ressources.
Il existe de nombreuses directives pour 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 Guide "Cache HTTP: votre première ligne de défense" et l'atelier de programmation "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 voir quelles ressources le navigateur obtient de son cache, Ouvrez l'onglet Réseau dans les outils pour les développeurs Chrome:
[commentaire]: <> (La liste suivante était un numéro abrégé de web.dev, mais elle n'a été traduite de l'anglais dans 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 Network (Réseau).
La colonne Taille des outils pour les développeurs Chrome peut vous aider à vérifier qu'une ressource a bien été mise en cache:
Chrome utilise les ressources les plus demandées à partir du cache mémoire, ce qui est très rapide. mais il est effacé à la fermeture du navigateur.
Pour vérifier que l'en-tête Cache-Control d'une ressource est défini comme prévu, procédez comme suit :
vérifiez ses données d'en-tête HTTP:
- Cliquez sur l'URL de la requête dans la colonne Nom de la table "Requêtes".
- Cliquez sur l'onglet En-têtes.
<ph type="x-smartling-placeholder">Cache-Control via l'onglet Headers (En-têtes)
Conseils spécifiques aux piles
Drupal
Définissez le paramètre Âge maximal du navigateur et du proxy cache sous Administration > Configuration > Développement. Consultez la page Ressources sur les performances Drupal.
Joomla
Voir Cache.
WordPress
Consultez la section Mise en cache du navigateur.