Le temps de chargement des pages web est depuis toujours un point à prendre en compte dans le développement d’un site web. En effet, la lenteur d’affichage va faire fuir vos visiteurs et cela n’est pas très bon pour le référencement. Il est donc recommandé qu’une page web se charge en moins de 3 secondes. Des outils comme Firebug ou le site Loads.in (qui permet de voir le temps de chargement de votre site à l’autre bout du monde!) vont vous permettre d’analyser le temps de chargement de vos pages.

Il existe pourtant une technique simple à mettre en place permettant d’accélérer le temps de chargement et d’économiser de la bande passante en ajoutant quelques lignes dans le fichier htaccess. Grâce aux modules Apache mod_headers et mod_expires, vous allez pouvoir spécifier la validité de vos fichiers et la mise en cache par le navigateur des éléments statiques de votre site!

Les modules Apache mod_headers et mod_expires

Le module Apache « mod_headers » permet de manipuler et contrôler les en-têtes de requêtes et réponses HTTP. C’est lui qui va permettre ou non la mise en cache par le navigateur.

Le deuxième module « mod_expires » quant à lui va permettre d’indiquer au navigateur la validité des fichiers téléchargés. Lors du premier chargement, le navigateur télécharge tous les éléments de la page et les met en cache. Dans les chargements suivants, le navigateur va contrôler la validité des fichiers présents dans son cache et téléchargera uniquement que les fichiers qui ne sont plus valides. Il est possible de poser une conditionnelle sur le type de fichier afin d’attribuer une validité différente grâce à la directive .

Le code dans le fichier .htaccess

Insérez le code ci-dessous dans votre fichier .htaccess à la racine de votre site. Comme vous pouvez le voir, il a été défini un temps de mise en cache différent selon le type de fichier.

Ici, les fichiers média et documentaires ont une date d’expiration très éloignée (1 an) car n’étant jamais modifiés à priori. Pour les images, une validité de 2 semaines pour les images et animations, une semaine pour le JavaScript et les feuilles de style (pouvant être mis régulièrement à jour), 2 heures pour des fichiers régulièrement générés comme les fichiers HTML. ETag est désactivé: cela permet de forcer le navigateur à lire les instructions dans les directives ExpiresDefault et Cache-Control.

N’hésitez pas à adapter ces valeurs à votre convenance.


### Caching mod_headers + mod_expires



 # Turn on Expires and set default to now
 ExpiresActive On
 ExpiresDefault "now"

 # Set up caching on media files for 1 month
 
 ExpiresDefault "access plus 1 month"
 

 # Set up caching on images, CSS and JS files for 1 week
 
 ExpiresDefault "access plus 1 week"
 

 # Set up 1 hour caching on commonly updated files
 
 ExpiresDefault "access plus 1 hour"
 

 # Force no caching for dynamic files
 
 ExpiresActive Off
 




 # Remote ETag from headers
 Header unset ETag

 # Disable ETag for files
 FileETag None

 # Media files are catchable
 
 Header append Cache-Control "public"
 

 # Images, css and javascript files are catchable
 
 Header append Cache-Control "public"
 

 # Commonly updated files are catchable
 
 Header append Cache-Control "public"
 

 # Force no caching for dynamic files
 
 Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
 Header set Pragma "no-cache"
 



Be Sociable, Share!