Diffusez des éléments statiques avec une règle de cache efficace

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

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 ou 206.
  • 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.

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:

  1. Cliquez sur l'URL de la requête dans la colonne Nom du tableau "Requêtes".
  2. Cliquez sur l'onglet Headers (En-têtes).
Inspecter l&#39;en-tête Cache-Control via l&#39;onglet &quot;En-têtes&quot;
Inspectez l'en-tête 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.

Ressources