MAT MARTIN | Achieving a Clear Browser Cache: See What’s Really There

14 October, 2016, 10:00

Blog · Resources · Site Maintenance

Achieving a Clear Browser Cache: See What's Really There
Achieving a Clear Browser Cache: See What's Really There

A Clear Browser Cache

A clear browser cache is a beautiful thing – it’s like the mind of a meditation guru. It allows us to see what is really on the page we are viewing, and means our experience isn’t clouded by fragments of past experiences.

I admit I’ve made it sound very good here. The caching features on our browsers are there for a reason, of course. Our interactions with the sites we visit on a regular basis are rendered much quicker by their processes. This is done by the browser “remembering” stylesheet info and keeping copies of images which have been downloaded previously. For the most part it’s a positive thing: it has been developed to make our online life less frustrating.

However, caching can cause problems when repeatedly viewing sites which change regularly. This is particularly evident when developing a new site: I often find that changes I make to in-progress sites are not rendered, or rendered incorrectly, when viewed by clients. This is because the browser is helpfully “remembering” the site from last time and either ignoring new information or being confused by it.

Here are some things you can do if you suspect you’re not seeing something on a webpage that should be there:

N.B. PC/Linux specific information is researched for inclusion here but not tested as thoroughly as on Mac systems. For the purposes of this article I’m using the most recent (at the time of writing) versions of the browsers on Mac OS, which are:

  • Chrome Version 53.0.2785.143
  • Firefox Version 48.0.1
  • Safari Version 10.0
  • Opera Version 40.0.2308.81
  • Internet Explorer Version 11 (not on Mac system)

Hard refreshing

A hard refresh or two is your first port of call in the search for a true page read and will usually fix any issues. The benefit of this is that you are changing nothing in the browser and it’s very easy to do. In theory at least this should force the browser to reload everything on the page from scratch instead of reloading with the cache (think of the difference between the C and AC buttons on a calculator), although it doesn’t always work perfectly. Browsers can sometimes hold onto their memories very tightly (can’t we all?).

  • Chrome: Mac: Cmd+Shift+R | PC/Linux: Ctrl+F5 or Shift+F5
  • Firefox: Mac: Cmd-Shift+R | PC/Linux: Ctrl+F5 or Shift+F5
  • Safari (Mac Only): Shift+Click on Refresh button in address bar
  • Opera: Mac: Shift+Click on Refresh button in address bar | PC/Linux: Ctrl+F5 or Shift+F5
  • Internet Explorer (PC/Linux Only): Ctrl+F5 or Shift+F5

Hard refreshing in mobile browsers

It’s harder to force a complete reload on most mobile devices (iOS, Android). A cache clear (see below) will usually work, but even then it’s often necessary to refresh a page several times. Just look for the refresh button, in or near the address bar.  It usually looks something like this: ⟳

Clearing the cache

If hard refreshing the page once or twice doesn’t help, it’s time to clear your browser cache.

Important – Read this first: Clearing your cache removes information from your browser’s temporary files. This can affect some features you may be relying on, such as auto-saved passwords. Ideally this should not be information which you rely on browser caching to keep track of for you in any case, so consider keeping track of your passwords in a safer way. Officially, clearing only the cache should not remove your cookies, browsing history or auto-fill info, but because each browser is different this cannot be guaranteed. Different browsers also offer different levels of control over exactly what you can avoid clearing along with the cache. As always, the lesson is: back up, and make sure that you are not relying on your browser to remember things for you.

After doing any of the following, it’s a good idea to hard refresh the page you are looking at one last time.

To clear browser cache in:

1. Chrome

History > Show Full History… (⌘Y / Ctrl+H) opens a new window/tab. From here hit “Clear Browsing Data”, uncheck everything except “Cached Images and files” and hit the “Clear Browsing Data” button to complete the operation.

2. Firefox

History > Clear Recent History… opens a new window. Use the “Details” dropdown arrow (⌵) to reveal the options and uncheck everything except “Cache” before hitting “Clear Now”.

3. Safari (Mac only)

Safari > Preferences… (⌘,) opens a new window. Select the “Advanced” tab and make sure the option to “Show Develop menu in menu bar” is checked. Once this is done you can clear the cache at Develop > Empty Caches (⌥⌘E).

4. Opera

History > Show All History… (⌘⇧H / Ctrl+H) opens a new window/tab. From here hit “Clear Browsing Data”, uncheck everything except “Cached Images and files” and hit the “Clear Browsing Data” button to complete the operation.

5. Internet Explorer (PC/Linux only)

Click the gear icon in the top right of the window, and select Safety > Delete Browsing History… (Ctrl+Shift+Del). In the resultant window uncheck everything except “Temporary Internet files and website files”, then hit “Delete”.

N.B. If you use Internet Explorer and really want to make sure you are having a true and optimised web experience most developers (myself included) will tell you that the best thing you can do is download Firefox or Chrome and use that instead.

6. iOS (Apple phones)

The iOS browser is a version of Safari, and its settings are accessed from within the iPhone’s Settings app, rather than within Safari itself. The pathway is as follows:

Settings > Safari > Clear History and Website Data

After doing this, return to the Safari app and refresh the page once again using the ⟳ button in the address bar.

7. Android (most other smartphones)

There are many variables in this area due to the number of device models and browsers available. A quick search should reveal any more specific information than is given in the main points below. Type in “clear browser cache on [my phone make and model]”.

  • Android browser: Launch your browser, and go to Menu > More > Settings or Menu > Settings > Privacy & Security. Tap “Clear Cache”.
  • Chrome: Launch Chrome, and go to Menu > Settings > Privacy. From here tap “Clear Browsing Data” at the bottom of the screen, uncheck everything except “Cache” and tap “Clear”.

After doing this, return to the browser and refresh the page once again.