New assetQueryString Setting in CFWheels 1.1

September 30, 2010 · Chris Peters

The upcoming CFWheels 1.1 offers a new setting called assetQueryString that can help you more easily manage caching on the client side for assets like images, stylesheets, and JavaScript includes.

The upcoming CFWheels 1.1 (now in beta) offers a new setting called assetQueryString that can help you more easily manage caching on the client side for assets like images, stylesheets, and JavaScript includes.

Performance tuning 101: the more HTTP calls that you force your web server to handle, the more stress you’re going to place on the performance of your server. And it’s not negligible stress either.

The new assetQueryString setting helps you by placing a query string at the end of all URLs that CFWheels generates for images, stylesheets, and JS includes. With that string appended, you can now enable caching for stylesheets, JavaScript files, and images on your web server. Most browsers will obey these new instructions and only load these files once on their first encounter with them.

Enabling assetQueryString

The only thing that you need to do to activate assetQueryString is place this call in config/settings.cfm:

<cfset set(assetQueryString=true)>
view raw settings.cfm hosted with ❤ by GitHub

When you enable this setting, a unique query string will be appended to the end of asset URLs generated by CFWheels view helpers like imageTag(), styleSheetLinkTag(), and javaScriptIncludeTag().

Here is an example of what the generated HTML would look like for a call to styleSheetLinkTag("style"):

<link href="/stylesheets/styles.css?40FDC6D8A9D79E2FF8DB5207A8B03241" media="all" rel="stylesheet" type="text/css" />
view raw layout.html hosted with ❤ by GitHub

“Resetting the cache” when you make changes to your assets

What if you make a change to an image, stylesheet, or JavaScript file? If you were manually managing these query strings (like I have done in the past), you’d need to go and manually change them to force clients to load the new version. But with assetQueryString enabled, you just need to issue an application reload to reset the asset query string (which is shared by all assets). Clients will then recognize a new version of the URLs and download new copies of the assets.

This is a pretty sweet little shortcut that not only allows you to enhance application performance but to also systematically force clients to reload changes. At a minimum, it saves time and frustration with JavaScript include caching, which can be a major pain to manage (aka asking customers to “clear your cache” or manually changing query strings in the layout). At its best, you can add some extra pep to page load times and lift some major load off of your web server.

About Chris Peters

With over 20 years of experience, I help plan, execute, and optimize digital experiences.

Leave a comment