Browser Caching and How Reload vs Refreshing Works

I found out an interesting new thing about how browsers cache assets recently. I already knew that if you use Control+F5 in Windows or Command+Shift+r in OS X that it would clear the browser’s cache and reload the page from the server. This is very useful when you are developing and need to force the browser to load a new copy from your development server. Recently, when I was checking that the TrustAuth site had proper caching headers for the static assets I found out about a third way (1. cache clearing reload, 2. normal reload) the browser can reload the page.

It turns out that what I had thought was the same way of loading a page normally actually caused a different type of reloading. If you use Command+r or hit the reload button in Chrome or in Firefox, it tells the browser to perform a Conditional Get request for everything that it has in the cache to verify it is still valid. Because I didn’t realize that, I spent a while trying to figure out why it was sending Conditional Get requests for the assets that had a proper Cache-Control header and should have been loaded directly from the cache.

It was made all the more confusing for me when I was checking it with another website that did browser cache tests. It said all of the tests passed and sometimes I could see in the developer tools that it was loading the assets from the browser’s cache but I couldn’t see the pattern. Now that I know that about Command+r reloading, it makes perfect sense. Every time that it was loading from the cache, I had just clicked one of the links on the page for the next step of the test and instead of a reload.

I think that I should summarize the three types of page reloading / refreshing to clarify what they do.

  1. Command+Shift+r reloading: Reloading this way makes the browser ignore its cache and reload everything on the page. This is a great way to invalidate your browser cache when you are testing or developing.
  2. Command+r and the browser’s reload button: Reloading this way makes the browser fetch the page and revalidate everything it has for the page cached. This is often good enough to fetch updated assets assuming you are using ETags or Last-Modified headers.
  3. Clicking a link for the same page or pressing enter when the browser’s address bar has focus: Reloading this way makes the browser use everything for the page that it has cached. This is not usually what you want when you are developing but it is better for other websites when you just want to refresh the page to see if it has been updated.

In the past I always used Command+r for that purpose but now that I know the difference, I will only use this third method to save myself and the website I am checking from the unnecessary Conditional Get requests.

This entry was posted in Uncategorized. Bookmark the permalink.