Something on your website doesn’t look right… so you email your CodeGeek project manager and she tells you to “Clear your browser cache…” Your immediate reaction is “why?” and “how?” (and “my what”?) In this post, we’ll explain what your browser cache is and how to clear it across multiple browsers.
What even is my browser cache?
To explain your browser cache it might help to give you a basic explanation of what happens when you click on a link in your website.
- Your browser (the window you’re using to view this website), sends a request to the server (the computer that your website files live on).
- The server finds all of the files that are needed to display your webpage, including the page structure, text content, styles, interactive elements and images (each of which might be a separate file or files) and sends them back over the internet to your browser.
- Your browser then reads the files and puts them together to display your beautiful web page.
As websites get more complex, the number of files that have to be sent from the server to your browser gets larger and larger. To help with this, your browser will cache (or save) files that it thinks it might reuse,
Why is my browser cache important?
As websites get more complex, the number of files that have to be sent over gets larger and larger. To help with this, your browser will cache (or save) files that it thinks it might reuse, such as the site’s logo and stylesheet. That way, instead of having to wait for the server to send that file back, the browser will just grab it out of your cache (which is stored on your computer).
Caching has many benefits:
- Caching reduces the load on the hosting server.
- It also lowers the amount of data that needs to be transferred (key for cellular networks with data caps).
- And caching can help web pages load faster.
But, when these files are stored in your browser cache, and then we put newer versions on the server, your browser doesn’t always know to go get the new version right away.
So we tell you to clear your browser cache, which really means deleting these files from your computer so that the browser will have to request new versions from the server.
What else is going to happen when I clear my cache?
As web developers, we hate clearing our caches because it can be a hassle, so it’s usually a last resort. There are other things we recommend trying first.
One thing to note before you clear your browser cache is that the methods below are the “nuclear option” for clearing your cache. These instructions have you clearing your cache, cookies, logins and other browser data. This means:
- You will be logged out of any sites that you are currently logged into in your browser. This might include sites that you don’t currently have open, but have opted to “remember me” or “keep me logged in” when you logged in originally. If you don’t know your passwords to these sites, you’ll have to go through a password reset procedure. That’s why we recommend the use of a password keeper.
- You will also potentially lose your browser history. So if you’re used to typing in the first couple letters of a URL and having it autocomplete in your browser bar, you’ll want to bookmark those sites somewhere.
- If you currently have a shopping cart open, and it’s a site you’re not logged into, you may lose whatever you have saved in your cart
These potential results of the “nuclear option” can be annoying, especially if you (like us) often have a dozen tabs open at one time and are logged into email, calendars and other services all the time. We wanted you to be forewarned.
You can, of course, selectively clear items out of your browser cache and history, and see if that works, but that can be tedious and a bit technical.
Are there any alternatives to clearing my browser cache?
We’re going to let you in on a little secret. As web developers, we HATE clearing our browser caches. It logs us out of our stuff, makes us realize that we had forgotten to save that link we were referencing earlier in the day, and is just an all-around hassle. For us, clearing the cache is usually a last resort.
So, what are we trying first?
- Open the page in a browser that you’re pretty sure that you haven’t viewed the page in before (or haven’t used in a long time, at least).Most of us have at least three browsers on our computers here at CodeGeek, but we typically use the same one all day every day, which gives us two more options to check the site in.
- Use a private, or incognito browsing window. Almost all of your browsers will include some sort of private browsing. Different browsers have different policies for what private browsers will and won’t load, but typically they won’t use the cache or cookies from your regular browser window. Many of us here are CodeGeek favor Google Chrome, and this is how you open an incognito window in Chrome.
- Do a “hard” refresh. Some browsers will allow you to use some keystrokes to tell it to reload the site entirely from the server (ignoring any cached items). For us Mac users, that’s Shift+Command+R, for Windows machines, try Shift+Ctrl+R.
- Try a different device. For some issues, you might try looking at the site on your computer if you were viewing it on your phone, or vice versa. Or ask a friend or coworker if you can take a quick look on their computer.
If all of these are still coming up with the same issue, then we’ll go ahead and clear the browser cache as a final troubleshooting option.
So, how do you do that? Find your particular browser below and follow a few quick steps:
Mobile browsers
Android
The steps to clear your cache, cookies, and history depend on which Android device you have and the browser you use, but you should be able to clear your cache and data from your application management settings menu:
- Go to Settings and choose Apps or Application Manager.
- Swipe to the All tab.
- In the list of installed apps, find and tap your web browser.
- Click on Storage. Tap Clear Data and then Clear Cache.
- Exit/quit all browser windows and re-open the browser.
Chrome for Android
- Tap Chrome menu > Settings.
- Tap (Advanced) Privacy.
- From the “Time Range” drop-down menu, select All Time.
- Check Cookies and Site data and Cached Images and Files.
- Tap Clear data.
- Exit/quit all browser windows and re-open the browser.
Safari for iOS
- Open your Settings app.
- Tap Safari.
- Tap Clear History and Website Data and confirm.
- Exit/quit all browser windows and re-open the browser.
Chrome for iOS
- Tap Chrome menu > Settings.
- Tap Privacy.
- Tap Clear Browsing Data.
- Choose the data type you want to clear.
- Tap Clear Browsing Data.
- Exit/quit all browser windows and re-open the browser.
Desktop browsers
Chrome
- In the browser bar, enter: chrome://settings/clearBrowserData
- At the top of the “Clear browsing data” window, click Advanced.
- Select the following:
- Browsing history
- Download history
- Cookies and other site data
- Cached images and files
- From the “Time range” drop-down menu, you can choose the period of time for which you want to clear cached information. To clear your entire cache, select All time.
- Click CLEAR DATA.
- Exit/quit all browser windows and re-open the browser.
Firefox
- From the History menu, select Clear Recent History.
- If the menu bar is hidden, press Alt to make it visible.
- From the Time range to clear: drop-down menu, select the desired range; to clear your entire cache, select Everything.
- Next to “Details”, click the down arrow to choose which elements of the history to clear; to clear your entire cache, select all items.
- Click Clear Now.
- Exit/quit all browser windows and re-open the browser.
Microsoft Edge
- In the top right, click the Hub icon (looks like star with three horizontal lines).
- Click the History icon (looks like a clock), and then select Clear all history.
- Select Browsing history, then Cookies and saved website data, and then Cached data and files. Click Clear.
- After the “All Clear!” message appears, exit/quit all browser windows and re-open the browser.
Internet Explorer 11
Note: On January 12, 2016, Microsoft ended support for Internet Explorer versions prior to version 11 . CodeGeek strongly recommends that you upgrade to the new Microsoft Edge or another modern, supported browser.
- Select Tools > Safety > Delete browsing history….
- If the menu bar is hidden, press Alt to make it visible.
- Deselect Preserve Favorites website data, and select:
- Temporary Internet files or Temporary Internet files and website files
- Cookies or Cookies and website data
- History
- Click Delete. You will see a confirmation at the bottom of the window when the process is complete.
- Exit/quit all browser windows and re-open the browser.
Safari 8 and later
- From the Safari menu, select Clear History… or Clear History and Website Data….
- Select the desired time range, and then click Clear History.
- Go to Safari > Quit Safari or press Command-Q to exit the browser completely.
I cleared my cache and it’s still not working! Now what?
If you’ve tried the steps above and your site still looks strange or you’re not seeing the updates, chances are that the server cache needs to be cleared as well. Some WordPress sites will have a tool to do this in the WordPress dashboard. Your CodeGeek project manager can show you how to do that.
Still have questions or need some help? Contact a Geek!
Let us know:
- what browser you’re using
- what kind of computer or device you have
- what you’re seeing that you’re not expecting. Screenshots can help as well!
Happy cache clearing!