Web browsers such as Internet Explorer, Firefox, Chrome, Safari and Opera are considered very fast due to the cache. For example, if you’ve previous visited raymond.cc and then when you re-visit raymond.cc from a bookmark or manually typing it in the address bar the next time, you will notice that the webpage loads very quickly, thanks to the web browser automatically loading the files from the local cache for most of the requests instead of redownloading the images, javascripts, CSS and etc. It is possible for the webmaster to configure the expiration date of the cached files so that your web browser will automatically recheck if the files are modified upon reaching the expiration time and will automatically pull the latest version if it is newer than the cache stored locally on your computer. The cache used by web browsers is truly a useful technology to save both time and bandwidth resources for the user and for the server as well.
We all know that every web browsers comes with a refresh or reload button but do you know exactly what it does when you click on that button? Do you also know the difference between a soft and hard refresh? Well I recently wanted to know the refresh webpage function myself so I’ve done some research and testing to understand more about this.
If you’ve previously visited a website and the cache files are not expired, visiting the website again by typing the URL on the address bar or opening from the bookmark will load the unexpired files from the local cache on your computer.
Web browser loads files from local cache
If you click on the refresh/reload button or press the F5/Ctrl+R hotkey on your web browser, this will trigger a “soft refresh” on the web browser where it will check against the web server to see if the files are modified. If modified, the web browser will pull the latest version of the file and if not modified, the web browser will continue to use the cache version. A soft refresh takes very little bandwidth just to check the HTTP response headers of the files to determine if the files are modified.
Soft refresh forces web browser to check if the files are modified.
As for hard refresh, it is a method to force the web browser to fetch all of the files again ignoring the expiration time and bypassing the local cache.
Hard refresh forces web browser to fetch all files without checking.
Now that you know the difference between a soft and hard refresh and how it works, here are the commands to perform a soft or hard refresh on different web browsers. There are actually a couple of different methods used for refresh such as Ctrl+R, Shift+F5, and etc but I’ll only show you the standard method so that it is easier to memorize.
Soft refresh: Click on the Reload/Refresh button or press the F5 key on keyboard. Works on Internet Explorer, Firefox, Chrome, Safari and Opera.
Hard refresh: Press Ctrl+F5 keys simultaneously. Works works on Internet Explorer, Firefox, Chrome and Opera. As for Safari, the only way to force a hard refresh is to press and hold the SHIFT key on the keyboard followed by clicking on the Reload button.
Logically, most of the time you don’t really need to do a soft or hard refresh unless the webpage suddenly looks broken probably due to some changes being made on the website. If the webpage still looks broken after a refresh, then only you should contact the owner of the website. Some of you reported that the floating social bar at the left hand side overlapping the first two paragraphs. Please do a soft refresh for your web browser to fetch the latest files. That should fix the problem.
@barney: Used Firebug extension for Firefox. Used HttpWatch for Internet Explorer. As for Chrome and Safari, it comes with Web Inspector by default. Right click and select Inspect Element. Finally, Opera comes with Dragonfly, right click and select Inspect Element.
Actually, I’m much more interested in the software you are using to display the refreshes – what is it?
CTRL+R is soft refresh for Safari, Chrome, Firefox, and Internet Explorer. It is however hard refresh for Opera.
CTRL + R works for me on chrome
I’ve always used CTRL+R. Is that a hard refresh or a soft one?
@jc onte
just disable cache. What you can’t circumvent by that is an intermediate proxy server (also available as transparent proxies where you not even know it is in between) that behaves badly (disregards the HTTP headers “Pragma: no-cache” and “Cache-Control: no-cache.”).
I’m sorry Frank, but I did not know about hard or soft refresh, so this was another enlightening article for me and to understand the difference between the two. I do try to keep up, but between the article and your comment, I realize I’ve a long way to go…
OMG, you really think that was unknown to anyone (attending your page, so at least slightly computer affine)? My memory is not the best but I think that worked back in the days of Netscape already that way…
P.S. Nevertheless, I love your site :)
the question is how to do always Hard-Refresh? without using CTRL+F5