Stop browser to make HTTP requests for images that should stay cached - mod_expires

Question

After reading many articles and some questions on here, I finally succeded in activating the Apache mod_expires to tell the browser it MUST cache images

Answer 1

There's a difference between "reloading" and "refreshing". Just navigating to a page with back and forward buttons usually doesn't initiate new HTTP requests, but specifically hitting F5 to "refresh" the page will cause the browser to double check its cache. This is browser dependent but seems to be the norm for FF and Chrome (i.e. the browsers that have the ability to easily watch their network traffic.) Hitting F6, enter should focus the URL address bar and then "go" to it, which should reload the page but not double check the assets on the page.

Update: clarification of back and forward navigating behavior. It's called "Back Forward Cache" or BFCache in browsers. When you navigate with back/forward buttons the intent is to show you exactly as the page was when you saw it in your own timeline. No server requests are made when using back and forward, even if a server cache header says that a particular item expired.

If you see (200 OK BFCache) in your developer network panel, then the server was never hit - even to ask if-modified-since.

http://www.softwareishard.com/blog/firebug/firebug-tip-what-the-heck-is-bfcache/

Answer 2

You were using the wrong tool for analysing the requests.

I'd recommend the really useful Firefox addon Live HTTP headers so you can see what is really going on on the network.

And just to be sure, you can ssh/putty your server and do something like

tail -f /var/log/apache2/access.log

Answer 3

If it is a matter of life or death (If you want to optimise page loading this way or if you want to reduce the load on the server as much as possible no matter what), then there IS a workaround.

Use HTML5 local storage to cache images after they were requested for the first time.

• [+] You can prevent browser from sending HTTP requests, which in 99% would return 304 (Not Modified), no matter how hard user tries (F5, ctrl+F5, simply revisiting page, etc.)

• [-] You have to put some extra efforts in javascript support for this.

• [-] Images are stored in base64 (we cannot store binary data), thats why they are decoded each time at client side. Which is usually pretty fast and not big deal, but it is still some extra cpu usage at client side and should be kept in mind.

• [-] Local storage is limited. You can aim at using ~5mb of data per domain (Note: base64 adds ~30% to original size of image).

• [?] Supported by majority of browsers. http://caniuse.com/#search=localstorage

Example

Test

Answer 4

This question has a better answer here at webmasters stack-exchange site.

More information, which is also cited in the above link, is on httpwatch

According to the article:

There are a number of situations in which Internet Explorer needs to check whether a cached entry is valid:

• The cached entry has no expiration date and the content is being accessed for the first time in a browser session
• The cached entry has an expiration date but it has expired

• The user has requested a page update by clicking the Refresh button or pressing F5

  enter code here