How to do a hard refresh

^{Image from Pixabay}

Caching

While developing a website or changing its content, a person will often run into problems caused by browser caching. For example, a person might change a homepage image on a site, check the site to see if the picture looks ok and find that the old image still remains on the page. This problem is caused by the browser cache but there is a simple fix - clearing the cache with a "hard refresh." 

When you visit a website for the first time, your browser “caches” the site’s files, meaning that the browser downloads the site's files from the remote server onto your computer. Those files include the code as well as the images and other files. Your browser stores that information so that the next time you visit the site, the website's files will be loaded from your computer instead of from the remote server where the website actually "lives." By loading the files from your computer’s cache, the browser is able to display the site much more quickly than it would if it were to download the site’s files anew each time you visit the site.

What Hard Refresh Does and Why You Need It

Caching is an important concept to understand for site builders, content managers, developers and anyone else who is looking to make changes to a website. This is because often times someone will make a change to a file, or replace a file with a different file but they won’t see those changes displayed correctly because the browser is loading the old files from your cache instead of downloading all of the files again. To resolve this issue, we have the “hard refresh.” A hard refresh is a command to your browser to ignore any cached files that have been previously downloaded from the website and force the browser to download all of the files again.

Desktops and Laptops

Chrome

Mac OS

1. Hold down shift and click the refresh button
2. Hold down cmd + shift + r

Windows and Linux

1. Hold down ctrl and click the refresh button
2. Hold down ctrl and press F5

Firefox

Mac OS

1. Hold down shift and click the refresh button
2. Hold down cmd + shift + r

Windows and Linux

1. Hold down the ctrl key and press F5
2. Hold down ctrl + shift + r

Internet Explorer

1. Hold down the ctrl and press the refresh button
2. Hold down the ctrl key and press F5

Safari

Mac OS and Windows

Safari recently changed the way hard refreshing works. Now, in order to even see an option to empty the cache, you have to enable the ‘Develop’ menu. To show the Develop menu it, go to Safari > Preferences, click the Advanced tab, and check Show Develop menu in menu bar. Then to empty the cache, click Develop > Empty Caches.

Mobile Devices

Chrome

IOS

1. Tap the three verticle dots icon in the top right corner
2. Tap Settings
3. Tap Privacy
4. Tap Clear Browsing Data
5. Scroll to the bottom and tap Clear Browsing Data and confirm

Android

1. Tap the three verticle dots icon in the top right corner
2. Tap Settings
3. Tap Privacy 
4. Tap Clear browsing data.
5. Choose a time range, like Last hour or All time.
6. Check "Cookies and site data" and "Cached images and files"
7. Tap Clear data.

Safari

IOS

1. Open the Settings app from the Home screen of your iPhone or iPad
2. Scroll down and tap on Safari
3. Scroll all the way to the bottom and tap on Advanced
4. Tap on Website Data
5. Scroll to the bottom again and tap on Remove All Website Data
6. Confirm that you'd like to delete all data

Firefox

Android

1. Open Settings and tap on Apps
2. Select Firefox
3. Tap App Info
4. Tap Storage
5. Tap Clear Cache

IOS

1. Tap the "hamburger icon" in the bottom right of the screen
2. Tap Settings
3. Scroll down to the Privacy area and tap Clear Private Data
4. Scroll to the bottom and tap Clear Private Data
5. Confirm that you want to clear the private data