Sometimes the browser needs to be refreshed.
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:
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
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.
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.
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.
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.
<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 is effectively Firefox. It therefore acts the same.
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.
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.
This is one of the <SHIFT> key plus toolbar refresh icon ones.
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.
Setting the browser agent in Firefox allows the browser to pretend to be something else.
Traditionally the user agent string was changed to make the browser appear to be IE6. Without this some websites wouldn’t work.
FireFox hides the User Agent configuration in the about:config settings.
I guess is one of those less frequently configured options – why clutter and confuse the existing configuration options with an item such as this.
To set the user agent string in Firefox. Enter the configuration using about:config in the address bar.
There’s a confirmation that changing the settings can be harmful to the application and that you should only continue if you know what you are doing.
The configuration parameter to be modified is general.useragent.override. To see if its available enter useragent in the search box.
Its likely that its not listed as a configurable option.
To add it right click in the window (I placed the mouse within the white space below the listing).
On the pop-up menu select New > String
add general.useragent.override as the name of the preference.
The user agent can then be added.
You may prefer to use an Add-On to manage the User Agent. This will allow a list of agents to be maintained with easy switching. Much simpler to checkout websites than to keep returning to the about:config options.
With your FireFox browser configured to allow easy switching off the user agent you are able to test the reason of website to different browsers and bots.
Of particular interest maybe the response of one of your websites to different robots.
One of the website hacks (so called Pharma Hack) is to detect whether the visiting browser is the google-bot or a human visitor. The content of the website is then amended accordingly. If it’s the google-bot then it looks like it’s showing and referencing pharmaceutical products.
Maybe you have configured your website to block the bad robots by their user agent, for example one of the spam bots.
To test whether your website is rejecting these bad bots you can configure Firefox to appear to be one of them by setting the user agent string.
To review and check that your website is presenting itself as you would expect change the user agent in your Firefox browser and visit your website.