Cache busting and asset management

BY:
John Elliott

Setting the scene

As developers we are pulled in lots of conflicting directions; websites and applications have got bigger and more complicated, at the same time we expect these applications to be faster and faster. It is now standard practice to configure servers to instruct browsers to cache ‘static’ resources for very long periods of time and serve libraries such as jQuery from CDNs (Content Delivery Networks) – the rationale behind both of these practices is to try and ensure that these ‘static’ resources only need to be downloaded to the browser the first time a user requests the page.

The problem

Everything is good. The website is running fast and well and all those ‘static’ resources are safely cached away in the user’s browsers, reducing server load and bandwidth. One day the client comes in for a meeting. As a result, you have to update some images and a stylesheet. You dutifully update the stylesheet and the images, upload the updated files to the server and email the client. A short time later the client phones up and says that they can’t see the changes.

What has happened? The problem is that you have already instructed the browser to cache the resources, therefore the browser isn’t downloading the updated files and the browser shows the old files.

‘Just click on settings in your browser and click the clear cache button’. This isn’t really an acceptable solution. Are you going to track down and tell every user of the website to clear their cache?

The solution

The simple solution is that every time you change a static resource (image, stylesheet, javascript file, etc.) you need to rename the file. In essence, this is simple, but on a large project, this can be extremely time-consuming. Automating this process and causing the browser to request new files is known as ‘Cache busting’. 

For quite a while the traditional PHP solution has been using Minify (first released in 2007). In a nutshell, Minify will append a timestamp in a query string to each of your files and can also compress and combine them (fewer downloads is good). Minify is still a great choice, but there are now some powerful alternatives.

Assetic is one alternative – it is a modern PHP asset management system, most commonly encountered in the context of Symphony2, although it is straightforward in any PHP application using composer to manage dependencies.

Assetic works as an asset management system, in a nutshell, this means that it can bundle together and version (rename) files in order to act as a cache buster. In addition, it can manipulate the content it acts upon – for example, it can Minify CSS and javascript or optimise images. Assetic can be set to operate in various ways, but will commonly export assets and save them with a new unique filename. Because they are actual files on disk they can then be served very efficiently by the server.

WHAT NEXT?

If you’d like to keep up-to-date with the latest trends, give AB a follow on Twitter and Instagram or subscribe for our exclusive monthly email highlights.

SUBSCRIBE FOR THE LATEST

Blog email signup

* Required Fields

Our privacy policy explains how we use any personal information we collect from you.

Sending

Author: John Elliott

John has extensive knowledge of working on websites used by wide audiences. His experience means his design/web structures are all web 4.0 ready. John leads our in-house development team, ensuring processes are in place and our technology is robust.

SHARE:

  • Link to AB's Twitter page
  • Link to AB's Linkedin page
  • Email AB