Htaccess : performances et temps de chargement
Le htaccess est un fichier de configuration de votre serveur, 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.
Voici donc un guide pour coder votre fichier htaccess :
Htacces, performances et temps de chargement
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.
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary
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)...
#Check to see if browser can accept gzip files. If so and we have it - serve it!
ReWriteCond %{HTTP:accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
#make sure there's no trailing .gz on the url
ReWriteCond %{REQUEST_FILENAME} !^.+\.gz$
#check to see if a .gz version of the file exists.
RewriteCond %{REQUEST_FILENAME}.gz -f
#All conditions met so add .gz to URL filename (invisibly)
RewriteRule ^(.+) $1.gz [QSA,L]
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_keep_workfiles No
mod_gzip_can_negotiate Yes
mod_gzip_add_header_count Yes
mod_gzip_send_vary Yes
mod_gzip_command_version '/mod_gzip_status'
mod_gzip_min_http 1000
mod_gzip_minimum_file_size 300
mod_gzip_maximum_file_size 512000
mod_gzip_maximum_inmem_size 60000
mod_gzip_handle_methods GET POST
mod_gzip_temp_dir /tmp
mod_gzip_item_include file \.html$
mod_gzip_item_include file \.php$
mod_gzip_item_include file \.pl$
mod_gzip_item_include file \.rb$
mod_gzip_item_include file \.py$
mod_gzip_item_include file \.cgi$
mod_gzip_item_include file \.css$
mod_gzip_item_include file \.js$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^httpd/unix-directory$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include handler ^server-status$
mod_gzip_item_include handler ^server-info$
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
</IfModule>
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.
<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 A259200
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# END Expire headers
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 :
<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
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)
Header unset ETag
FileETag none
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:
<files .htaccess>
order allow,deny
deny from all
</files>
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 :
Options -Indexes
Le code Htaccess complet
Et donc le rendu final est :
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary
# 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 A259200
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# END Expire headers
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpe?g|png|gif|swf|gz|ttf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
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
# KILL THEM ETAGS
Header unset ETag
FileETag none
# protect wpconfig.php
<files wp-config.php>
order allow,deny
deny from all
</files>
# protect the htaccess file
<files .htaccess>
order allow,deny
deny from all
</files>
# protection de la lecture des répertoires
Options -Indexes
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)
Et si mon htaccess contient des erreurs ou s'il peut être amélioré, dites-le moi (car ce n'est pas vraiment mon domaine d'expertise...).
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)
Voici les thématiques abordées par Htaccess : performances et temps de chargement:
- Google Adsense -
- Htaccess -
- Système de cache -
- Temps de chargement -
- Temps de réponse serveur -
- Vitesse d'un site Internet - YSlow
91 commentaires sur Htaccess : performances et temps de chargement
Jonathan Petitcolas - Le 17 juin 2010 à 10 h 55 min
Excellent article ! Va falloir que je teste tout ça. Merci beaucoup ! :)
Geal - Le 17 juin 2010 à 13 h 14 min
Normalement, la partie « protection du fichier htaccess » est deja presente dans le fichier /etc/apache2/apache2.conf:
Deny from all
Ce qui empeche aussi la consultation par le navigateur du fichier .htpasswd
Robin - Le 17 juin 2010 à 13 h 15 min
Article très intéressant surtout la partie dédié aux Etags que je ne connaissaient pas du tout.
Renardudezert - Le 17 juin 2010 à 14 h 20 min
Tu peux ajouter les lignes juste apres ta directive :
(a tester bien sur suivant le type d’hebergement).
Sinon pour info, le listing de repertoire n’a pas de rapport avec la protection du .htaccess.
Le Listing de rep sur un serveur apache est du a l’option « Indexes » qui est activee par defaut sur les serveurs apache. Si tu veux empecher le listing de repertoire sur ton site, il te suffit d’ajouter au debut de ton .htaccess :
Options -Indexes
Si je trouve un peu de temps je vais essayer d’ecrire un billet pour demystifier un peu la configuration d’Apache, et donner quelques astuces pour optimiser/proteger son VirtualHost.
Gpenverne - Le 17 juin 2010 à 14 h 45 min
De même ^ J’ai appris des choses. Merci :)
Julien R - Le 17 juin 2010 à 17 h 33 min
je pense que tu as un problème d’optimisation avec tes commentaires. Supprime donc les favicon, résoud ton problème d’url d’avatar par defaut qui se duplique, combine tes js et meme insert le dans ton code html si ils sont dynamique, un sous-domain pour les fichiers statics avec le keep alive d’activer et desactiver pour les pages, etc…
regarde : http://www.webpagetest.org/result/100617_4FK/
Tu peux encore en faire des optim ;)
sinon pour revenir sur les Etag, le désactivé sur une page dynamique n’est pas un bonne idée. Par contre pour tous tes fichiers statics tu vas en effet gagner. Le top c’est d’avoir un autre nom de domaine pour ceux ci et la tu configureras ton htaccess pour des fichiers statics.
IBuzzyou - Le 17 juin 2010 à 21 h 33 min
Excellent récapitulatif pour optimiser son temps de chargement (maintenant un critere de Google), j’avais déjà quasiment tout appliqué sur mes sites mais pas au mieux, merci pour les Expires Headers, E-Tags et les cache control, je n’avais pas correctement configuré la durée, maintenant faut mettre à jour l’ensemble des sites..
Daniel Roch - Le 17 juin 2010 à 21 h 37 min
Merci encore Renarddudezert. Je teste ça et je met à jour l’article :)
@Julien : je sais, j’ai vraiment pas mal de boulot. Pour les favicon, il faut que je trouve le moyen de les mettre en cache. Pour le CDN avec le sous-domaine, c’est dans les projets. :)
Par contre, j’ai pas trop compris ce que tu entend par url d’avatar par defaut qui se duplique, idem pour le keepalive.
Julien R - Le 18 juin 2010 à 0 h 53 min
Je t’invite a regarder les images de ta page via l’outil que je t’ai proposé : http://www.webpagetest.org/pageimages.php?test=100617_4FK&run=1&cached=
on y constate tout de suite les images dupliquées :)
Pour le keep alive, ca sert a faire durée une connexion, le top si tu veux que ton site réponde vite, c’est de ne pas avoir de keep alive sur ton domain principal (tes pages donc) et d’en avoir un sur ton sous-domain qui fournie le contenu static. L’interet est de répondre le plus vite possible a une requete sur ta page, après le chargement de celle-ci c’est le sous-domain qui gere.
Daniel Roch - Le 18 juin 2010 à 12 h 56 min
@Julien R : effectivement, j’ai encore beaucoup de boulot sur mon thème. L’outil est vraiment puissant (presque mieux que GTMetrix ou Yslow). Il ne me reste plus qu’à m’y mettre…
@Geal : donc je supprime les lignes suivantes, ou je les supprime ?
Deny from all
@renarddudezert : tout est mis en place. Je vais attendre deux-trois jours avant de mettre à jour l’article, au cas où cela ne fonctionne plus pour certains visiteurs ^^.
Au fait, j’ai lu ailleurs que je devais aussi ajouter ces lignes pour Internet explorer. C’est utile ?
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
Ainsi que cette ligne pour les proxys:
Sinon, petite question à tous (qui avez l’air de bien vous y connaître). Je n’arrive pas à appliquer de expireheader à mon favicon. J’ai essayé plusieurs types de ExpiresByType, mais sans succès…
Geal - Le 18 juin 2010 à 14 h 33 min
Bin tu regardes le fichier apache2.conf, et tu verifies si les fichiers ht* sont inaccessibles pour l’utilisateur
Maxime - Le 18 juin 2010 à 18 h 26 min
Exécuter toutes les bonnes pratiques de cette article, c’est s’assurer un bon score Yslow ;-)
Quand j’ai mis en place ces techniques sur mon site, j’ai été étonné de voir que la plupart des sites ne sont pas optimisés. C’est pourtant de petites choses en petites choses que l’on améliore performances et expérience utilisateur.
CédricADW - Le 20 juin 2010 à 10 h 45 min
Voilà un article très complet sur le .htaccess
Je l’ajoute dans ma revue de Web ;)
leelooz - Le 22 juin 2010 à 15 h 27 min
Très intéressant comme article.
Mais que se passe-t-il par ex. si je modifie un des fichiers .css pour modifier le design ou .js pour ajouter une fonctionnalité (ou une image c’est pareil) ?
« Expire Header » indique qu’il est en cache pour 30 jours et le Etag est coupé donc le visiteur n’aura pas la dernière version avant longtemps ?
Daniel Roch - Le 22 juin 2010 à 17 h 32 min
Il y a deux solutions :
- Soit tu change l’url de ton thème (auquel cas il va devoir tout recharger)
- Soit tu indiques un identifiant de version, du type *.css1 (mais je n’ai jamais testé cette technique…).
leelooz - Le 22 juin 2010 à 19 h 51 min
Ouais, la solution semble être de renommer le nom du fichier que l’on souhaite modifier afin qu’il soit bien pris en compte sans attendre 1 mois.
Sinon, je pensais à un truc: par défaut les navigateurs gèrent déjà un cache des fichiers composants un site, donc à moins de vider le cache on re-télécharge pas les fichiers/image chaque fois de toute façon ?
les seules choses qui doivent rester comme « communication » avec le serveur sont les « Etag » pour savoir s’il doit ou non re-télécharger les fichiers
Daniel Roch - Le 22 juin 2010 à 21 h 25 min
Ce n’est totalement vrai que pour les images.
En général, il va télécharger de nouveaux les fichiers générés à partir de php, les javascript et autres pubs gérées en javascript.
Et s’il ne le fait pas, le reste de cet htaccess va compresser les données.
Un exemple : le nouveau javascript de mon thème pèse normalement 120ko, mais plus que 45ko après compression. ;)
jeans - Le 26 juin 2010 à 13 h 10 min
Merci, super article très utile!
Grâce à toi j’ai rajouté Expire Headers et Etags. Article qui tombe au bon moment puisque Google annonce prendre encore plus en compte (dans un futur proche) le temps de chargement de nos sites.
Je n’ai pas envie de mauvaise surprise à cause de quelques sec de chargement.
Encore merci!!
Guillaume - Le 22 juillet 2010 à 12 h 19 min
Excellent article !
J’ai passé de nombreuses heures pour réussir à configurer la compression GZIP pour mon site sans réussite puis je suis tombé par chance sur ton article qui a enfin apporté une solution fonctionnelle à tous mes problèmes.
Merci, tout fonctionne, c’est génial !
Lionel78 - Le 10 août 2010 à 11 h 37 min
Merci pour cet article, Yslow m’indiquait que mon site n’avait pas de compression Gzip, avec les liens donnés dans l’article, je m’aperçois que la compression fonctionne déjà correctement.
Il ne me reste plus qu’à tester les différentes options, j’espère gagner sensiblement en temps de chargement !
Cédric - Le 17 août 2010 à 16 h 08 min
Super article !
Je ne trouvais pas comment désactiver les Etags, et j’utilisais un truc bien plus simpliste pour le reste (du coup mon site photo affiche un score entre 91 et 97/100 sur YSlow ^_^)
Sur certains mutualisés il faut par contre demander au support d’activer des fonctionnalités (cas des hébergements Premium chez PHPNET par exemple ; sur leur mutu « normal » tout fonctionne sans aucun soucis)
Lashon - Le 29 août 2010 à 16 h 31 min
Oui, presque complet ton htaccess. Il manque les lignes essentielles de configurations propres à passer en php5 : http://lashon.fr/wordpress/si-plantage-verifier-forcer-hebergeur-vers-php5-code-htaccess/
Perso j’ai déjà configuré tout ça chez moi sauf les expire headers parce que je modifie encore trop souvent mon thème, ce qui pose un problème. Certain que le cache et l’expiration font gagner encore en optimisation.
Faire gaffe avant d’utiliser le MOD_DEFLATE COMPRESSION, cela dépend de l’hébergeur, comment celui-ci interprète Apache. Chez 1and1 par exemple, pas question de l’utiliser. Il faut alors passer par un fonction php dans son thème.
Puis question hors sujet: je m’aperçois que tu as interdit de voir les blogs des commentateurs de ton Web. C’est un peu à sens-unique et pas très interactif comme démarche…
Daniel Roch - Le 30 août 2010 à 9 h 03 min
@Lashon : merci pour ces précisions pour le mod_deflate compression. Tu utilises quoi comme alternative php quand tu ne peux pas l’utiliser ?
En ce qui concerne le blogs des commentateurs, je modère beaucoup. Il faut que le blog soit pertinent vis-à-vis des thèmes de SeoMix ou de l’article. Donc pas mal de liens sautent (car le nombre de spammeurs SEO est impressionnant).
Et souvent, c’est un lien par commentaire, donc soit le site, soit un lien publié dans le commentaire.
Lashon - Le 30 août 2010 à 11 h 41 min
Daniel,
Pour les commentaires je ne parle pas de modération, la modération est normale et ton droit le plus strict (je modère aussi sur mon blog). Je parle du simple fait qu’aucun lien dans le nom de l’auteur qui commente ne soit accessible. Tu fais une grosse bourde car c’est plutôt anti web interactif, pas le jeu du blogging actuel. Le sens unique, tu sais, ça va éloigner beaucoup de tes visiteurs. Enfin tu fais comme tu veux.
Pour ta question de mod_deflate en php, il suffit de mettre en haut de son header : < ?php ob_start("ob_gzhandler");?>
encore faut-il aussi jouer avec le php.ini, mais c’est une autre histoire
Daniel Roch - Le 30 août 2010 à 18 h 55 min
@Lashon : merci pour le bout de code php.
Et pour les sites, je ne met que les sites pertinents (adieux sites de casinon, sur les chiens et chats ou sur la cuisine), et ceux où le commentaire tient en plus d’une ligne… je ferais un article sur la question pour mieux en discuter. ;)
zonedevie - Le 13 septembre 2010 à 9 h 31 min
Très bon article. merci pour toutes ces infos :-)
j’ai pas mal galérer pour trouver l’info sur l’expiration des images !
Philippe Cadu - Le 25 septembre 2010 à 10 h 52 min
Un grand merci pour cet article , moi qui ne suit pas expert,
- j’ai mis en place progressivement les modifications du Htaccess ,
- avec l’article sur le meilleur plug in de cache , j’ai ajouté DB Cache Reloaded à wp super cache
- avec l’article sur les plug-in à éviter j’en ai supprimer deux ou trois , il n’y a que WP-Cumulus que je garde même si ce n’est pas le top , il est bien plus esthétique que l’horrible nuage de mots clefs .
J’en ai essayé un autre en HTML5 aussi lourd a chargé et fait tourné les processeurs à 60%. (Si vous connaissez un qui efficace et esthétique , je suis preneur)
– Temps de chargement, Temps de réponse serveur, Vitesse, j’ai tout contrôlé avec YSlow
Donc résultat temps d’accès au serveur divisé par deux , temps de chargement divisé par deux .
En page d’accueil, j’ai diminué le nombre d’articles et installé le plug-in WP-PageNavi et la aussi vitesse d’affichage bien plus rapide
Résultats : les visites et le nombre de page en augmentation de 50 % en moyenne suivant l’actualité .
Donc je me répète, un grand merci pour les détails et explications fournies qui permettent à un non-expert Worpress de mettre en application des techniques pointues.
Voilà , je tenais à faire part de mes résultats et de mes encouragements à continuer.
parierenfrance - Le 28 septembre 2010 à 20 h 09 min
Cet article est excellent et m’a bien aidé. Après avoir passé un bon moment à réduire mon page speed pour des clopinettes, grâce aux implémentations proposées mon site est passé de 76 à 100/100 sur l’outil Page Speed de Google.
Un bémol : Header append Vary User-Agent env=!dont-vary me fait planter le chargement de la page.
Merci
Pierre Aulagne - Le 22 octobre 2010 à 10 h 40 min
salut
sur mon site, aveec yslow, je n’ai que des A hormis sur :
- Compress components with gzip : F
- add expire headers : F
- Use a Content Delivery Network (CDN) : F
- Make fewer HTTP requests : F
C’est un site sous WP 301 avec le theme Atahualpa chez OVH perso (je débute)
Me conseillez-vous de tester le remplacement pur et simple de mon fichier htaccess par le vôtre SVP ? (je ferai une sauvegarde du mien promis !)
Daniel Roch - Le 22 octobre 2010 à 21 h 05 min
Toujours faire une sauvegarde avant, mais oui, je te conseille de tester chaque élément de mon fichier htaccess pour accélérer ton site.
Dakine - Le 8 novembre 2010 à 23 h 10 min
Oh parfait! merci beaucoup ca à répond a 90% de mes questions concernant l’optimisation de ma boutique.
Il en reste une de taille… Sxiste t-il une application capable de faire le ménage dans un fichier .CSS ? Car le miens à subit beaucoup de modifications, le site aussi, finalement pleins de choses y sont à présent complètement inutiles.
Daniel Roch - Le 9 novembre 2010 à 10 h 34 min
Il faut chercher une application « minify » pour css (Google is your friend).
DJib's - Le 9 novembre 2010 à 20 h 11 min
Chez l’hébergeur 1&& la compression Gzip n’est pas possible par le .htaccess, il font donc créer un fichier php.ini et mettre le code ci-dessous. Ensuite il faut le mettre à la racine du site.L’outil yslow vous indiquera que qu’il n’y pas de compression Gzip, mais en veraifant sur le site http://www.gidnetwork.com/tools/gzip-test.php , vous verrez qu’elle y est bien (5 pour la compression est le bon compromis).
zlib.output_compression_level = 5
Daniel Roch - Le 10 novembre 2010 à 9 h 25 min
Excellent. Merci beaucoup pour ton code Djib’s !
billboc - Le 20 décembre 2010 à 18 h 17 min
bonjour,
y a t-il un risque que les modifications que j’apporte à un fichier n’apparaissent pas tout de suite avec ces reglages ?
merci
Daniel Roch - Le 20 décembre 2010 à 22 h 09 min
@Billboc : si tu modifiez le fichier htaccess, les modifications sont immédiates. Soit cela fonctionne tout de suite, soit cela plante l’accès à ton site (mais un accès FTP permet de revenir immédiatement en arrière en cas de soucis)
Billboc - Le 21 décembre 2010 à 8 h 49 min
Bonjour Daniel,
merci pour ta réponse. En fait ma question n’était correcte.
J’ai pas bien compris le fonctionnement des header et cache control.
Si je fais un changement sur mon blog est-ce que le navigateur va rester sur la version qu’il a en cache ? ou va t-il vérifier qu’il n’y en a pas une nouvelle ?
merci encore une fois pour le beau boulot que tu fais !!
Daniel Roch - Le 21 décembre 2010 à 11 h 08 min
Oui, le navigateur va garder le cache. Le moyen le plus simple de contourner le problème est de renommer le répertoire de ton thème, ce qui va forcer le navigateur à tout remettre en cache.
billboc - Le 7 janvier 2011 à 10 h 30 min
salut je viens de mettre un blog privée en ligne
tout fonctionne bien de chez moi
mais les autres membres ne peuvent se connecter en utilisant pourtant les mots de passe qui fonctionnent chez moi ??
est-ce que les astuces citées ci-dessus que j’utilise sur mon blog peuvent être à l’origine de ce problème ?
merci pour ton aide
Daniel Roch - Le 7 janvier 2011 à 12 h 29 min
@Billboc : normalement, aucun impact. Mais pour t’en assurer, il suffit de remettre le fichier htaccess initial.
Limonade - Le 20 janvier 2011 à 22 h 07 min
Bonsoir, vraiment excellent cet article!
Je connaisser déjà le Gzip.
Je rechercher des infos pour désactiver les Etags et aussi
gestion du cache en Php.
Je viens de mettre en pratique, ça marche Nikel.
Merci! :)
chevrolat - Le 10 février 2011 à 11 h 51 min
Bonjour,
J’ai un site qui présente des photos modifiées régulièrement. Elles sont toutes dans le rep : img.
comment puis-je enlever seulement ce répertoire de la gestion de l’expiration et du cache control du reste du site ?
Merci encore par la clarté de ce tuto !
sylvain.
Julien R - Le 10 février 2011 à 14 h 03 min
@chevrolat
tu dois le gerer via apache => DirectoryMatch pour selectionner ton repertoire et après il faut synchroniser la date de derniere modification du fichier avec le header du cache du fichier « Last-Modified » (n’oublie pas de mettre un must-revalidate qui renvoie du 304 ^^ )
chevrolat - Le 10 février 2011 à 17 h 47 min
Je crois avoir compris pour directoryMatch mais comment implémenter le header sur un fichier image ?
faut-il passer par demande_img.php appelé dans la source de la balise html img
où ce script modifiera le header avec la bonne valeur ‘last-modified’,
ou y’a t’il un moyen plus ‘automatique’ ?
merci.
julien R - Le 11 février 2011 à 9 h 21 min
@chevrolat Utilise uniquement apache : mod_include pour recuperer le flastmod et mod_header
Si ca peu aider, Jai trouve un (enorme) article sur htacces :
http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html
chevrolat - Le 11 février 2011 à 11 h 30 min
Merci,
je posterai si j’arrive à mes fins…
Philippe - Le 24 février 2011 à 10 h 18 min
Merci pour cet excellent article !
gestion de crise - Le 27 avril 2011 à 20 h 20 min
Excellent article pour optimiser la vitesse de son site. Merci beaucoup.
Julien S - Le 3 mai 2011 à 10 h 37 min
Merci pour cette article !
J’aurais juste deux questions :
1/ Est-ce que cela ne comporte pas de risque de faire de la compression en Gzip ? Est-ce que l’alternative PHP / HTML passe en remplacement si la navigateur ne passe pas ?
2/ Niveau Etag, est-ce qu’on a une estimation du gain de performance ? Ayant un contenu qui s’affiche de façon aléatoire sur mon site, j’ai peur que cela embrouille ma fonction…
Daniel Roch - Le 3 mai 2011 à 11 h 54 min
@Julien : le fait de mettre en place la compression Gzip ne comporte pas de risque, puisque les données transmises seront toujours au format HTML (mais compressé). Il faut juste savoir si ton serveur le permet ou non.
Concernant les etags, on gagne entre 0.5 et 1 seconde de temps de chargement sur les pages ayant beaucoup de contenu. Normalement, cela ne devrait avoir aucun impact sur tes fonctions aléatoires.
Emmanuel - Le 5 mai 2011 à 23 h 31 min
Hello, merci Daniel, cela fait un bon résumé des optimisations serveur à effectuer.
J’ai appliqué cela. A voir maintenant que cela va produire. Encore merci. Manu
Julien S. - Le 8 mai 2011 à 18 h 39 min
Ok merci pour tes réponses, je verrais bine à la longue si ça passe bien ^^
Sinon, y’a aussi 2 lignes pas mal :
ErrorDocument 404 /404.php
Ca permet de personnaliser vos page 403 et 404 !
manu - Le 21 mai 2011 à 21 h 37 min
Salut, j’ai mis tous le code dans mon htaccess pour mon site d’article qui est très lourd.le chargement des pages est plus rapide mais j’ai un gros soucie.
Je crois que cela ne va pas avec Adsense (si c’est possible).
Je l’avais toute la journée sur le site (le bout de code), résultat rien dans le rapport adsense. Je viens de l’enlever et déjà presque 200 affichage…
Tu as déjà un problème similaire?
Daniel Roch - Le 22 mai 2011 à 9 h 19 min
Bizarre. J’ai mis ce code dans mon htaccess et tout fonctionne, y compris mes publicités Adsense. Essaie en ajoutant bloc par bloc, pour savoir lequel pose problème. ;)
cob51 - Le 28 mai 2011 à 9 h 25 min
Des heures à ramer pour pouvoir compresser et optimiser le cache…et enfin je tombe sur le site qu’il me fallait ;-)
Très bien expliqué, mais vu mon niveau je n’ai pas tout saisi,le principale est que ça fonctionne, seul bémol : page speed ne peut plus accéder pour une analyse des performances mais ça fonce d’enfer, c’est peu important
Arkanys - Le 9 juin 2011 à 0 h 52 min
Bonjour,
Merci pour tous ces bouts de codes pour le HTaccess. Cela m’enlève une bonne épine du pied car j’ai passé beaucoup de temps à tester des codes d’autres sites … et rien ne fonctionnait.
Selon GTmetrix, la page d’accueil (de l’un de mes sites) est passée d’un temps de chargement de 2,09 s à 1,37 s … soit 35% de gains !!
Sarbacanne - Le 11 juillet 2011 à 10 h 09 min
Question bête, si je bloque le hotlink de mes images (via htaccess), y aura-t-il un impact sur mon référencement? Je gère un site de photographie amateur, et mon site est beaucoup sollicité par Google Image et Facebook, d’où ma question. Quoiqu’il en soit, merci beaucoup pour cet article très complet qui m’aura bien servi! (les etags, je ne connaissais vraiment pas).
Daniel Roch - Le 11 juillet 2011 à 14 h 22 min
Normalement, cela n’aura aucun impact en référencement, à condition que ton site fasse de jolies liens vers ces images (et donc avec une balise Alt)
Sarbacanne - Le 11 juillet 2011 à 15 h 13 min
Merci beaucoup, je verrai à l’usage de toutes façons. Ce qui m’inquiète c’est qu’avec un balisage de ce type :
(La balise <a> vers l’image plus grande est pour fancybox)
…et un blocage htaccess de ce type :
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ <a href="http://monlien/image.gif" rel="nofollow">http://monlien/image.gif</a> [L]
…sur Google image lorsque je clique sur une de mes photos, je suis redirigé vers une miniature crée par Google, et non vers l’image d’origine. Et pour ce qui est de facebook, l’image d’article n’apparait plus. Je pense qu’il va me falloir ajouter une liste d’exclusion.
Pour en revenir aux performances du site après modification htaccess, l’actualisation de la page principale de mon site est désormais instantanée. YES!
Yannick - Le 24 août 2011 à 18 h 48 min
Bonjour,
J’ai mis en place la mise en cache sauf:
Header unset ETag
FileETag none
ces deux lignes font planter le serveur.
Par contre http://pagespeed.googlelabs.com/ me dit toujours que je devrais exploiter la mise en cache du navigateur et me donne les urls avec à droite (délai d’expiration non spécifié).
Je ne comprends pas. Si quelqu’un à une idée du problème…
Merci d’avance
Henri666 - Le 1 septembre 2011 à 1 h 52 min
Salut, je voudrais appliquer ce fichier htaccess sur mon site : http://www.cursus-droit.fr, une fois que je remplace le fichier, la page d’accueil s’affiche parfaitement sauf… que TOUTES mes autres pages, articles… renvoient des erreurs 404. quelqu’un pourrait m’aider ?
PS:J’utilise wordpress et je suis chez easy-hebergement.
Daniel Roch - Le 1 septembre 2011 à 7 h 26 min
L’un des blocs du htaccess doit être incompatible avec hébergeur. Il faut donc tester élément par élément pour savoir lequel pose problème.
Bruno - Le 1 septembre 2011 à 10 h 25 min
Bonjour,
Je suis sur blogspot et je voudrais savoir comment installer le fichier htaccess sur mon blog mais je ne sais pas comment faire.
Pour le HTML pas de problèmes mais le PHP ne passe pas.
Je vous remercie.
Cordialement,
velane19
Henri666 - Le 1 septembre 2011 à 20 h 09 min
Salut Daniel,
J’ai déjà testé, mais rien ne marche :(
voici mon htacces d’origine :
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
Ou me conseilles-tu de mettre le code ?
Daniel Roch - Le 1 septembre 2011 à 20 h 46 min
Normalement, ce code issu de WordPress doit être placé après ceux présents dans cet article.
Alain - Le 7 septembre 2011 à 17 h 41 min
Bonjour et bravo pour vos conseils
Hier, j’ai mis en application toute la partie jusqu’à # KILL THEM ETAGS compris mais je pense qu’il y a un problème.
L’optimisation a été mise dans le htaccess se trouvant à la racine du site.
Dans un sous répertoire, j’ai un forum avec son propre htaccess non optimisé comme le précédent
Depuis ce matin Google crawle mon forum avec des url de ce type :
monsite.net/forums/forum-t463-p1
alors que les bonnes adresses sont sous la forme :
monsite.net/forums/forum-t463-p1,titre-du-message.html
J’ai retiré l’optimisation du htaccess principal et Google reprend mes pages avec les bonnes adresses.
Je pense donc qu’il y a un problème qui coupe les adresses avant la virgule.
Avez-vous une idée
Merci par avance
Daniel Roch - Le 8 septembre 2011 à 8 h 05 min
Normalement, il n’y as pas de cause à effet entre mes optimisations du htaccess et ton problème d’URL. Il faudrait que tu regardes la documentation de ton forum pour savoir comment corriger le problème.
C-Jay - Le 3 octobre 2011 à 12 h 51 min
Merci pour cet article fort intéressant !
Petite question :
Est-il possible d’appliquer la règle ExpiresByType image/jpg « access plus 2592000 seconds » à l’ensemble des sous-dossier présents dans le répertoire /image ?
Daniel Roch - Le 3 octobre 2011 à 14 h 20 min
Oui, on peut faire cela. Si je ne dis pas de bêtises, il suffit de placer un fichier htaccess dans le répertoire que l’on cible, en l’occurrence le répertoire image.
C-Jay - Le 3 octobre 2011 à 14 h 59 min
Exact ! Merci beaucoup.
Jean-Michel DAIX - Le 11 octobre 2011 à 10 h 47 min
Il reste à gérer les fichiers externes tels que celui de Google Analytics sur lequel nous n’avons pas la main pour définir une date d’expiration. Il existe pour WordPress cette extension pour gérer le script GA.js en local mais il n’est pas compatible avec la version 3 : http://wordpress.org/extend/plugins/local-analytics/
D’autres idées pour améliorer le chargement de ces fichiers externes ?
blh - Le 4 novembre 2011 à 0 h 21 min
Bonjour, (bonsoir selon)
je lis avec un réel plaisir toutes vos recommandations cependant, elles sont souvent assez techniques et ne répondent qu’à certains WP.
1)- faut-il ou non inclure deux systèmes de cache? Quant à celui du navigateur, quel doit-être sa valeur ?
2)- il est souvent question d’avoir un sous domaine réservé aux images et vidéos; soit, mais comment établir le lien?
3)- il existe un plugin wp pour le php.info qui ne donne pas partout les mêmes valeurs, par exemple les valeurs de la mémoire: quel est le procédé le moins mauvais ?
4)- beaucoup de questions’réponses des commentateurs font que l’on a tendance à s’y perdre: serait-il possible de donner un exemple de blog wp sérieusement référencé ou chacun adapterait ses particularités, et où interviendraient des google analytic et autres plugins de ce genre?
Je suis chez nuxit, en php5.2 sous serveur dédié et me promène avec une url de cette forme:
http://www.blh-land.fr/wp, avec blh-land comme nom de domaine. Est-il possible de simplifier cette adresse dans la mesure où j’ai un autre blog se terminant en Wa ?
Bravo évidemment pour cet article.
remerciements.
Daniel Roch - Le 4 novembre 2011 à 9 h 31 min
1- oui : il faut que le site Internet mette en cache les pages (comme WP-Super Cache pour WordPress), en complément du htaccess qui va mettre en cache sur le navigateur les données
2- je ferais un tutoriel là dessus car c’est un peu plus complexe
3- le mieux, c’est de passer uniquement par le fichier wp-config, et de demander à son hébergeur comment augmenter cette valeur.
4- le mien ;)
5- oui, le blog pourrait être situé à la racine sans répertoire. Regarde sur Google, il y a pas mal de tutos pour déplacer un blog WordPress
Jean lou - Le 4 novembre 2011 à 17 h 49 min
intéressant mais tout comme il y a un lien pour tester le gzip, existe-t-il un moyen de tester que les commandes etag fonctionnent? Sur ovh mutu par exemple, si j’ai la commande :
########## Begin – ETag Optimization
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
########## End – ETag Optimization
Comment vérifier que ça fonctionne normalement?
Daniel Roch - Le 5 novembre 2011 à 8 h 57 min
Normalement, l’outil en ligne GTMetrix l’indique quand les etags sont mal configurés.
blh - Le 6 novembre 2011 à 22 h 09 min
Merci pour la réponse.
J’ai un taux de compression de 23% et un temps d’accès au site de 0,6 à 0,7 sec: est-ce correct ?
Les autre blocs du htaccess ont l’air de bien fonctionner.
Seul problème maintenant est de comprendre et de régler tous les plugins que vous aviez donnez, SEO… Je navique avec une page en anglais et la même en traduction french ( merci Google), c’est loin d’être évident.
La question qui se rattache à tous ces réglages est alors: quels sont les bons réglages? Le pire est que même en français, il faille un dico pour comprendre ce qui est écrit.
Juste deux petites questions sur cet article:
1)comment faire pour remplacer le pas beau du tout 404 par un truc plus sympa qui réinvite à revenir sur le site ?
2)l’icône animée en début d’url du site n’apparaît plus, est-ce en raison du htaccess ?
Merci une nouvelle fois.
Daniel Roch - Le 7 novembre 2011 à 7 h 13 min
Pour ta première question, il existe pas mal de tutoriel ou de plugins pour faire cela : fais une recherche sur Google.
Pour la seconde, normalement le htaccess ne devrait pas bloqué les icônes animés…
blheblh - Le 7 novembre 2011 à 17 h 45 min
effectivement, pour la seconde, tout est en ordre.
je regarde aussi pour les 404
:)
Fab - Le 24 novembre 2011 à 10 h 21 min
Daniel,
Quel code faut-il insérer dans ton .htaccess pour mettre en cache l’affichage des plugins comme wordpress popular post, wordpress polls ou encore g-lock ?
Merci.
Fabien
Daniel Roch - Le 24 novembre 2011 à 12 h 21 min
@Fab : cela ne dépend pas du fichier htaccess, mais des plugins de cache.
Fab - Olabonga - Le 24 novembre 2011 à 14 h 18 min
Justement pour les plugin de cache, j’ai repris ton étude et ait opté pour DB et super cache. Une idée ?
Daniel Roch - Le 24 novembre 2011 à 15 h 11 min
Normalement, ils devraient être mis en cache : regarde sur les pages dédiées à ces plugins pour en savoir plus.
Phil - Le 27 novembre 2011 à 17 h 58 min
Bonjour,
compte tenu des évolutions sur le html5 et wordpress 3.3 qui arrive, est ce qu’il n’y aurait des changements à venir dans le fichier Htaccess .
Je te pose la question suite à la lecture d’un article sur http://fr.html5boilerplate.com/
Peux tu nous en dire plus ?
au plaisir de te lire
Phil
Daniel Roch - Le 28 novembre 2011 à 11 h 58 min
Le fichier HtAcces de Html5 BoilerPlate est effectivement très bien conçu, mais il n’apporte des optimisations qui ne s’appliqueront que sur un petit nombre de sites. Quand j’aurais le temps, j’essaierai de faire un article complémentaire sur les éventuels ajouts à mettre en place.
thomas - Le 16 décembre 2011 à 16 h 02 min
Bonjour , excellent htaccess.
je viens de l’installer sur un serveur mutualisé ovh pour un site (wordpress). J’ai vérifié avec YSlow et celui ci m’indique toujours des pbs avec mes Expired Header :-/
une idée du pb ?
merci
Daniel Roch - Le 16 décembre 2011 à 16 h 54 min
Est-ce que les expires headers concernent des fichiers présents ailleurs, comme le fichier des boutons Twitter, Google + ou des publicités Google Adsense) ?
thomas - Le 18 décembre 2011 à 9 h 27 min
Sur 24 liens, 6 sont extérieurs (notamment : http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz ) a mon site.
Les autes font références aux PNG du theme utilisé
une idée ?
Daniel Roch - Le 18 décembre 2011 à 17 h 20 min
Pour les PNGs, c’est bizarre car le code donné ici devrait fonctionner. Pour les autres fichiers, c’est normal car ils ne sont pas sur le serveur, donc le htaccess ne peut agir dessus.
thomas - Le 18 décembre 2011 à 18 h 37 min
oui j’avoue aussi ne pas comprendre. tout semble pourtant correct.
impossible a corrigé. Peut etre cette option n’est pas utilisable sur un serveur mutualisé OVH.
thomas - Le 19 décembre 2011 à 10 h 14 min
j’ai finalement trouvé la solution de cache control via ce site : http://www.askapache.com/optimize/speed-site-caching-cache-control.html
Semble t il la syntax en seconde semblait ne pas fonctionner.
Au cas ou ça peut aider.
Benoist Rousseau - Le 4 janvier 2012 à 0 h 04 min
Merci Daniel pour cette précieuse aide. Mon site a gagné 5 points au speed test instantanément.
Je vais suivre de près les mises à jour de ce post pour le html5 et les évolutions avec wordpress 3.x