How much time would be good to set in expire header for a website?

Question

"Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash."

As written in Yslow.

my question is how much time would be good to set in expire header for a website which has multiple stylesheets, Flash headers, Javascripts, images, PDF, MS Excel files, PPT etc.?

If I want to set same expire time on all things.

Subscribe

Answer 1

If your page resources (images/css/js) typically don't change and are static you can set the expires header to something far out like 1 year.

For the pages themselves it really depends on the content. If you content changes very frequently you should make sure your expires header are not set that large otherwise your visitors will receive stale content.

If you think about a site like SO itself, the content changes so frequently that the expires header on the page is very small. From the headers, looks like they use a 60 second max age and have a expires header 1 minute out from the current.

Squama

so if i set 1 year for any page and i update that page after 6 month , then user will not be able to see those changes. even if they use Ctrl+F5 to hard refresh the page. Am i right? – Subscribe

Right, if the page is still valid and users have not cleared their browser cache, then the browser will used the cached content until it meets the page header caching requirements. – Squama

I'm making a site for client and i'm not sure when he will change anything to site. so should i not set Expire header in this condition – Subscribe

You can set it to some reasonable value. Keep in mind the caching headers only effect returning visitors. If the content on the site is not going to change very often you can even set for 1 day so returning visitors get a fast browsing experience. – Squama

If previous user return on same day and Site owner has changed something on site after his last visit. then can user see latest content using Ctrl+F5? – Subscribe

@metal-gear-solid: See my answer. If you add a version number to the URL, either as the filename or as a query string, then incrementing that number will prevent stale files from being served from cache. – Falconer

@Josh: +1 - I've done this in the past too for page resources like CSS and JS, but seems he's really talking about the ASPX pages themselves. – Squama

@metal-gear-solid: You may also want to look into ASP.NET output caching. You can then optionally setup some cache dependencies with your DB so you are not serving stale content. – Squama

@Wallace: Yes, you're right. As you said, the actual HTML content of the pages shouldn't be cached very long, otherwise it will go stale. – Falconer

Currently my site's Expire time is -1 How much it is? – Subscribe

Is it good to set Expire header to site's images ( both content and CSS background). IF i set expire header for images will it work for both images ( both content and CSS background) – Subscribe

@metal-gear-solid: -1 basically means there is no caching. Typically the cache headers for images/css/js is handled at the server level in IIS. If you have those resources in seperate folders you can change the settings in IIS for each folder. This will apply those settings to all resources within that folder. – Squama

Answer 2

What I do is set the expiry time of CSS and JavaScript files to a high value, like 1 or 5 years. When I change the stylesheets or JS files, I change the version number in their URLs, to prevent stale files from being served from cache.

Looks like this is what SO does, too:

<link rel="stylesheet" href="http://sstatic.net/stackoverflow/all.css?v=e27c9b7474df">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://sstatic.net/js/question.js?v=b05e8725a843" type="text/javascript"></script>

So when they change the stylesheet, they change all.css?v=e27c9b7474df to all.css?v=some new version. The question.js javascript file follows the same convention. But filenames would work too, you could call your CSS/JS files all-1.css, then change it to all-2.css, etc. The actual format of the version number is up to you as long as the URL changes.

Falconer