We’re often making changes to a large number of websites on a daily basis. Caching, and in particular browser cache, causes all sorts of confusing problems that sometimes sends us (and clients) on a wild goose chase. This is often apparent during a web design project where lots of changes and updates are being applied in a short space of time. Knowing and understanding browser caching can save a lot of valuable time!
What is Browser Caching?
Modern web browsers attempt to improve user experience by downloading website files into a temporary storage location on your computer. By doing so, browsers are able to speed up your website viewing experience. Files that are cached in this manner are served from this local, temporary location rather than being download each time from the website. Cached files often include html files, style sheets, Javascript as well multimedia files such as images.
Why is this a problem?
For the majority of visitors browser caching is not a problem. Quite often, it’s the opposite as browser caching helps improve our online experience. However, there are certain situations where browser caching is not helpful such as when you’re making changes or updates to a website.
Specifically, this occurs when changes are made to a website but the browser continues to server the locally cached version of a file (rather than the new updated version). It’s quite obvious to see how this might be a problem!
Solutions
There are lots of ways to work around browser caching but here are 4 common solutions that will help make life easier for anyone experiencing issues:
Clear your cache – this phrase has become a bit of an inside joke among developers in the web design industry. The confusion caused by browser caching is so common, developers are known to constantly repeat themselves, instructing colleagues and clients to “clear their cache”. Here’s a comprehensive guide on clearing your cache.
Don’t cache to begin with – not caching files in the first place can help avoid the problem completely. Setting your browser up to not cache files is a sensible course of action if you know you’ll be viewing lots of sites that will be changing often. In our experience, even though the browser is set to not cache, some files still end being cached (which can be very confusing and frustrating).
Set pages not to be cached (or expires) – on the flipside, browsers can be instructed not to cache files by the page being viewed. This often isn’t ideal as pages will want to be cached in the future but could be useful for a website in development. Here’s a really in-depth response on stackoverflow on how to make sure a web page is not cached, across all browsers.
Use cache busting techniques – on a basic level, cache busting is ultimately achieved by changing the path to a file or it’s name (whenever a file is updated) so the browser doesn’t recognise the file as one it has already cached. There are lots of ways to implement cache busting at different stages of a web design project.
Browser caching can be a pain so we hope this article provides some useful ways to work around what can be a very annoying problem.