Whenever we’re working with our clients and making changes to their websites, we often hear that they can’t see the changes or something seems broken on the site. This is really common and the first thing we tell them to do is to refresh or clear their cache and delete your session cookies, and 9 times out of 10 this fixes their issue and they can see the new changes on their website. But, what is it, why does it happen and more importantly how do you bypass it and refresh it when needed?
What is Browser Caching?
The browser cache is a temporary storage location (on your machine) for specific files that are automatically downloaded by your browser when viewing websites. These files typically include things that make up a website, such as html, CSS, JavaScript as well as any images or other multimedia content. These are all downloaded from the web server where the website is hosted and saved locally on your machine.
So, when you revisit a website, the browser will load these files from it’s cache instead of downloading them from the server.
This is your browser cache and that’s essentially what it does..
But why do this? The main reason is speed. It also saves bandwidth on both client and server side. Because when you next visit that website it will load a lot of the files needed directly from your local cache. Which means you’re not having to download all that data again and the website will load that much faster.
Now that all sounds great but why is it an issue or something that would ever need to be cleared or bypassed?
Well your browser cache can get quite large. Full of files and data from websites you’ll most likely never visit again along with those you visit regularly. So just as a general house-keeping rule we suggest you clear it out every month or two. But the main reason we (and our clients) tend to need to clear it out is because when we’re making lots of changes to a website and the files we are updating are the ones that are normally saved in the browser cache. So this means when we send you an update you could still be seeing the old files. Or even worse, a mixture of old files and new files which just makes your website look broken.
So, if you need to clear your cache there are 3 main ways to do this.
1. Forced Refresh
A forced refresh is basically a way for you to tell your browser to go collect new files from the server. To do this just Press Ctrl + F5 or CMD, Shift and R on a Mac. This should force the browser to check the server for new files.
2. Clearing the Browser Cache
This is manually deleting the browsers saved files.
In Chrome, press Ctrl H to access History > Clear Browsing Data. You only need to have ‘Cached Images and Files’ ticked. You can untick the others and leave them. Then click Clear Data. Try accessing the website again, possibly with a few forced refreshes again.
In IE/Edge, Open Microsoft Edge, select Menu (3 dots icon on top right corner of the browser) > Settings > Privacy & services. Under Clear browsing data, select Choose what to clear. Select “Cached images and files” and “Cookies and other site data” check box and then select Clear.
3. Use an Incognito or Private Browsing Window
When checking styling it’s always worth checking the website in an Incognito or Private Browsing window – as these don’t utilise browser caching and should load the files from the server. To open that just click the 3 dots top right (under close x) and ‘open Incognito window’ or ‘InPrivate Window’ and then try to access the page/website in question.