Le Cache Busting

Voir la vidéo
Junior
Télécharger la vidéo

Afin d'améliorer les performances de chargement de son site il est conseillé d'activer la mise en cache des assets (css, js, images) gràce à l'utilisation du Expires. Cette en-tête permet d'indiquer au navigateur qu'il peut mettre les ressources en cache pour un durée prédéterminée.

Il est possible de renvoyer cette en-tête via un htaccess pour apache

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg             "access plus 1 week"
    ExpiresByType image/jpeg            "access plus 1 week"
    ExpiresByType image/png             "access plus 1 week"
    ExpiresByType image/gif             "access plus 1 week"
    ExpiresByType image/svg+xml         "access plus 1 week"
    ExpiresByType image/ico             "access plus 1 week"
    ExpiresByType image/icon            "access plus 1 week"
    ExpiresByType text/css              "access plus 1 week"
    ExpiresByType text/javascript       "access plus 1 week"
</IfModule>

ou via la configuration nginx

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
   expires 365d;
   add_header Cache-Control public;
}

Le problème est alors que le navigateur ne redemandera jamais la ressources avant la date d'expiration. Aussi, si vous faites une modification de votre CSS, certains de vos utilisateurs ne verront pas les modifications. La solution pour remédier à ce problème est de créer un nouveau fichier (avec un nouveau nom) pour chaque modification. Cette méthode s'appelle le Cache Busting.

<!-- en utilisant les query string -->
<link rel="stylesheet" href="style.css?v=3.4.1">

<!-- en renommant carrément le fichier -->
<link rel="stylesheet" href="style-12331249.css">

Certains proxy ne supportent pas bien l'utilisation des query string et on préfèrera utiliser la méthode consistant à renommer les fichiers.

Cache busting en PHP

Si vous n'utilisez pas d'outils de build capable d'automatiquement renommer vos assets à chaque changement, vous pouvez utiliser la date de dernière modification du fichier en PHP.

function version($path)
{
    if (file_exists($file = $_SERVER['DOCUMENT_ROOT'] . $path))
    {
        $mtime = filemtime($file);
        $path_info = pathinfo($file); 

        return $path_info['dirname'] . '/' . $path_info['filename'] . '-' . hash('md5', $mtime) . '.' . $path_info['extension'];
    }

    return $path;
}

Cette méthode permet de rajouter un hash à la fin du nom du fichier. En revnache le fichier lui est toujours accessible avec l'url sans suffix. On peut alors utiliser la réécriture d'URL pour rediriger vers la ressource. Par exemple sur apache

RewriteEngine On
RewriteBase /
RewriteRule ^js/(.*)-([a-f0-9]+).js/?$ js/$1.js [L]
Publié
Technologies utilisées
HTTP
Auteur :
Louistiti
Partager