{"id":1009,"date":"2011-02-13T17:27:01","date_gmt":"2011-02-13T16:27:01","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1009"},"modified":"2020-06-10T23:57:10","modified_gmt":"2020-06-10T21:57:10","slug":"mettre-en-cache-les-fichiers-statiques-de-votre-site-web-htaccess","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mettre-en-cache-les-fichiers-statiques-de-votre-site-web-htaccess","title":{"rendered":"Mettre en cache les fichiers statiques de votre site Web (htaccess)"},"content":{"rendered":"

J’avais compl\u00e8tement oubli\u00e9 de vous en parler, et pourtant c’\u00e9tait pr\u00e9vu depuis l’article sur l’optimisation du chargement de vos pages gr\u00e2ce \u00e0 la compression Gzip<\/a>.
\nToujours li\u00e9e \u00e0 l’optimisation de votre site Web, et \u00e0 l’utilisation d’un fichier .htaccess<\/a>, la mise en cache des fichiers statiques permet d’\u00e9conomiser du temps au chargement des fichiers cibl\u00e9s.<\/p>\n

Quelques d\u00e9finitions<\/h2>\n
\n
.htaccess<\/dt>\n
Le fichier .htaccess vous permet de communiquer avec votre serveur (apache) dans le but d’en changer une partie des param\u00e8tres et des comportements par d\u00e9faut<\/dd>\n
Serveur Apache<\/dt>\n
Il s’agit d’un format de serveur, il est le plus r\u00e9pandu dans le monde, et est utilis\u00e9 par la plupart des fournisseurs d’h\u00e9bergement (gratuit ou payant – Par ici pour choisir un h\u00e9bergeur web<\/a> compatible Apache)<\/dd>\n
Headers<\/dt>\n
En-t\u00eate, en anglais, il s’agit d’informations que l’on place en t\u00eate de page afin d’orienter le navigateur vers telle ou telle interpr\u00e9tation de la page. Par exemple, l’en-t\u00eate charset va permettre de d\u00e9finir le mode de lecture des caract\u00e8res de la page.<\/dd>\n
Le cache<\/dt>\n
Il s’agit de donn\u00e9es \u00ab\u00a0enregistr\u00e9es\u00a0\u00bb dans un \u00e9tat statique sur un syst\u00e8me. Ces donn\u00e9es ne seront pas recalcul\u00e9es lors d’une requ\u00eate (interrogation du serveur). Cela permet un affichage plus rapide des pages, et donc une navigation plus agr\u00e9able.<\/dd>\n<\/dl>\n

Le cache navigateur<\/h2>\n

Le cache du navigateur permet de stocker les fichiers statiques directement sur le poste de l’utilisateur. C’est une technique int\u00e9ressante dans le sens o\u00f9 elle met \u00e0 profit le syst\u00e8me de stockage de l’utilisateur (ainsi si le site est lent \u00e0 s’afficher, ce sera uniquement de la faute de l’utilisateur… :p non je plaisante, bien s\u00fbr).
\nCette technique est int\u00e9ressante car elle diminue le nombre de requ\u00eates<\/strong> effectu\u00e9es par le navigateur au serveur distant (serveur sur lequel est stock\u00e9 le site Web). En effet le navigateur interroge d’abord son cache pour voir s’il n’a pas le fichier en r\u00e9serve avant d’interroger le serveur (dans le cas o\u00f9 le fichier n’est pas en cache).<\/p>\n

Voici le code correspondant \u00e0 entrer dans votre fichier .htaccess :<\/p>\n

## contr\u00f4le du cache navigateur - Expire headers\r\n<IfModule mod_expires.c>\r\n\tExpiresActive On\r\n\tExpiresDefault \"access plus 7200 seconds\"\r\n\tExpiresByType image\/jpg \t\t\t\"access plus 1 week\"\r\n\tExpiresByType image\/jpeg \t\t\t\"access plus 1 week\"\r\n\tExpiresByType image\/png \t\t\t\"access plus 1 week\"\r\n\tExpiresByType image\/gif \t\t\t\"access plus 1 week\"\r\n\tExpiresByType image\/svg+xml\t\t\t\"access plus 1 week\"\r\n\tAddType image\/x-icon .ico\r\n\tExpiresByType image\/ico \t\t\t\"access plus 1 week\"\r\n\tExpiresByType image\/icon \t\t\t\"access plus 1 week\"\r\n\tExpiresByType image\/x-icon \t\t\t\"access plus 1 week\"\r\n\tExpiresByType text\/css \t\t\t\t\"access plus 1 week\"\r\n\tExpiresByType text\/javascript \t\t\"access plus 1 week\"\r\n\tExpiresByType text\/html \t\t\t\"access plus 7200 seconds\"\r\n\tExpiresByType application\/xhtml+xml \t\"access plus 7200 seconds\"\r\n\tExpiresByType application\/javascript \t\"access plus 1 week\"\r\n\tExpiresByType application\/x-javascript \t\"access plus 1 week\"\r\n\tExpiresByType application\/x-shockwave-flash \"access plus 1 week\"\r\n<\/IfModule><\/code><\/pre>\n
Comme vous pouvez le voir, nous pr\u00e9cisons une date d’expiration pour la plupart des types de fichiers utilis\u00e9s pour notre site.
\nL’int\u00e9r\u00eat est d’avoir une mise en cache plut\u00f4t longue, mais qui ne bloque pas non plus la mise \u00e0 jour des fichiers si vous effectuez des changements de temps \u00e0 autres.
\nIl faut trouver le juste milieu en fonction de la fr\u00e9quence de vos mises \u00e0 jour, et l’importance du trafic sur votre site.
\nPour ajouter d’autres type MIME vous pouvez en consulter la liste sur Wikipedia<\/a>.<\/p>\n
Mise en cache, cache-control<\/h2>\n
La cache-control est un compl\u00e9ment \u00e0 l’expire-headers, il permet de g\u00e9rer le comportement du cache en fonction des fichiers et du navigateur utilis\u00e9.
\nToujours sur notre fichier .htaccess :<\/p>\n
<IfModule mod_headers.c>\r\n\r\n<FilesMatch \"\\\\.(ico|jpe?g|png|gif|swf)$\">\r\nHeader set Cache-Control \"max-age=2592000, public\"\r\n<\/FilesMatch>\r\n\r\n<FilesMatch \"\\\\.(css)$\">\r\nHeader set Cache-Control \"max-age=604800, public\"\r\n<\/FilesMatch>\r\n\r\n<FilesMatch \"\\\\.(js)$\">\r\nHeader set Cache-Control \"max-age=216000, private\"\r\n<\/FilesMatch>\r\n\r\n<FilesMatch \"\\\\.(x?html?|php)$\">\r\nHeader set Cache-Control \"max-age=600, private, must-revalidate\"\r\n<\/FilesMatch>\r\n\r\n<\/IfModule><\/code><\/pre>\n
Le caract\u00e8re private<\/em> ou public<\/em> permet de d\u00e9finir si le stockage se fait pour tout le monde (public<\/em>) ou uniquement pour les non proxys (private<\/em>).
\nLes documents HTML et PHP ne sont pas mis longtemps en cache comme vous pouvez le constater, c’est une habitude avec les fichiers dynamiques.
\nDe plus l’argument must-revalidate<\/em> est pr\u00e9cis\u00e9 afin d’avoir un contr\u00f4le plus fin sur la version du fichier mis en cache. (si quelqu’un a de la documentation \u00e0 ce sujet je suis preneur, car c’est le seul r\u00e9sum\u00e9 que je peux offrir \u00e0 l’heure actuelle)<\/p>\n
Les ETags<\/h2>\n
Ces petites b\u00eates permettent de distinguer les versions de chaque document.
\nAinsi le navigateur demande au serveur quelle version il a du document toto.js, le serveur lui r\u00e9pond et une comparaison s’effectue alors.
\nSi les num\u00e9ros de version sont les m\u00eames, alors le navigateur utilise son cache, si les num\u00e9ros sont diff\u00e9rents, le navigateur r\u00e9cup\u00e8re le fichier du serveur (et le met en cache).
\nC’est du moins ce que j’en ai compris.<\/p>\n
Aussi, si vous avez programm\u00e9 votre gestion de cache, ces \u00e9changes entre navigateur et serveur deviennent inutiles, leur suppression peut donc vous permettre de gagner en vitesse lors du chargement de vos pages.<\/p>\n
Header unset ETag\r\nFileETag none<\/code><\/pre>\n
Chez moi \u00e7a ne fonctionne pas, il semblerait qu’OVH ne g\u00e8re pas les ETag, mais j’explore les forums pour trouver une r\u00e9ponse \u00e0 cette question.<\/p>\n
\u00c9viter l’envoi de cookies<\/h2>\n
Chez OVH, et d’autres, les serveurs d\u00e9livrent automatiquement de petits cookies avec des noms bien particuliers d\u00e9pendant souvent de votre offre d’h\u00e9bergement.
\nCes cookies sont bien utiles dans certains cas, mais pas tout le temps.
\nSi votre site ne propose pas un champs de connexion avec une case \u00ab\u00a0se souvenir de moi\u00a0\u00bb, ou un syst\u00e8me complexe de formulaire et de session d’espace membre, peut-\u00eatre que le code suivant vous servira :<\/p>\n
Header unset Set-Cookie<\/code><\/pre>\n
Ceci pour une version \u00ab\u00a0c\u00f4t\u00e9 client\u00a0\u00bb, le suivant pour une action directement sur le serveur qui ne fonctionne pas toujours (d\u00e9pend de son param\u00e9trage)<\/p>\n
RequestHeader unset Cookie<\/code><\/pre>\n
Si quelqu’un a des corrections \u00e0 apporter \u00e0 ce sujet, qu’il n’h\u00e9site pas \u00e0 nous en faire part via un petit commentaire \ud83d\ude42
\nMerci \u00e0 Nico pour son commentaire<\/a>.<\/p>\n
Conclusion<\/h2>\n
\""CommentTout plein de codes pour vous aider \u00e0 optimiser le chargement de vos pages.
\nCes codes sont, bien entendu, \u00e0 adapter en fonction des types de fichiers que vous utilisez, ainsi que de la fr\u00e9quence de vos mises \u00e0 jour et l’importance de votre trafic.
\nN’h\u00e9sitez pas \u00e0 parcourir le Web pour trouver de nombreux conseils d’optimisations, notamment certains adapt\u00e9s \u00e0 un syst\u00e8me donn\u00e9. (WordPress, Joomla!, etc.)<\/p>\n
N’oubliez pas d’utiliser les commentaires sur votre fichier .htaccess pour vous y retrouver et organiser vos diff\u00e9rents codes :<\/p>\n
# Ceci est un commentaire sur une ligne<\/code><\/pre>\n
Si vous avez des pr\u00e9cisions \u00e0 apporter \u00e0 cet article, je suis \u00e0 votre \u00e9coute, l’Apache n’est pas ma sp\u00e9cialit\u00e9 \ud83d\ude09
\nMerci<\/p>\n
\n
Sources et liens utiles<\/h2>\n