When you view a website for the first time your browser downloads all the various page elements (images, text, style sheets etc.) to your desktop computer's hard drive. This is your local 'cached copy' of the web page. The next time you visit the site your browser first looks in the cache and displays the local copy rather than going to the bother of downloading it all again.
This makes web browsing much quicker; for example, if you press your 'back' button to a page you just visited it will appear almost instantly, without having to download all those images again.
That's the theory anyway, and it's generally a good system for most users. But we - and our clients - are not 'most users'. We're special!
Why is it a problem?
Okay, so a site you've visited previously can load super-fast because it is, in effect, sitting on your own computer. But what if the site has changed since you last visited? You could be looking at something that's out of date. Your browser has a system of checking for page elements that have been updated, but in practice this doesn't always work - especially in a fast-moving website development situation.
During website development and maintenance things can be changing all the time; new pictures, changed version of logos, text updates. We make the change, upload it to the web server and ask the client to check it's all as they requested.
Thanks to caching it's usually about this time we'll get a phone call asking why the change hasn't been made. The client has visited the site to check the work and can't see any difference because what they are actually viewing is their local copy of the page, cached before the changes were implemented.
Note: Pages that are served dynamically (for example using ASP or PHP) suffer less from this issue as the text content tends to be drawn from a database, requiring a new call to the server every time the page is requested. Items such as graphics or Flash elements tend not to be stored in the database and will be cached. In fact, it's changes to images that most commonly cause a problem.
How to get around browser caching
Generally speaking, caching is a 'good thing' as it will speed up your day-to-day browsing experience. But like I said, you and we are special, and when we're working on developing a website it's a good idea to know how to get around your browser's cache.
The first thing to do when you want to ensure you see the latest version of your page is to press the browser's 'Refresh' (or 'Reload') button while holding down the shift key. This is known as 'forced-refresh' and makes your browser bypass the local cache and retrieve all the page elements again from the web server. In most cases this will be sufficient, but if you are experiencing lots of caching problems you can go further.
"Clear your cache"
I doubt we have a single client who hasn't heard us say this at some time or other! Clearing your cache involves deleting those pesky local copies of all the web pages you've visited recently.
The exact method varies from browser to browser, but in Internet Explorer 5.5 for Windows you do it like this:
- Click on Tools in the menu bar and select Internet Options from the bottom of the menu.
- In the middle of this screen you'll see Temporary Internet files.
- Click Delete Files... and press OK.
- As before, go to Tools > Internet Options in the menu bar and look for Temporary Internet files.
- Click the Settings button followed by the View Files... button. You are now looking at your browser cache. (Cookies will look like a regular text file and will have names like 'firstname.lastname@example.org', making it pretty straightforward to choose the ones you want to delete.)
- Right-click the cookie you want to get rid of and select Delete from the pop-up menu.
You may be amazed to see how many cookies are in your cache - Where did they all come from? What do they do? Are they safe? Is Big Brother watching you? Well that's a whole other article...
Disable browser caching
If you are experiencing continued caching problems during site development it might be a good idea to disable your browser's cache although this will significantly slow down your general web browsing experience. Not all browsers will allow you to do this however, including Internet Explorer 5.5 for Windows, but with some the cache size can be set to 0Mb.
And that's not all... Server Caching
Once you've removed the cached copy of the site from your hard drive it stands to reason that next time you visit the site you will be looking at the latest version fresh from the internet, right? Well, sort of...
So far we've only talked about your browser's cache, but your internet service provider is probably caching too, as well as your company servers and myriad other points along the way from the website to your browser.
With the exception of your company servers (which could be re-configured not to cache certain sites) all of this is beyond your - and our - control.
Browser caching is by far the most common cause of confusion during the development of a website as there is sometimes a disparity between what is on the web server and what the client can see. Understanding the problem is half the battle, and if you can remember the tips for bypassing the browser cache then it should become nothing more than a minor irritant.
- Force-refresh the page: Shift + Refresh
- Clear your cache: Tools > Internet Options > Temporary Internet Files > Delete Files