DEV Community

Cover image for A Simple Way to Update CSS, JS & Image Browser Cache
Kevinleary.net
Kevinleary.net

Posted on Originally published at kevinleary.net

A Simple Way to Update CSS, JS & Image Browser Cache

#development

Clear The Google Chrome Browser CacheBrowser cache can speed up a website tremendously, but it can also cause web development headaches in the process. Have you ever uploaded a modified image, stylesheet or JavaScript file only to find that an out of date version is loading for the majority of your users?

This can quickly snowball into a usability nightmare. Fortunately there is a simple way to solve the issue using this PHP auto versioning function. This is a modified version of a concept posted by Kip on StackOverflow).

Add This to Your .htaccess File 

# JS/CSS auto-versioning rewrites
RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]
Enter fullscreen mode Exit fullscreen mode

After that you’ll need to add the following PHP function to a global include file in your website or application. If you’re using WordPress this could be the functions.php file in your theme. If you’re using another system be sure this loads in a file you include on every page of your website at a point before you use the function.

The Auto Versioning PHP Function 

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute or URI path (i.e.
 *                starting with slash).
 */
function base_auto_version( $file ) {
    $current_url = ( isset($_SERVER['HTTPS']) && !empty( $_SERVER['HTTPS']) ) ? 'https://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] : 'https://' . $_SERVER['SERVER_NAME'] . str_replace( '/', '', $_SERVER['REQUEST_URI'] );

    $local_file = ( strpos($file, 'http') == 0 ) ? str_replace( $current_url, '', $file ) : $file;

    if( strpos($local_file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $local_file) )
        return $local_file;

    $mtime = filemtime( $_SERVER['DOCUMENT_ROOT'] . $local_file );

    return preg_replace( '{\\.([^./]+)$}', ".$mtime.\$1", $local_file );
}
Enter fullscreen mode Exit fullscreen mode

This function will accept absolute or full URI links to your files. For example, https://www.yourdomain.com/css/style.css and /css/style.css will both work with this function.

Autoversion Your CSS, JS & Image Files

In your website or application replace the src and href attributes of the </strong> &amp; <strong><link></strong> tags you want to auto-version. For example:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>&lt;link rel="stylesheet" href="&lt;?php echo base_auto_version('/css/style.css'); ?&gt;" type="text/css" media="screen" /&gt; </code></pre></div> <p></p> <p>When you make changes to a file the auto version function will automatically rename your file to something like:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>&lt;link rel="stylesheet" href="https://www.kevinleary.net/css/style.1318356510.css" type="text/css" media="screen" /&gt; </code></pre></div> <p></p> <p>This ensures that all visitors, regardless of the browser they are using, will load the latest version of your CSS, JS &amp; images. Hopefully this helps you and your website visitors avoid frustration after your next design update is rolled out.</p>

Top comments (0)