Table des matières

Améliorer la vitesse de chargement du site grace au cache-control et aux headers - htaccess

La vitesse de chargement d'un site internet est étroitement lié à la composition de chacune des pages de ce site.
Le temps de chargement d'une page est un critère important pour l'expérience utilisateur et surtout est un critère important pour le SEO de votre site. Grâce au htaccess, vous pouvez améliorer les performances de votre site, l’expérience utilisateur et le référencement naturel.

Nous verrons ici, comment grâce à expire-headers et au cache-control d'Apache, nous pouvons sensiblement améliorer la vitesse de chargement de vos pages web.

Difficulté
Moyen

Pré-requis

Expires Header

Le Expire header permet d’indiquer que certains types de fichiers peuvent rester en cache dans le navigateur du visiteur 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.

Ce qui réduira le nombre de requêtes vers votre site. La navigateur réutilisant les données récupérées précédemment lors du chargement de la page précédente ou lors d'une visite précédente. 

# BEGIN Expire headers
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 7200 seconds"
 ExpiresByType image/jpg "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 2592000 seconds"
 ExpiresByType image/icon "access plus 2592000 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 2592000 seconds"
 ExpiresByType text/javascript "access plus 2592000 seconds"
 ExpiresByType text/html "access plus 7200 seconds"
 ExpiresByType application/xhtml+xml "access plus 7200 seconds"
 ExpiresByType application/javascript A2592000
 ExpiresByType application/x-javascript "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# END Expire headers

La ligne <IfModule … est présente pour tester si le module expires est bien activé sur votre site internet. Si le module est absent, les lignes comprises entre <IfModule mod_expires.c> et </IfModule> ne sont pas lues.

ExpiresActive sert à activer le module expires.

ExpiresDefault permet d'indiquer la valeur par défaut qui doit être appliquée. Ici 7200 secondes.

ExpiresByType permet de spécifier une valeur de cache navigateur différente selon le mimetype des fichiers à lire. Exemple : une image JPEG illustrant un article ne change pas, elle peut donc être mise en cache par le navigateur du visiteur et lors de sa visite suivante, l'image sauvegardé dans le cache sera utilisée au lieu de d'être rechargée. L'image sera rechargée si les données sauvegardées ont plus de 30 jours ou si le visiteurs a vidé ses caches.

Les valeurs et mimetype sont données à titre d'exemple.
vous devez absolument tester et adapter ce code en fonction de vos besoins !

Cache-control

L'en-tête HTTP principal utilisé pour la mise en cache est Cache-Control. Le module Cache-control vient en complément du module headers et sert spécifier les directives de cache. en fonction du serveur que vous avez ou du navigateur utilisé par vos visiteurs. Là aussi, on va déterminer une durée de cache par type de fichier : 

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
 <FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
 Header set Cache-Control "max-age=2592000, public"
 </FilesMatch>
 <FilesMatch "\.(js)$">
 Header set Cache-Control "max-age=2592000, private"
 </FilesMatch>
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

La ligne <IfModule … est présente pour tester si le module headers est bien activé sur votre site internet. Si le module est absent, les lignes comprises entre <IfModule mod_headers.c> et </IfModule> ne sont pas lues.

<FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$"> : Cette ligne permet de détecter les extensions de fichiers de type ico, jpeg, jpg, png, gif, swf, css, gz. Si la requête est effectivement pour ces types de fichiers, alors le contenu entre <FilesMatch… et </FilesMatch> est exécuté.

Header set Cache-Control "max-age=2592000, private" : Cette ligne indique la durée maximale du cache et si ce cache est public ou private. La différence entre un cache-control public et private réside dans la gestion des proxys. Si le visiteur transite par un proxy et que le cache-control est réglé sur private, alors le proxy n'a pas l'autorisation de mettre en cache le contenu.

Les fichiers dynamiques ne sont pas, ou très peu mis en cache (html, php, cgi, …), tandis que le reste est mis en cache pour une longue durée. Dans l'exemple ci-dessus nous avons chois délibérément de ne pas appliqué de cache sur les fichiers dynamiques.

Notes de version

Version 1.00 [25/03/2023] - Article initial

Auteurs et sources

Autres liens rapides pouvant vous intéresser

A