How to Handle Caching Problems

Where’s that freshly styled bright red box you were expecting? Why hasn’t the font changed from basic Helvetica to the ever-so-stylish Helvetica Neue? That photoshopped image of your dog doesn’t look any different!

That’s your browser’s cache messing with you.

Browser cache?

So what is this meddlesome browser cache, and why’s it stopping you from seeing your updated web page?

The cache is where your browser holds copies of web pages you visit, images, etc locally (on your computer) so that the next time you go to the page it doesn’t need to waste time and bandwidth (data) downloading the content again. It can just load it straight up with a lot less waiting around, and if you’re on a metered Internet connection it’s great news.

While that’s all well and good, this is where the problems I mentioned earlier start.

You see, sometimes a change will have been made to a file - let’s say an image - so you load your page up again and the idea is that your browser should show you the newly updated image. At times this will work fine, but other times your browser will simply load up the cached image it already has and show you that instead. Annoying.

Luckily there are ways to get around this situation, and how you do so depends on which browser you’re using, and on which operating system (OS) you’re using.

So how do you fix it?

As I said, that depends on your browser and OS. So first of all you’ll need to find these details out. To do this easily, follow these simple steps:

1. Go to www.whatsmybrowser.org.
2. The page will practically scream your browser at you, and which version of the browser it is. For example, mine says “You’re using Chrome 49” in large text at the top of the page.
3. A little way down the page, you’ll see “Operating System” listed. Your current OS is on the right. Chances are it’ll either say Windows or OS X. There may be numbers after it, I wouldn’t worry about that.

So now you know your OS and your browser. Next you’ll need to try what’s commonly referred to as a “force refresh”. There are multiple methods of doing a force refresh, none of which require Jedi training! Rather than list them all, I’ll just point you in the direction of this Wikipedia article.

Head to that article, find your browser and give those options a try. Remember to pay attention to which operating system the key combinations are for. You won’t be pressing any Cmd keys on Windows!

Things still not right?

If the ol’ force refresh doesn’t do anything for you, fear not! There are other ways to tackle the beast that is the browser cache.

Below you’ll find a handy little guide system with instructions on how to “clear the browser cache” on the current most popular browsers for both Windows and OS X. This essentially deletes everything from your cache, so the browser will have no choice but to load the most up to date content.

See the Pen EdRob Cache Guide by James Weatheritt (@starfadenb) on CodePen.