So your web page looks broke? Before you start screaming from the rooftops and curse the invention of the internet, it might be a good idea to check that you’re viewing the latest site data.

In the online world, a hard refresh is required almost any time there are stylistic changes made to your website so for any website administrator it’s important to understand what the cache is and how to refresh it.

If your site has undergone recent development, chances are that the browser has simply become confused about what’s new and what’s old. To fix it, you will need to “clear your cache”, use a “hard refresh” or as our friends at Google would say:   – obliterate the history since “the beginning of time.

What is the cache?

The cache is a file storage mechanism designed to facilitate faster access to files and data. Browser caching is the most common type of caching that Internet users will encounter, and you need to be aware that files are stored on your computer in order to reduce browser load time and improve user experience.

As browsers download page data, they will check the expiry dates of the cached files to determine if an update is required. The browser will then replace old files with the latest versions to ensure recent changes are reflected. It’s important to note that not all files have expiry dates, so while the browser’s default expiry conditions will apply, sometimes files are not refreshed even though they have actually been updated.

For most users, the caching process is great as the sites they visit on a regular basis may not change very often so caching saves unnecessary downloads. However, for web administrators who view the website on a day-to-day basis, it’s likely that a change may be missed by the browser. This can make the browser look jumbled due to cross over between the cached files and the latest database data from the site.

Caching of files

  • Files may be cached by your browser
  • Caching may save a file expiry date to indicate when they need to be refreshed
  • Files that are cached generally include image assets, CSS styling files, JavaScript files and other files you would usually see on your server's hosting account.

 

Caching of data

  • Data is not cached by your browser however it may be cached by other caching mechanisms
  • When database caching is in place it may includes database information such as article content, configuration settings, publish/unpublished states and many more.

 

Example: Have you ever noticed when you leave the file name unchanged on an updated image that it doesn’t appear to be changed on the website? That’s caching in action. The image has actually changed and new users will see this but you are seeing the cached version. In this case, a simple refresh will update the image data stored and you will be able to see the new image.

How to refresh your cache?

One of the most important shortcuts in the web industry is the refresh button in the browser. The refresh is sometimes known as a “hard refresh” and provides developers and website administrators a way to quickly clear browser data so that new changes can be viewed.

Commit these standard refresh keys to memory

Windows users: Cntl+F5
Mac users: Cmd+R

Android

1. Start your browser.

2. Tap Menu, and then tap More.

3. Select Settings.

4. Under "Privacy settings", select Clear cache, Clear history, or Clear all cookie data as appropriate, and then tap OK to accept (or Cancel to cancel) the deletion.

Chrome

1. In the browser bar, enter: chrome://settings/clearBrowserData

2. Select the items you want to clear (e.g., Clear browsing history, Clear download history, Empty the cache, Delete cookies and other site and plug-in data).

3. From the Obliterate the following items from: drop-down menu, you can choose the period of time for which you want to clear cached information. To clear your entire cache, select the beginning of time.

4. Click Clear browsing data.

GoogleCache

Firefox

1. From the Tools or History menu, select Clear Recent History.

2. If the menu bar is hidden, press Alt to make it visible.

3. From the Time range to clear: drop-down menu, select the desired range; to clear your entire cache, select Everything.

4. Click the down arrow next to "Details" to choose which elements of the history to clear. Click Clear Now.

Internet Explorer 9 and 8

1. Click Tools, and select Delete Browsing History... .

2. Deselect Preserve Favorites website data, and select Temporary Internet files, Cookies, and History.

3. Click Delete.

Internet Explorer 7

1. From the Tools menu in the upper right, select Delete Browsing History... .

2. To delete your cache, click Delete files... .

3. To delete your cookies, click Delete cookies... .

4. To delete your history, click Delete history... .

5. Click Close, and then click OK to exit.

Mobile Safari for iPhone OS (iPhone, iPod touch, iPad)

To clear cache and cookies:

1. From the home screen, tap Settings, and then tap Safari.

2. At the bottom of Safari's settings screen, tap Clear cookies and data, or Clear Cookies and Clear Cache. Confirm when prompted.

To clear history:

1. From the home screen, tap Safari.

2. At the bottom of the screen, tap the Bookmarks icon.

3. In the lower left, tap Clear.

4. Tap Clear History.

Opera

1. From the Opera menu, select Settings, and then Delete Private Data... .

2. In the dialog box that opens, select the items you want to clear, and then click Delete.

Safari

1. From the Safari menu, select Reset Safari... .

2. From the menu, select the items you want to reset, and then click Reset. As of Safari 5.1, Remove all website data covers both cookies and cache.

Still not seeing what you expect?

Take a look at these great cache busting bookmarklets that can be added to your browser to help you clear your cache.

The primary “Bust Cache” bookmarklet will add a unique query string to your URL which usually will reload all elements on your page bypassing the cache.

You can use the CSS Cache Buster to ensure the CSS is reloaded.

To install any of these bookmarklets drag the link from the webpage to your bookmarks bar.

While browser caching is the most common form of caching that you will encounter on a day-to-day basis there are also other types: session, network, server caching and many more. If you’re still experiencing problems it’s best to contact your web development team or IT department to find a resolution.

References

Cache clearing instructions -  http://kb.iu.edu/data/ahic.html

Cache Busting Boookmarklets -  http://blog.plasticmind.com/javascript/cache-busting-bookmarklets/

CSS Cache Buster -  http://jasongraphix.com/journal/css-cachebuster/