Blog

Caching assets in CleanSlate

In February, we deployed some changes in the way CleanSlate caches assets—things like CSS, javascripts, and images. Before February, assets were set with a 15 minute expires header. If a user visited a page on your site, the stylesheets, javascripts, and images were cached for fifteen minutes.

We're now caching those assets for an entire year.

What this means for you:

  • If you link to an asset in your theme via HTML instead of Radius tags, you must update the asset's name when you change that asset. If you don't you won't see your change when reloading.
  • If you're using Radius tags your changes will become instantly viewable when using "Sync Theme." No more waiting.
  • These changes should speed up your theme's page load times.

What's happening under the hood?

CleanSlate now sets an expires header for 1 year. This means, if a user goes to your site and downloads logo.svg, the image gets put in your browser's cache and will not be downloaded again for an entire year. You ask, "But Adam, I want to update logo.svg next week when our name changes! AND I want our users to see those changes!"

Never fear. Under the hood, CleanSlate rewrites urls to images, javascripts, and CSS. If you're calling an asset via r:include_stylesheet, r:include_javascript, or in your CSS as a background-image, you'll notice a timestamp is automatically added to the asset's path.

So, we've gone from this:

<!-- A stylesheet included in your template like so: -->
<r:include_stylesheet name="styles" />

<!-- Output: -->
<link rel="stylesheet" href="/stylesheets/styles.css" type="text/css">

To this:

<!-- Again, including it like so: -->
<r:include_stylesheet name="styles" />

<!-- New, awesome output: -->
<link rel="stylesheet" href="/stylesheets/1426693708/styles.css" type="text/css">

tl;dr

If you use the appropriate Radius tags to link to your assets, CleanSlate will automatically bust the cache each time you hit "Sync Theme". No further action is required on your part.

If you're manually linking to an asset, you should include your site's timestamp in your asset's path. When you change the asset, update the timestamp.

FAQ's

What about things in the /public directory?

CleanSlate will rewrite URL's referenced in the /public directory when CSS references them. Eg:

url('../public/fonts-icomoon-free/fonts/icomoon.woff?ameoy1') format('woff')

Rewrites to:

url('../public/1422981447/fonts-icomoon-free/fonts/icomoon.woff?ameoy1') format('woff')

If you have any questions, hit us up! We hope you enjoy these changes.