Avoid those nagging 304's on custom themes!

Problem:
In my effort to make one of our customer's intranet speedy, we started analyzing what took time loading the pages.

We soon discovered the wonders of the blobcache, and its many advantages. Using Fiddler, we saw our elements "disappear" (going from 40+ requests to only 10-15 requests), but some elements were stuck behind.

The blobcache caches all the types of elements you specify in the configuration file. By default this is jpg and gif files, among others. So, when hitting the pages, the theme images are also being cached. But since they reside in a special folder (a so-called Web folder) named _themes, these images get checked on each request. This check is what's causing the 304 messages, also known as hand-shaking. This is not needed, so we want these requests to go away.

BTW, using the default theme (the famous and SEXY blue one), this is not an issue. But once you select another one of the themes that comes with either WSS or MOSS, or you develop your own theme to be used, this will be the case.

Workaround:
Luckily there is way to fix this, and I will demonstrate it using av copy of the theme named Belltown that ships with SharePoint.

When a web application in SharePoint is created, it also creates a number of virtual folders. Among these are the _layouts and the images folders. Viewing these through IIS, you will discover that these are set to be cached for 365 days by default (see screen shot below). We are now going to exploit this by moving our images being used by our custom theme into a subfolder under the images folder.

First, make a copy of the folder for the Belltown theme in the 12\TEMPLATE\THEMES folder. Rename the copied folder to something like CacheTest (I will continue using this name throughout this article). This new folder should now be like 12\TEMPLATE\THEMES\CacheTest.

Also rename the inf file inside this new folder from Belltown.inf to CacheTest.inf. Then open this file, and replace the text "Belltown" with "CacheTest".

Next, go into the folder 12\TEMPLATE\Images, and create a new folder named THEMES, and inside that folder create a new folder named CacheTest.

Now, go back to the new CacheTest folder under 12\TEMPLATE\THEMES, and move all the images (jpg, gif, etc.) from that folder and into the folder 12\TEMPLATE\Images\THEMES\CacheTest.

Then open the css files in the CacheTest theme folder and search and replace the following:


url(" with url("/_layouts/images/themes/cachetest/

and

url(' with url('/_layouts/images/themes/cachetest/


Now you should be all set for testing the new theme. But before you do so, either recycle the application pool of your web application, or run an IISRESET.

Finally, go into a site's Site Settings, and change the theme to CacheTest. Now go back to the front page of the site and use Fiddler to see the results. Number of requests should now be greatly reduced. On my installation, I ended up with only 5 requests. Voila!

Thanks to Shane M for input on how to accomplish this.

For more information on how to create a custom theme, visit this MSDN article. Also, Heather Solomon has some great articles on how to achieve this.