Mettre en cache les fichiers statiques de votre site Web (htaccess)

J’avais complètement oublié de vous en parler, et pourtant c’était prévu depuis l’article sur l’optimisation du chargement de vos pages grâce à la compression Gzip.
Toujours liée à l’optimisation de votre site Web, et à l’utilisation d’un fichier .htaccess, la mise en cache des fichiers statiques permet d’économiser du temps au chargement des fichiers ciblés.

Quelques définitions

.htaccess

Le fichier .htaccess vous permet de communiquer avec votre serveur (apache) dans le but d’en changer une partie des paramètres et des comportements par défaut

Serveur Apache

Il s’agit d’un format de serveur, il est le plus répandu dans le monde, et est utilisé par la plupart des fournisseurs d’hébergement (gratuit ou payant – Par ici pour choisir un hébergeur web compatible Apache)

Headers

En-tête, en anglais, il s’agit d’informations que l’on place en tête de page afin d’orienter le navigateur vers telle ou telle interprétation de la page. Par exemple, l’en-tête charset va permettre de définir le mode de lecture des caractères de la page.

Le cache

Il s’agit de données « enregistrées » dans un état statique sur un système. Ces données ne seront pas recalculées lors d’une requête (interrogation du serveur). Cela permet un affichage plus rapide des pages, et donc une navigation plus agréable.

Le cache navigateur

Le cache du navigateur permet de stocker les fichiers statiques directement sur le poste de l’utilisateur. C’est une technique intéressante dans le sens où elle met à profit le système de stockage de l’utilisateur (ainsi si le site est lent à s’afficher, ce sera uniquement de la faute de l’utilisateur… :p non je plaisante, bien sûr).
Cette technique est intéressante car elle diminue le nombre de requêtes effectuées par le navigateur au serveur distant (serveur sur lequel est stocké le site Web). En effet le navigateur interroge d’abord son cache pour voir s’il n’a pas le fichier en réserve avant d’interroger le serveur (dans le cas où le fichier n’est pas en cache).

Voici le code correspondant à entrer dans votre fichier .htaccess :

## contrôle du cache navigateur - Expire headers
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 7200 seconds"
	ExpiresByType image/jpg 			"access plus 1 week"
	ExpiresByType image/jpeg 			"access plus 1 week"
	ExpiresByType image/png 			"access plus 1 week"
	ExpiresByType image/gif 			"access plus 1 week"
	ExpiresByType image/svg+xml			"access plus 1 week"
	AddType image/x-icon .ico
	ExpiresByType image/ico 			"access plus 1 week"
	ExpiresByType image/icon 			"access plus 1 week"
	ExpiresByType image/x-icon 			"access plus 1 week"
	ExpiresByType text/css 				"access plus 1 week"
	ExpiresByType text/javascript 		"access plus 1 week"
	ExpiresByType text/html 			"access plus 7200 seconds"
	ExpiresByType application/xhtml+xml 	"access plus 7200 seconds"
	ExpiresByType application/javascript 	"access plus 1 week"
	ExpiresByType application/x-javascript 	"access plus 1 week"
	ExpiresByType application/x-shockwave-flash "access plus 1 week"
</IfModule>

Comme vous pouvez le voir, nous précisons une date d’expiration pour la plupart des types de fichiers utilisés pour notre site.
L’intérêt est d’avoir une mise en cache plutôt longue, mais qui ne bloque pas non plus la mise à jour des fichiers si vous effectuez des changements de temps à autres.
Il faut trouver le juste milieu en fonction de la fréquence de vos mises à jour, et l’importance du trafic sur votre site.
Pour ajouter d’autres type MIME vous pouvez en consulter la liste sur Wikipedia.

Mise en cache, cache-control

La cache-control est un complément à l’expire-headers, il permet de gérer le comportement du cache en fonction des fichiers et du navigateur utilisé.
Toujours sur notre fichier .htaccess :

<IfModule mod_headers.c>

<FilesMatch "\\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>

<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>

</IfModule>

Le caractère private ou public permet de définir si le stockage se fait pour tout le monde (public) ou uniquement pour les non proxys (private).
Les documents HTML et PHP ne sont pas mis longtemps en cache comme vous pouvez le constater, c’est une habitude avec les fichiers dynamiques.
De plus l’argument must-revalidate est précisé afin d’avoir un contrôle plus fin sur la version du fichier mis en cache. (si quelqu’un a de la documentation à ce sujet je suis preneur, car c’est le seul résumé que je peux offrir à l’heure actuelle)

Les ETags

Ces petites bêtes permettent de distinguer les versions de chaque document.
Ainsi le navigateur demande au serveur quelle version il a du document toto.js, le serveur lui répond et une comparaison s’effectue alors.
Si les numéros de version sont les mêmes, alors le navigateur utilise son cache, si les numéros sont différents, le navigateur récupère le fichier du serveur (et le met en cache).
C’est du moins ce que j’en ai compris.

Aussi, si vous avez programmé votre gestion de cache, ces échanges entre navigateur et serveur deviennent inutiles, leur suppression peut donc vous permettre de gagner en vitesse lors du chargement de vos pages.

Header unset ETag
FileETag none

Chez moi ça ne fonctionne pas, il semblerait qu’OVH ne gère pas les ETag, mais j’explore les forums pour trouver une réponse à cette question.

Éviter l’envoi de cookies

Chez OVH, et d’autres, les serveurs délivrent automatiquement de petits cookies avec des noms bien particuliers dépendant souvent de votre offre d’hébergement.
Ces cookies sont bien utiles dans certains cas, mais pas tout le temps.
Si votre site ne propose pas un champs de connexion avec une case « se souvenir de moi », ou un système complexe de formulaire et de session d’espace membre, peut-être que le code suivant vous servira :

Header unset Set-Cookie

Ceci pour une version « côté client », le suivant pour une action directement sur le serveur qui ne fonctionne pas toujours (dépend de son paramétrage)

RequestHeader unset Cookie

Si quelqu’un a des corrections à apporter à ce sujet, qu’il n’hésite pas à nous en faire part via un petit commentaire 🙂
Merci à Nico pour son commentaire.

Conclusion

Tout plein de codes pour vous aider à optimiser le chargement de vos pages.
Ces codes sont, bien entendu, à adapter en fonction des types de fichiers que vous utilisez, ainsi que de la fréquence de vos mises à jour et l’importance de votre trafic.
N’hésitez pas à parcourir le Web pour trouver de nombreux conseils d’optimisations, notamment certains adaptés à un système donné. (WordPress, Joomla!, etc.)

N’oubliez pas d’utiliser les commentaires sur votre fichier .htaccess pour vous y retrouver et organiser vos différents codes :

# Ceci est un commentaire sur une ligne

Si vous avez des précisions à apporter à cet article, je suis à votre écoute, l’Apache n’est pas ma spécialité 😉
Merci