Back in 2020, Google announced that they would be making User Experience (UX) more important…
I originally wrote this post back in 2012 but decided to update a couple of things in it as it is still true, perhaps more so today, as caching is being used more widely to speed up websites these days.
One of the most common questions I get asked quite regularly after carrying out modifications or additions to a client’s website is “Why can’t I see my new web page ?” I thought it would be useful to explain why this is and how to resolve it.
The “Techy” bit
When you visit a website for the first time, your browser (e.g. Edge, Firefox, Chrome etc.) communicates with the server (where the website is hosted) which then sends a copy of the page and all its contents to your browser which it then displays for you to read.
Web pages contain a lot of content (e.g. words, images, scripts etc), made up of lots of separate files so each of these needs to be downloaded to your browser individually before it can display the page. This is why sometimes you notice it takes a while to display everything, particularly if you have large images.
This process takes time and bandwidth so it costs time and money to do this every time you re-load a page. Some of this content quite often does not change very often, or is the same on multiple pages (e.g. a logo displayed in the header) so the browser stores a copy of all the files locally in what is called its “cache”.
The next time a page is loaded, the browser first checks in its cache to see if it already has a copy of each file and then uses this rather than downloading it again from the server. This is obviously faster and also reduces the amount of bandwidth required as it only needs now to download the files that it does not have.
When you update or change the content on a website and upload the new version to the server, if the file name is the same, the browser would not know that it has changed so it still quite reasonably uses the local version it has stored in its cache so you still see the previous version.
If you look at the top (usually top left) of your browser, you will see a refresh button which usually looks like a circular arrow on most browsers. An example of what to look for is included below:
Firefox, Chrome, Edge browsers
Clicking on this icon will result in a normal page refresh (you can click the refresh button or use the F5 [Windows] or Ctrl+R [Windows] or Cmd+R [Mac] keyboard shortcuts) but this generally still uses the cached files rather than re-downloading them from the server.
If you use Shift+Refresh, (or press Ctrl+Shift+R [Windows] or Ctrl+F5 [Windows] or Cmd+Shift+R [Mac]; the keyboard shortcut doesn’t work on Safari) this clears the cache for the files in that page and loads the latest version from the web site’s server.
So, the first thing to try is to hold down the shift key on your keyboard and then click the refresh icon on the browser. You need to do this on each page.
If this doesn’t resolve the problem, then the simplest thing to do is to shut down your browser and shut down (not restart) your laptop completely and start it up again.
So now you know.