Cache navigateur via htaccess

Qu’est-ce que le cache navigateur?

Le cache navigateur permet de diminuer le nombre de requêtes effectuées par le navigateur au serveur distant, le navigateur interroge d’abord le cache de l’utilisateur pour voir s’il n’a pas le fichier avant d’interroger le serveur.

Prérequis

Avant de vous lancer directement dans la modification du fichier .htaccess, je vous conseille d’abord de lire mon article parlant de ce fichier si vous n’êtes pas familier avec celui-ci, un fichier .htaccess est un fichier puissant mais très sensible, prenez donc vos précautions avant de le modifier.

Comme ce fichier est sensible, pensez à faire une copie de votre fichier avant de le modifier, pour pouvoir retourner sur la version initiale si vous rencontrez un problème durant la manipulation.

Avec mod_expires

Ce module permet d’indiquer que certains types de fichiers peuvent rester en cache dans le navigateur de l’utilisateur pendant une durée déterminée, sans que le navigateur n’ait besoin de faire des requêtes pour vérifier la validité du cache. Vous allez donc diminuer le nombre de requêtes entre l’utilisateur et votre site web.

Dans la configuration ci-dessous, nous indiquons que pour les images et les vidéos, le cache a un délai d’expiration d’un an, car ces types de fichiers ne sont pas susceptibles de changer, pour ce qui est des fichiers CSS et JS, nous mettons plutôt une durée de validité d’un mois, car ces fichiers sont plus susceptibles de changer. Pour tout le reste 2 jours.

Ajouter le code ci-dessous sous votre code actuel dans votre fichier .htaccess.

<IfModule mod_expires.c>
ExpiresActive On 
ExpiresByType image/jpg “access 1 year” 
ExpiresByType image/jpeg “access 1 year” 
ExpiresByType image/gif “access 1 year” 
ExpiresByType image/png “access 1 year” 
ExpiresByType image/webp “access plus 1 year” 
ExpiresByType image/x-icon “access 1 year” 
ExpiresByType text/css “access 1 month” 
ExpiresByType video/mp4 “access plus 1 year” 
ExpiresByType video/mpeg “access plus 1 year” 
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month” 
ExpiresByType application/javascript “access 1 month”
ExpiresByType text/javascript “access 1 month” 
ExpiresByType application/x-shockwave-flash “access 1 month” 
ExpiresDefault “access 2 days” 
</IfModule>