Cache Busting
Cache busting is a critical technique for web developers, designed to ensure that users always receive the most up-to-date version of CSS and JavaScript files.
When browsers cache static assets like stylesheets and scripts, they can sometimes serve outdated versions of these files, potentially preventing users from seeing recent design changes or experiencing the latest functionality. By appending a unique query parameter to file URLs—in our case, a version number—developers can force browsers to retrieve a fresh copy of the file, effectively "breaking" the browser's existing cache and guaranteeing that users always load the most recent version of your site's critical resources.
Instead of the header of your HTML including a CSS file like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css">we want to utilise cache busting by appending the stylesheet’s version at the end of the href attribute like so:
<link rel="stylesheet" type="text/css" href="stylesheet.css?v=123">
This approach becomes especially important in times where frequent design changes are being made or new functionality is being tested with users.
Applying to CSS Media Layouts
We’ll first convert our existing Media Layout to handlebars and then apply cache busting in a second step.
Convert existing layout to Handlebars
To apply this to your existing Media CSS Media layout you can navigate to Assets > Content Types and select the Media Content type. Next, click the “Content layouts” tab and filter for css/*
You can edit this layout and change the Content Layout Processor to "Handlebars Content".
Next go to the Content layout code tab and change the layout from T4 Tags to Handlebars.
The T4 Tag layout should look something like:
<link rel="stylesheet" type="text/css" media="<t4 type="content" name="Description" output="normal" modifiers="" />" href="<t4 type="content" name="Media" output="file" />" />The Handlebars equivalent of this code is:
We now have a Handlebars layout that outputs our CSS as before.
Appending the version to the HREF attribute
When appending the version we have to be mindful of how the URL is output in Preview Mode within Terminalfour.
When in preview mode the link used for Media is output by referencing an ID in a url parameter. Ultimately this means we need to append our version differently if we’re in Preview mode or on a published page.
In preview our URL needs to be appended with &v=123 and in the published page our URL needs to be appended with ?v=123 (where 123 is the content version).
This can be done like so:
Applying to JavaScript Media Layouts
The process for applying cache busting to JavaScript Media layouts is very similar to the steps above. This time, we want to edit the text/javascript layout.
Remember to change the Content layout processor to Handlebars and then change the T4 tag code from:
<script type="text/javascript" src="<t4 type="content" output="file" name="Media" />"></script>to
Back to top