Htaccess : performances et temps de chargement
Le , mis à jour le | Dans WebMarketing : nos guides et conseils » Développement & ergonomie
|Le htaccess est un fichier de configuration de votre serveur (pour les serveur Apache), et celui-ci peut vous rendre énormément service pour les performances de votre site, sur l’expérience utilisateur et sur le référencement naturel. Mais c’est un peu le flou sur la manière de le configurer.
Si vous rencontrez des soucis avec ce code et que vous souhaitez que nos équipes se charge de l’adapter et de l’installer, faites appel à nos services de développement. Voici donc un guide pour coder votre fichier htaccess dans une optique de temps de chargement (expires headers, etags, etc.), ainsi qu’un modèle de ce dernier :

Avant propos
Testez, testez et testez !
Chaque code donné ici permet d’optimiser le fichier htaccess pour accélérer votre site, le sécuriser et réduire la bande passante utilisée.
Mais en fonction de la configuration de votre serveur, les codes peuvent ne pas fonctionner : vous devez absolument tester et adapter chaque code en fonction de vos besoins !
Quelques définitions
Pour mieux comprendre cet article, voici quelques explications. N’hésitez pas à me contredire en commentaire si je me trompe.
- Htaccess : c’est un fichier de configuration pour un serveur web apache. Si vous ne savez pas sur quel type de serveur vous êtes, demandez à votre hébergeur. La configuration qui est inscrite dedans s’applique au répertoire dans lequel il est placé, ainsi que dans tous ses sous-répertoires.
- Compression Gzip : c’est un format de compression utilisé pour réduire la taille de vos fichiers, et ainsi accélérer votre site.
- Serveur Apache : c’est le format de serveur http le plus répandu au monde, et que l’on retrouve dans la plupart des offres d’hébergement pros et grand public.
- Système de cache : le cache d’un site internet ou d’un programme permet d’accéder à des données ou des pages déjà prêtes, sans avoir à les régénérer ou à les recalculer. Si vos pages sont en cache sur votre serveur, les visiteurs y accéderont beaucoup plus vite.
- Entêtes et requêtes : il s’agit d’informations transmises entre votre ordinateur et le serveur. Ces informations servent aux deux en indiquant différentes informations : emplacement des fichiers, date de mise à jour, configuration, …
- CHMOD : un chmod permet de modifier les droits d’un fichier en lecture, écriture et exécution, sous la forme de 3 chiffres (exemple : 777 ou 644). Chaque chiffre donne des droits différents en fonction de l’utilisateur : propriétaire, groupe et publique. C’est un point à étudier en détail pour sécuriser un site.
Compression
Compression Gzip via Deflate
Premier point à faire, activez la compression Gzip des fichiers en sortie de votre serveur.
Cela va accélérer le temps de chargement, et réduire la bande passante utilisée. Attention cependant, car cette compression n’est pas supportée par tous les navigateurs (notamment Netscape) et ne fonctionnera que sur des serveurs apaches 2.x. Testez donc bien votre site sur plusieurs navigateurs après la mise en place de ce code.
Compression Gzip via Mod_Gzip
Le code suivant remplace le précédent mais fonctionne les serveurs apache 1.x qui ne peuvent gérer le mod_deflate (enfin, d’après ce que j’ai compris)…
Testez la compression de votre site
En plus des outils connus de Firefox comme Yslow et Firebug, voici deux petits sites pour tester votre compression :
Cache et headers
Expire headers
Le Expire header est un atout de taille. Il 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. Vous allez donc diminuer drastiquement le nombre de requêtes de votre site.
Inutile de vous acharner si vos outils indiquent que les expire headers ne sont pas appliqués sur tous les fichiers. Si comme moi vous utilisez le système publicitaire d’Adsense, vous ne pourrez rien y faire…
Cache-control
Le cache control est un complément de l’expire headers, 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 :
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.
La différence entre une cache-control public et private réside dans les proxys. Le paramètre public indique que la mise en cache est pour tout le monde, tandis que private indique que les proxys n’ont pas l’autorisation de mettre en cache.
Le Etag
Ce code permet de désactiver les etags, et donc de réduire encore le nombre de requêtes et votre bande passante utilisée.
Un etag permet de différencier deux versions d’un document ou d’un fichier. Cet Etag est transmis entre votre ordinateur et le serveur lors des requêtes HTTP. Son but est de vérifier si le document a été modifié. Si le fichier est identique, le navigateur utilisera son cache. Mais lors de chaque requête, les informations etags vont être transmises inutilement, surtout si vous avez déjà configuré comme indiqué le reste de votre fichier htaccess.
De plus, sur les serveurs apache, l’identifiant est basé sur la date de dernière modification. Mais si le site est géré par un cluster de plusieurs serveurs, on aura parfois un identifiant différent alors que le fichier n’a jamais été modifié, le tout à cause du etag… (voir sources plus bas)
Et voilà, vous êtes débarrassé une bonne fois pour toute de ces fameux etags.
Sécurité
Protection du fichier htAccess
Nous allons maintenant sécuriser l’accès au fichier htaccess via ce code:
Profitez-en pour faire un CHMOD 644 de votre fichier htaccess pour le sécuriser au maximum (vous donnerez ainsi les droits en écriture uniquement à l’admin serveur).
Protection de la lecture des répertoires
Pour éviter que vos visiteurs ne puisse consulter les répertoires qui ne contiennent pas de fichier index, utilisez ce code :
Le code Htaccess complet
Et donc le rendu final est :
En ce qui concerne mes sources, je ne les ai pas toutes retrouvées… Mon htaccess a évolué au fur et à mesure des mois, et chaque bout de code a été pris à droite à gauche. Dès que je les retrouve toutes, je vous fais signe.
- Gestion des Etags (Take It Web)
- Pourquoi ajouter des expires headers ? (Journal de Guillaume)
Si notre htaccess contient des erreurs ou s’il peut être amélioré, dites-le nous.
Article mis à jour le 29 Juin 2010 :
- Ajout des expires headers pour les favicons
- Grosse amélioration de Mod_Deflate Compression (merci à RenardDuDezert)
- Ajout de la protection de la lecture des répertoires (merci à Geal)
Un modèle de fichier htaccess
Vous pouvez aussi télécharger directement ce modèle de fichier htaccess pour l’amélioration des performances et du temps de chargement de votre. Renommez juste htaccess.txt en .htaccess le fichier avant utilisation.