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.

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.

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"&gt;

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

<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.