How to Refresh your Browser Cache

Sometimes  the browser needs to be refreshed.

When a web site’s files, images, CSS and JavaScript, have been changed its possible for the browser not to realise the change and to continue using its older cached version.

Many times I have made a change to a client’s website, advised them that the updates are completed only for them not to see the change.

Refreshing the page view will often not update the view.

To view the changes made to the associated website files can require a forced browser cache update.

What is the Browser Cache?

Browser website cache is the local storage of website components: images, scripts and CSS rendering files.

The aim is to store a local copy of the website components such that the next time the page is visited only one or two items may need to be downloaded.

This improves the load speed of the website.

Browsers and how to reset flush their cache:

Refresh browser cache typical website timeline

Caching

The image above shows the details regards the timing for the downloading of the various components of a website.

a web a page allows a browser to

By caching elements of a website the browser saves on time regards to the download of those elements.

However, if one of these elements has been updated it may mean that the change isn’t showing.

If the browser is still using its older cached version then the page will look the same as before.

So, how to force the browser to reload it’s cached items, just as if it was the first time visiting the web page?

Whilst updating customer’s websites I sometimes find that the changes are not visible in their browser when reviewing the update.

For example if an image hasn’t changed, or as shown in the image above one of the website rendering CSS files is still the same then this file doesn’t need to be downloaded.

This means that the browser can render the page much quicker – it hasn’t had to wait for the file to be downloaded.

Its also lighter on your Internet plan.

Browser shows an old version – but my file has changed

Simply refreshing your browser view of a page may not be sufficient.

Browsers tend to like to work from their cached copy of website static files. Files such as images, script files and styling are generally considered to be static.

Refreshing the browser page will allow the server to regenerate the content, perhaps with any differences. But the underlying files will be kept.

So, how do I force the browser to refresh its cache? Reloading all of the websites files as if I was visiting the site for the first time.

Force Browser Refresh

The browser will try to limit the files which it downloads. However, his can mean that files which have been updated are not realised. Rendering n older version of the file.

This effect is most visible when an image or the CSS layout file have been updated.

This is most notable during the development phase of a website.

Listed below are a number of browsers with how to force the browser to refresh its cache. Sometimes clicking on the browser refresh or pressing the often used f5 key are just not enough

Refresh browser cache Firefox refresh

We need to tell the browser to forget anything that has previously been downloaded from the website should be forgotten and download afresh.

Researching this I found that comparable methods don’t exist across all of the browsers.

FireFox

I have found with Firefox that if I follow the often stated recommendation to host down the shift key and to press the f5 key I usually open a new tab.

I have found that it is preferable to hold down the shift key and to then click on the refresh icon to the right of the address bar.

Whilst testing website I have found that server errors can be particularly irritating. Firefox will fail to get the note working content from the server, rather contributing to show the server error. This does eventually time out and function correctly indeed more.

Safari

For Safari versions 9 onwards pressing the command key and R will refresh the cache.

There is also the option to click on the reload icon (at the end of the navigation bar) whilst holding down the shift key.

Google chrome

Either CRTL + F5 or <SHIFT> + F5 will work.

This may also be done from the Settings. Having selected the settings, scroll down to the bottom of the list, expanding the section Advanced. Within Privacy and security click on the option Clear browsing data. The option we’re interested in is Cached images and files. Ensure this one is ticked, untick the remainder. click on the button CLEAR BROWSING DATA.

Internet Explorer

<CTRL> + refresh ought to suffice. But its not guaranteed. With IE the better option is to clear the cache either via the tools menu or F12 key.

You may find you need to use the tools options to properly clear the cache.

Click on the gear icon and in the popup window Internet Options within the sections Browsing History click on the Delete button. This opens a new window. Untick all items except Temporary Internet files and website files. Click on Delete.

IceWeasel

IceWeasel is effectively Firefox. It therefore acts the same.

Opera

Opera doesn’t have the equivalent of clearing the cache for the current web page. Opera settings then select delete private data. Cache empty is for all.

Click on the menu in the top left corner. And click on Settings.

The Privacy & Settings page includes the option to Clear browsing data near the top, within the Privacy section.

Clicking on the link opens a pop-up window allowing selection of the items to clear. There’s an option to select how far back in time the selection shall affect.

Whilst not giving the option to select the current page this does give a good approximation.

Konqueror

From the Settings menu, select Configure Konqueror.

On the pop-up window Cache is shown in the left menu as a child item of Web Browsing. Click on this.

For me I was shown the message: This configuration section is already opened in Choqok.

I closed Choqok and tried once more.

There’s a single option, a button Clear Cache.

Midori

This is one of the <SHIFT> key plus toolbar refresh icon ones.

Vivaldi

Click on the Vivaldi icon in the top left corner and select Tools and then Clear Private Data.

On the pop-up window select cache only and set the time to Past Hour. Click on Clear Browsing Data at the bottom of the window.

References

How to clear the Firefox cache

Opera Help: Cache

Midori Browser FAQs

Wikipedia: Bypass your cache