You may have noticed that when you return to a website you’ve visited before, it loads a bit speedier than it did on your first visit.  This little boost is thanks to the power of caching. Caching makes commonly used websites load faster and use less bandwidth, but there are a few instances in which it can all lead to some pretty screwy behavior.  What is caching anyways?  Well, to answer that question, first you must understand what happens when you visit a website in your browser.

When you visit a URL, your browser sends a request to the server hosting that page and asks it to send you all the files associated with the URL you are visiting.  For modern websites, this frequently includes a lot of different files.  These files include (but aren’t limited to) the page itself, any images displayed on the page, at least one (and sometimes many) stylesheet and any number of javascript files.  As your browser downloads all these files from the server, some of them are saved onto an area of your computer’s hard drive called a “cache.”  The next time you visit that website, your computer will first look in its cache for a recent copy of the files the server is trying to send it.  If it finds some, it will load those directly from the hard drive, which is way faster than downloading a fresh copy of them from the server.

Unfortunately, when a site is being developed, the contents of these files are changing rapidly, and the cached files may no longer be the most up to date versions.  This can lead to pages displaying as outdated versions, or sometimes looking broken if old, cached files are loaded alongside other files fresh from the server.  To solve this problem, you can do a “hard refresh” (sometimes called a “force reload”).  A hard refresh forces the browser to load all fresh copies of the files from a specific page regardless of what it has in its cache.  If you’re viewing a webpage that is under development and things don’t look right, try a hard refresh first!

The steps to do a hard refresh vary depending on the browser and operating system you are using, but below are the keyboard shortcuts for the most common ones.

Chrome:

Windows: Hold down Ctrl and press F5

Mac: Hold down ⌘ Cmd and ⇧ Shift key and then press R

Mozilla Firefox:

Windows: Hold down Ctrl and ⇧ Shift and then press R

Mac: Hold down ⌘ Cmd and ⇧ Shift and then press R

Internet Explorer:

Hold the Ctrl key and press the F5 key

Safari:

To empty the cache, you need to turn on the Develop menu. Got to Safari > Preferences…, click the Advanced tab, and check Show Develop menu in menu bar.

Hold down alt and ⌘ Cmd, and then press E to empty the cache.

Hold the ⌘ Cmd key, and press R to refresh the page.

Before you go, download our PDF document outlining how to hard refresh!