Keep stylesheets and jQuery files fresh without forcing refresh

Ever make changes to a client’s website – whether to the stylesheet or the jQuery powering the site – then send a link and ask them to refresh? It happens a fair amount for clients that love to see fresh changes.

And it happens here in the Focus97 kingdom as well. I make changes to CSS/jQuery, push them live, then hope people who visit the site will have their cache somehow cleared.

No longer!

It’d be nice to have a simple ‘version’ number appended to a stylesheet or javascript file. There are probably a gabillion ways to do this, but here’s a super simple one that’s easier than other methods I’ve looked at (I don’t want to .htaccess it, and the PageSpeed mod caused me trouble in the past!)

Append with the date. Done.

WordPress sites, or any others powered by PHP/MySQL, make this easy. Just like the way Google will append the datestamp to the end of a filename, we can do this easily.

The simple fix:

<link href="/focus97.css?v=<?php echo date('YmdH'); ?>" rel="stylesheet" type="text/css" />

See what follows the “.css”? We’ve simply appended the filename with a query string. It could be:

  • ?v=
  • ?version=

or

  • ?gummybears=

…if we so desired. The PHP above will echo (that is, “write out to the html”) a year, month, day, and hour.

This filename + query string will change each hour. Your Apache server running PHP won’t do anything with the query string, it’s just the browser that thinks it needs to get a new file if the path doesn’t match the filename + query string. Users spend less than an hour per visit on Focus97, which means they generally won’t have to download the CSS for each page visit. You could shorten or lengthen the query string simply by adding more date parameters (like adding seconds, or removing the hour declaration).

Works with jQuery too.

Yeah, that might be obvious, but if you’re tweaking jQuery files and pushing live then it’s a good idea to make sure those are kept fresh too. For Focus97, I keep globally-used plugin files in a “global-scripts.js” file, while all the instantiation + hand-written jQuery goes into a file I keep fresh.

<script src="/Scripts/f97-min.js?v=<?php echo date('YmdH'); ?>"></script>

Simple fixes are the best.

Hopefully this helps your dev as well as your client relations!

4 Comments

  1. Comment by Shua
    on January 25, 2012

    A super cool way to do this is to grab the checksum of the file – so that every time it is saved, the version number is updated.

  2. Comment by Mike Lee
    on January 25, 2012

    Interesting. From what I’ve seen, it involves more querying of the database than a simple PHP echoing of the time. Seems it may also involve running functions and conditionals to work.

    While the example above requires that if they’ve been on the site, or away, for longer than an hour that they get the latest CSS/jQuery (only a few dozen KB, so not bad anyway), it’s a fast approach that doesn’t involve a lot of parsing by the server, and doesn’t require querying the database (just pinging the server for the time).

    How would you propose the checksum solution?

  3. Comment by Shua
    on January 26, 2012
    <script src="/Scripts/f97-min.js?v=<?php $file='f97-min.js'; echo md5_file($file);”>
  4. Comment by Mike Lee
    on January 26, 2012

    Got it. Works nicely indeed to append a string for the version (tried it on an image, and got:

    <img src="/siteimages/f97-announce-logo.jpg?v=b84a41dc58b41de8dc1a56542fdd2ceb" />

    While this works, it’s a bit more code (first defining a variable, then querying the file), and arguably a tiny, tiny amount more work on the part of both the user and the server. Still, I like this because it means the file doesn’t have to be downloaded anew each hour unless necessary. ’tis a great suggestion, for sure.

  5. Leave a Reply

    To include code, just include it in [code] [/code] square brackets. Sweet.