Question about using subdomains to force caching

Question

Hi, I haven't had a huge opportunity to research the subject but I figure I'll just ask the question and see if we can create a knowledge base on the subject here.

1) Using subdomains will force a client side cache, is this by default or is there an easy way for a client to disable it? More curious about what kind of a percentage of users I should be expecting to affect.

2) What all will be cached? Images? Stylesheets? Flash SWFs? Javascripts? Everything?

3) I remember reading that you must use a subdomain or www in your URL for this to work, is this correct? (and does this mean SO won't allow it?)

I plan on integrating this onto all of my websites eventually but first I am going to try to do it for a network of flash game websites so I am thinking www.example.com for the website will remain the same but instead of using www.example.com/images, www.example.com/stylesheets, www.example.com/javascript, & www.example.com/swfs I will just create subdomains that point to them (img.example.com, css.example.com, js.example.com & swf.example.com respectively) -- is this the best course of action?

Answer 1

Using subdomains for content elements isn't so much to force caching, but to trick a browser into opening more connections than it might otherwise do. This can speed up page load time.

Caching of those elements is entirely down the HTTP headers delivered with that content.

For static files like CSS, JS etc, a server will typically tell the client when the file was modified, which allows a browser to ask for the file "If-Modified-Since" that timestamp. Specifics of how to improve on this by adding some extra caching headers would depend on which webserver you use. For example, with Apache you can use the mod_expires module to set the Expires header, or the Header directive to output other types of cache control headers.

As an example, if you had a subdirectory with your css files in, and wanted to ensure they were cached for at least an hour, you could place a .htaccess in that directory with these contents

ExpiresActive On
ExpiresDefault "access plus 1 hours"

Answer 2

Check out YSlow's documentation. YSlow is a plugin for Firebug, the amazing Firefox web development plugin. There is lots of good info on a number of ways to speed up your page loads, one of which is using one or more subdomains to encourage the browser to do more parallel object loads.

One thing I've done on two Django sites is to use a custom template tag to create pseudo-paths to images, css, etc. The path contains the time-last-modified as a pseudo directory. This path component is stripped out by an Apache .htaccess mod_rewrite rule. The object is then given a 10 year time-to-live (ExpiresDefault "now plus 10 years") so the browser will only load it once. If the object changes, the pseudo path changes and the browser will fetch the updated object.

Answer 3

Hello,

I have a similar problem. I have a domain : www.toto.com and a subdomain sub.toto.com

I already had the following code in the htaccess at the root. And image caching works well.

ExpiresActive On ExpiresDefault
"access plus 1 hours"

the subdomain sub.toto.com is located in www.toto.com/sub but this subdomain image caching doesn't work on ie6, ie7 or ie8 (stangely, it works with Firefox)

The I add the same htaccess file in www.toto.com/sub but it stills doesn't work.

Do you have any solution ?

Thanks in advance for your help.