Contenu principal

SF Cache Busting

Cette extension permet la mise en place d’un cache busting des fichiers .css et .js, basé sur le nom du fichier au lieu d’un paramètre GET.

Qu’est-ce que le cache busting ?

Si votre serveur est correctement configuré, il permet la mise en cache des ressources statiques par le navigateur (images, feuilles de style, etc.). Cela permet au navigateur internet d’afficher la page plus vite car il n’a pas besoin de télécharger à nouveau ces fichiers qu’il a déjà croisé, il va les récupérer dans son cache. Mais alors que se passe t-il si une feuille de style ou un fichier JavaScript est mis à jour (mise à jour du thème, d’une extension) ? Le navigateur va continuer d’aller chercher ce fichier dans son cache jusqu’à expiration du cache.

C’est là qu’intervient le cache busting : en changeant l’url des fichiers on force le navigateur à télécharger la nouvelle version. WordPress fait déjà ceci de base en ajoutant la version (de l’extension, du thème, ou de WordPress) en paramètre à la fin de l’url du fichier. Ainsi, http://example.com/style.css devient http://example.com/style.css?ver=4.1.

Un meilleur cache busting

Le seul problème à ce système est que la plupart des proxies ne mettent pas en cache les ressources ayant des paramètres dans leur url. C’est là qu’intervient cette extension, en mettant la version dans le nom du fichier plutôt qu’en paramètre. Ainsi, http://example.com/style.css?ver=4.1 devient http://example.com/style.401.css.

Avant d’installer l’extension

Il faudra modifier votre fichier .htaccess avant d’activer l’extension. En effet, le système est basé sur la réécriture d’url, et l’extension n’ira pas modifier ce fichier d’elle-même.
Il est donc nécessaire d’ajouter ceci dans le fichier .htaccess de votre site, AVANT les règles de réécriture de WordPress :

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.(\d+)\.(css|js)$ $1.$3 [L]
</IfModule>

Ou pour les serveurs nginx (merci Willy Bahuaud) :

if (!-e $request_filename) {
    rewrite ^/(.+)\.(\d+)\.(css|js)$ /$1.$3 break;
}

Bien sûr il faut que les entêtes Expires HTTP soient présentes dans votre fichier .htaccess, sinon le cache navigateur ne marchera pas et l’extension ne servira à rien.
Un exemple :

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css                "access plus 1 year"
    ExpiresByType application/javascript  "access plus 1 year"
</IfModule>

Quelques points importants

  • L’extension ne gère pas des ressources externes (les polices venant de Google par exemple), car le cache busting doit être activé sur le serveur distant, et il n’est pas possible de deviner si c’est bien le cas.
  • L’extension ne gère que les fichiers situés dans le thème courant (et son parent si c’est un thème enfant), le dossier des extensions, le dossier des extensions Must-Use, et le dossier wp-includes de WordPress. Un filtre est disponible dans l’extension pour ajouter d’autres sources (voir plus bas).
  • Si vous avez installé une extension de cache et activé la concaténation des scripts, alors SF Cache Busting ne vous servira probablement à rien. Les fichiers générés possèderont probablement leur propre cache busting.
  • Seuls les styles et scripts ajoutés via wp_enqueue_style() et wp_enqueue_script() sont gérés.

Exemple d’ajout de source

(pour permettre le cache busting des ressources venant d’autres adresses)

123456

add_filter( 'sfbc_default_scripts_directories', 'cache_bust_subdomain' );

function cache_bust_subdomain( $urls ) {
	$urls[] = 'http://static.example.com';
	return $urls;
}

Nota : les urls peuvent commencer par http://, https:// ou //.

Ressources

Revving Filenames: don’t use querystring
Exploiter la mise en cache dans le navigateur
Fichier .htaccess de HTML5 Boilerplate