Développement, annonces, mises à jour, insolite : le Blog.

Accueil / Blog / Développement / En-têtes Expires et Cache-Control

sam.		En-têtes Expires et Cache-Control  Catégorie : Développement.  Tags : Performances, Web.
17	/01
	09

"Précédemment dans la série des performances sur le Web" : je vous avais expliqué quels sont les bénéfices et les pendants à utiliser un CDN. En conclusion, le comportement à adopter face à cette règle d’optimisation - si vous n’êtes pas fortunés - était selon moi l’ignorance du moins pour l’instant afin de se concentrer d’avantage sur les règles suivantes comme la très importante règle numéro 3 : ajouter des en-têtes Expires et Cache-Control.

Comme promis, nous allons reparler ici du cache client. Sans entrer dans les détails, ajouter des en-têtes HTTP Expires et Cache-Control sur vos fichiers permet de contrôler ce cache. Le principe est simple, lors de sa première visite sur votre site, un visiteur lambda fera un certain nombre de requêtes HTTP à votre serveur (nombre que vous avez réduit grâce à ce billet) ; lorsque votre serveur enverra sa réponse pour chaque composant, il enverra aussi les fameuses en-têtes/directives qui donneront l’ordre au navigateur du visiteur de stocker les composants en question dans son répertoire dédié au cache. Autrement dit, vos composants seront ensuite copiés quelque-part sur les ordinateurs de vos visiteurs.

L’intérêt de cette méthode ne réside donc pas dans la première visite (cache vide) mais dans les suivantes (cache plein). Les composants ayant déjà été téléchargés et stockés, le navigateur ne renverra alors plus de requêtes HTTP, on élimine ainsi les temps de réponse et de trafic sur le réseau pour chacun d’eux ce qui est un gain conséquent ! De même, en plus d’un temps de chargement des pages diminué pour vos visiteurs (ce qui améliore leur expérience de navigation sur votre site), comme les composants ne sont pas téléchargés inutilement à chaque fois, vous faites des économies toutes aussi conséquentes sur votre bande passante. C’est à peu près tout pour le côté théorique, passons au côté pratique.

Il faut toujours séparer votre contenu en deux types : celui dynamique (qui est modifié souvent comme vos pages html sur lesquelles les visiteurs peuvent ajouter des commentaires ou votre page d’accueil par exemple) et celui statique (qui est très rarement modifié comme les images composant votre Web design, vos CSS, vos fichiers JavaScript et vos animations Flash, voire certaines pages par exemple). Cette distinction est très importante car les en-têtes Expires et Cache-Control servent à stocker vos composants dans le cache client, oui mais en précisant quand même une date de "péremption". Concrètement, on choisira de faire stocker (bien) plus longtemps les fichiers dits statiques que ceux dits dynamiques. On parle de faire expirer ces fichiers statiques à une date éloignée dans le futur, soit une ou plusieurs années ; vous imaginez avoir réglé vos fichiers dynamiques sur la même date d’expiration, admettons que les commentaires ajoutés aujourd’hui sur vos pages n’apparaissent à vos anciens visiteurs que dans deux ans. C’est un schéma absolument non-envisageable. Pour les fichiers dynamiques, on choisira une date d’expiration quelques dizaines de secondes (quelques minutes tout au plus) dans le futur après un premier accès ; même l’AJAX peut être mis en cache, c’est toujours ça de gagné.

A noter - et c’est très important - qu’une fois vos fichiers statiques mis en cache pour plusieurs années, les modifier et les ré-uploader sur votre serveur ne sera pas suffisant pour que vos visiteurs au cache plein voient les changements avant leur expiration (sauf après avoir vidé le cache manuellement) ; vous devez alors renommer tous vos fichiers statiques après chaque modification pour que les changements soient effectifs à tout un chacun. Personnellement, j’ajoute la date à laquelle j’ai modifié mes fichiers dans leurs noms comme ceci : maSuperCSS_150109.css, monSuperLogo_150109.png, etc. (il est aussi possible de passer la date en paramètre via l’url comme ceci : maSuperCSS.css ?date=150109).

Comment règle-t’on les en-têtes Expires et Cache-Control ? Ceci est très simple, c’est l’histoire de quelques lignes dans le fichier de configuration d’Apache (je ne parlerai ici que d’Apache étant le seul que je connais, désolé) si vous y avez accès, sinon vous pouvez les ajouter à un fichier htaccess à la racine de votre serveur. On pourrait tout à fait envoyer une directive pour Expires et une autre pour Cache-Control séparément (ce qui signifie un peu plus de lignes à coder) mais Apache 2.0+ nous propose un module qui se charge d’envoyer les deux tout en n’écrivant qu’une seule ligne par type de fichier (mime-type), pourquoi se priver ? Avant de vous donner un exemple de code, il est important de souligner que Cache-Control et Expires reviennent au même seulement Cache-Control est une version plus évoluée d’Expires apparue avec le protocole HTTP 1.1 pour répondre à des besoins plus spécifiques en proposant des paramètres optionnels poussés (Cache-Control prend alors le pas sur Expires si disponible) ; je ne rentrerai pas dans les détails sur ce billet mais en attendant, ceux que ça intéresse peuvent d’ores et déjà consulter cette page ou encore celle-ci qui traite de la mise en cache de contenu lié aux zones personnelles nécessitant une identification login/pass sur des réseaux partagés ...

Voici un exemple non exhaustif des directives les plus courantes que vous pouvez faire avec le fameux module mod_expires d’Apache : ExpiresActive On
ExpiresDefault "access plus 2 minutes"
ExpiresByType text/html "access plus 2 minutes"
ExpiresByType text/xml "access plus 2 minutes"
ExpiresByType application/xhtml+xml "access plus 2 minutes"
ExpiresByType application/x-shockwave-flash "access plus 1 day"
ExpiresByType text/plain "modification plus 1 day"
ExpiresByType image/vnd.microsoft.icon "modification plus 5 years"
ExpiresByType image/jpeg "modification plus 5 years"
ExpiresByType image/png "modification plus 5 years"
ExpiresByType image/gif "modification plus 5 years"
ExpiresByType application/javascript "modification plus 5 years"
ExpiresByType text/css "modification plus 5 years" On définit donc une ligne correspondant à la directive à adopter par défaut et/ou une ligne par type de fichier (dans l’ordre : html, xml, xhtml, swf, txt, ico, jpg, png, gif, js, css). Je vous l’avais dit, c’est très simple et c’est aussi très puissant permettant un réglage fin (années, mois, semaines, jours, heures, minutes, secondes) pour chaque type de composant. La date d’expiration peut aussi être absolue (modification plus ...) ou relative à la date à laquelle vos visiteurs viendront la première fois sur votre site.

Une dernière chose, j’avais parlé d’un intérêt de coupler les sprites à cette méthode de contrôle du cache client. En effet, si un visiteur arrive sur une page où il chargera une grosse image contenant des zones non utilisées (j’entends par là non affichées), cette image sera donc maintenant stockée dans son cache client, par conséquent si il parcours votre site c’est cette image stockée qui sera utilisée et uniquement pour toutes les autres pages (là ou seront affichées les zones précédemment non affichées). Autrement dit, on fait un pré-chargement valable pour tout le reste du site. Google notamment utilise cette technique.

Des questions ?

0 commentaire.

Billet lu 0 fois.   Écrit par : Sebastien P.

< Billet précédent | Haut de la page | Billet suivant >

Le module de commentaires est temporairement désactivé.
Merci de votre compréhension.