Prevent caching of modified Javascript & CSS assets

There’s a very useful PHP function called filemtime, that returns the timestamp of the modification time of the file. This is similar to how the HTTP 1.1 ETag header is generated. The strategy is basically to append the modification date to the script or CSS URI in order to refresh the user’s cache when you’ve modified them.

This is an extract from Devthought header.php Wordpress template file:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() . '/style.css?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" title="Stylesheet" charset="utf-8" />
 
<script type="text/javascript" charset="utf-8" src="<?php echo get_template_directory_uri() . '/js/scripts.js?' . filemtime(get_template_directory() . '/js/scripts.js'); ?>" ></script>

All you have to do is change the routes to match your files. If you’re not using wordpress, you’ll have to remove the get_stylesheet_directory* and get_template_directory* function calls and replace with your paths.

  1. Claude about 1 year ago
    Reply

    Why would you want to prevent caching of your JS ans CSS files?

    Is this post more about busting the cache of an old version of the file when a new is available?

    • Guillermo Rauch about 1 year ago

      Of modified CSS & JS files :D
      It’s more ‘refresh users’ cache without waiting for the user agent to perform ETag comparison’, but it’s not a good title.