Website with optimal cache control

Question

My goal
I would like to let browsers cache my whole website, but only download the static content when I have changed one or more files.

My situation
After some research I have found a way to do this. That is to add a Far Future Expires Header to my htaccess file and add a querystring to my files using the filemtime() function.

The problem
When I click on the address bar and type in my website address in firefox, then Firebug displays
38.3 KB (36.4 KB from cache)

When I press F5 in firefox, then Firebug displays:
241.1 KB (10.9 KB from cache)

Now I have tried to do the same with Google and they are sending HTTP header 304 back. I have read a lot about ETag and the Last Modified header, but I have heard a lot of people saying that they are not really reliable.

My question
What would be the best solution if I would like to send HTTP header 304 back with my static content if the user presses on F5, like Google?

I am asking this question because I am often visiting a website and using F5 to see if there is some new information available. Not to reload the images etcetera.


Update
It seems that Firefox is controlling the way the cache is used and I would like to use the cache also when a user presses F5.

Answer 1

The very purpose of reload is to reload the page. There is no server-side header magic if the browser was witten to ignore caches when the user specifically asks for it.

The solution for Google is that you check if the crawler sent an If-Modified-Since header with:

if ($_SERVER["HTTP_IF_MODIFIED_SINCE"]) {
    header("HTTP/1.0 304 Not Modified");
    exit();
}

This trick could work for browsers, but not in forced reload modes, like Firefox's SHIFT+RELOAD.

Answer 2

You can also use the newer application cache feature.
I don't know what your target browser is, but most browsers have been supporting it for quite a few versions so far..
This way you can define your statics to be downloaded only once.

For some very good information on the subject you can take a look at this page:
http://diveintohtml5.ep.io/offline.html