Cette page a été traduite par l'API Cloud Translation.

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 votre page lors des visites répétées.

Lorsqu'un navigateur demande une ressource, le serveur qui la fournit peut indiquer au navigateur pendant combien de temps il doit la stocker temporairement ou la mettre en cache. Pour toute demande ultérieure de cette ressource, le navigateur utilise sa copie locale plutôt que de l'obtenir à partir du réseau.

Pourquoi l'audit des règles de cache Lighthouse échoue-t-il ?

Lighthouse signale toutes les ressources statiques qui ne sont pas mises en cache :

Capture d'écran de l'audit de stratégie de cache efficace de Lighthouse Serve

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 présente un code d'état HTTP 200, 203 ou 206.
La ressource ne dispose pas d'une stratégie de non-mise en cache explicite.

Lorsqu'une page échoue à l'audit, Lighthouse liste les résultats dans un tableau à trois colonnes :

URL	L'emplacement de la ressource pouvant être mise en cache
TTL du cache	Durée de cache actuelle de la ressource
Taille de transfert	Estimation des données que vos utilisateurs économiseraient si la ressource signalée avait été mise en cache

Mettre en cache des ressources statiques à l'aide du 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 à un an : 60 secondes × 60 minutes × 24 heures × 365 jours = 31 536 000 secondes.

Vous devez mettre en cache les éléments statiques immuables pendant une longue période (un an ou plus, par exemple).

Utilisez no-cache si la ressource change et que la fraîcheur est importante, mais que vous souhaitez tout de même profiter de certains des avantages de vitesse du cache. Le navigateur met toujours en cache une ressource définie sur no-cache, mais vérifie d'abord auprès du serveur qu'elle 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 de la durée optimale du cache pour vos ressources.

Il existe de nombreuses directives pour personnaliser la mise en cache des différentes ressources par le navigateur. Pour en savoir plus sur la mise en cache des ressources, consultez le guide Cache HTTP: votre première ligne de défense et l'atelier de programmation sur la configuration du comportement de mise en cache HTTP.

Vérifier les réponses mises en cache dans Chrome DevTools

Pour voir les ressources que le navigateur obtient à partir de son cache, ouvrez l'onglet Network (Réseau) dans les outils pour les développeurs Chrome :

Appuyez sur Control+Shift+J (ou Command+Option+J sur Mac) pour ouvrir DevTools.
Cliquez sur l'onglet Réseau.

La colonne Taille de Chrome DevTools peut vous aider à vérifier qu'une ressource a été mise en cache :

Colonne "Taille"

Chrome diffuse les ressources les plus demandées à partir du cache mémoire, qui est très rapide, mais qui est effacé lorsque le navigateur est fermé.

Pour vérifier 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 En-têtes.

Inspecter l'en-tête Cache-Control via l'onglet "En-têtes" — Inspectez l'en-tête `Cache-Control` via l'onglet **En-têtes**.

Conseils spécifiques à la pile

Drupal

Définissez l'âge maximum du navigateur et du proxy cache sur la page Administration > Configuration > Développement. Découvrez le cache Drupal et l'optimisation des performances.