Cache-Busting

"Cache-busting" is the usage of query strings to have one file produce different outputs, which will be separately cached and considered unique content. This article serves as a guide on how to use cache-busting advantageously.

To start with an example, the PHP image resizing script "TimThumb" has the ability to provide different image sizes from a single origin file, by using different query strings. For another example, lets say there is a CSS file that defines a background image for a certain box in HTML and the same CSS should be utilized for different boxes:

style.css

body
          {
          background-image:url(‘back.png’);
          background-color:#cccccc;
          }

style.css?back=2

body
          {
          background-image:url(‘back-2.png’);
          background-color:#cccccc;
          }

style.css?back=3

body
          {
          background-image:url(‘back-3.png’);
          background-color:#cccccc;
          }

Setting Up the Previous Example

1. Enable the Query String option inside the zone's settings in the Control Panel. This option will force the CDN to honor query strings and treat them as separate items (files).
   
   
2. To cache all three versions of this file, a CDN request must be initiated, so that the request will be passed through to origin end and fetched by the CDN:
   1. http://foo.bar.netdna-cdn.com/style.css
   2. http://foo.bar.netdna-cdn.com/style.css?back=2
   3. http://foo.bar.netdna-cdn.com/style.css?back=3
      Since Query String is enabled, even though there is only one file, the output will be different and CDN will treat these as separate files
3. Origin Swapping
   This feature can be expanded in a way that you can change origin source for each version of cached files from domain.com to different-domain.com:
   
   
   1. Edit the Origin URL.
   2. Purge the file (for example "style.css?back=2").
   3. Request the file (for example "style.css?back=2") from this zone by loading it in a browser or running curl -I http://foo.bar.netdna-cdn.com/style.css?back=2
      
4. At this point, "style.css?back=2" is cached from different-domain.com and style.css, file.css?back=3 is cached from domain.com. Correspondingly, when Query String is disabled, purging any file.css* variants will result in purging the main file.css file as if the Query String was never honored. By using these strings, the ability to edit the main file on the origin server is possible, while not affecting the cached version.

We hope this article was helpful and as always, If there are any questions or concerns about any of the topics mentioned in this article, please feel free to reach out to support - we are available 24/7 by chat or email.