Clearing Browser Data

September 10, 2012 7:50 pm | 13 Comments

In Keys to a Fast Web App I listed caching as a big performance win. I’m going to focus on caching for the next few months. The first step is a study I launched a few days ago called the Clear Browser Experiment. Before trying to measure the frequency and benefits of caching, I wanted to start by gauging what happens when users clear their cache. In addition to the browser disk cache, I opened this up to include other kinds of persistent data: cookies, localStorage, and application cache. (I didn’t include indexedDB because it’s less prevalent.)

Experiment Setup

The test starts by going to the Save Stuff page. That page does four things:

  • Sets a persistent cookie called “cachetest”. The cookie is created using JavaScript.
  • Tests window.localStorage to see if localStorage is supported. If so, saves a value to localStorage with the key “cachetest”.
  • Tests window.applicationCache to see if appcache is supported. If so, loads an iframe that uses appcache. The iframe’s manifest file has a fallback section containing “iframe404.js iframe.js”. Since iframe404.js doesn’t exist, appcache should instead load iframe.js which defines the global variable iframejsNow.
  • Loads an image that takes 5 seconds to return. The image is cacheable for 30 days.

After this data is saved to the browser, the user is prompted to clear their browser and proceed to the Check Cache page. This page checks to see if the previous items still exist:

  • Looks for the cookie called “cachetest”.
  • Checks localStorage for the key “cachetest”.
  • Loads the iframe again. The iframe’s onload handler checks if iframejsNow is defined in which case appcache was not cleared.
  • Loads the same 5-second image again. The image’s onload handler checks if it takes more than 5 seconds to return, in which case disk cache was cleared.

My Results

I created a Browserscope user test to store the results. (If you haven’t used this feature you should definitely check it out. Jason Grigsby is glad he did.) This test is different from my other tests because it requires the user to do an action. Because of this I ran the test on various browsers to create a “ground truth” table of results. Green and “1″ indicate the data was cleared successfully while red and “0″ indicate it wasn’t. Blank means the feature wasn’t supported.

The results vary but are actually more consistent than I expected. Some observations:

  • Chrome 21 doesn’t clear localStorage. This is perhaps an aberrant result due to the structure of the test. Chrome 21 clears localStorage but does not clear it from memory in the current tab. If you switch tabs or restart Chrome the result is cleared. Nevertheless, it would be better to clear it from memory as well. The Chrome team has already fixed this bug as evidenced by the crowdsourced results for Chrome 23.0.1259 and later.
  • Firefox 3.6 doesn’t clear disk cache. The disk cache issue is similar to Chrome 21′s story: the image is cleared from disk cache, but not from memory cache. Ideally both would be cleared and the Firefox team fixed this bug back in 2010.
  • IE 6-7 don’t support appcache nor localStorage.
  • IE 8-9 don’t support appcache.
  • Firefox 3.6, IE 8-9, and Safari 5.0.5 don’t clear localStorage. My hypothesis for this result is that there is no UI attached to localStorage. See the following section on Browser UIs for screenshots from these browsers.

Browser UIs

Before looking at the crowdsourced results, it’s important to see what kind of challenges the browser UI presents to clearing data. This is also a handy, although lengthy, guide to clearing data for various browsers. (These screenshots and menu selections were gathered from both Mac and Windows so you might see something different.)

Chrome

Clicking on the wrench icon -> History -> Clear all browsing data… in Chrome 21 displays this dialog. Checking “Empty the cache” clears the disk cache, and “Delete cookies and other site and plug-in data” clears cookies, localStorage, and appcache.

Firefox

To clear Firefox 3.6 click on Tools -> Clear Recent History… and check Cookies and Cache. To be extra aggressive I also checked Site Preferences, but none of these checkboxes cause localStorage to be cleared.

Firefox 12 fixed this issue by adding a checkbox for Offline Website Data. Firefox 15 has the same choices. As a result localStorage is cleared successfully.

Internet Explorer

It’s a bit more work to clear IE 6. Clicking on Tools -> Internet Options… -> General presents two buttons: Delete Cookies… and Delete Files… Both need to be selected and confirmed to clear the browser. There’s an option to “Delete all offline content” but since appcache and localStorage aren’t supported this isn’t relevant to this experiment.

Clearing IE 7 is done by going to Tools -> Delete Browsing History… There are still separate buttons for deleting files and deleting cookies, but there’s also a “Delete all…” button to accomplish everything in one action.

The clearing UI for IE 8 is reached via Tools -> Internet Options -> General -> Delete… It has one additional checkbox for clearing data compared to IE 7: “InPrivate Filtering data”. (It also has “Preserve Favorites website data” which I’ll discuss in a future post.) LocalStorage is supported in IE 8, but according to the results it’s not cleared and now we see a likely explanation: there’s no checkbox for explicitly clearing offline web data (as there is in Firefox 12+).

IE 9′s clearing UI changes once again. “Download History” is added, and “InPrivate Filtering data” is replaced with “ActiveX Filtering and Tracking Protection data”. Similar to IE 8, localStorage is supported in IE 9, but according to the results it’s not cleared and the likely explanation is that there is not a checkbox for explicitly clearing offline web data (as there is in Firefox 12+).

iPhone

The iPhone (not surprisingly) has the simplest UI for clearing browser data. Going through Settings -> Safari we find a single button: “Clear Cookies and Data”. Test results show that this clears cookies, localStorage, appcache, and disk cache. It’s hard to run my test on the iPhone because you have to leave the browser to get to Settings, so when you return to the browser the test page has been cleared. I solve this by typing in the URL for the next page in the test: http://stevesouders.com/tests/clearbrowser/check.php.

Opera

Opera has the most granularity in what to delete. In Opera 12 going to Tools -> Delete Private Data… displays a dialog box. The key checkboxes for this test are “Delete all cookies”, “Delete entire cache”, and “Delete persistent storage”. There’s a lot to choose from but it’s all in one dialog.

Safari

In Safari 5.0.5 going to gear icon -> Reset Safari… (on Windows) displays a dialog box with many choices. None of them address “offline data” explicitly which is likely why the results show that localStorage is not cleared. (“Clear history” has no effect – I just tried it to see if it would clear localStorage.)

Safari 5.1.7 was confusing for me. At first I chose Safari -> Empty cache… (on Mac) but realized this only affected disk cache. I also saw Safari -> Reset Safari… but this only had “Remove all website data” which seemed too vague and broad. I went searching for more clearing options and found Safari -> Preferences… -> Privacy with a button to “Remove All Website Data…” but this also had no granularity of what to clear. This one button did successfully clear cookies, localStorage, appcache, and disk cache.

Crowdsourced Results

The beauty of Browserscope user tests is that you can crowdsource results. This allows you to gather results for browsers and devices that you don’t have access to. The crowdsourced results for this experiment include ~100 different browsers including webOS, Blackberry, and RockMelt. I extracted results for the same major browsers shown in the previous table.

In writing up the experiment I intentionally used the generic wording “clear browser” in an attempt to see what users would select without prompting. The crowdsourced results match my personal results fairly closely. Since this test required users to take an action without a way to confirm that they actually did try to clear their cache, I extended the table to show the percentage of tests that reflect the majority result.

One difference between my results and the crowdsourced results is iPhone – I think this is due to the fact that clearing the cache requires leaving the browser thus disrupting the experiment. The other main difference is Safari 5. The sample size is small so we shouldn’t draw strong conclusions. It’s possible that having multiple paths for clearing data caused confusion.

The complexity and lack of consistency in UIs for clearing data could be a cause for these less-than-unanimous results. Chrome 21 and Firefox 15 both have a fair number of tests (154 and 46), and yet some of the winning results are only seen 50% or 68% of the time. Firefox might be a special case because it prompts before saving information to localStorage. And this test might be affected by private browsing such as Chrome’s incognito mode. Finally, it’s possible test takers didn’t want to clear their cache but still saved their results to Browserscope.

There are many possible explanations for the varied crowdsourced results, but reviewing the Browser UIs section shows that knowing how to clear browser data varies significantly across browsers, and often changes from one version of a browser to the next. There’s a need for more consistent UI in this regard. What would a consistent UI look like? The simple iPhone UI (a single button) makes it easier to clear everything, but is that what users want and need? I often want to clear my disk cache, but less frequently choose to clear all my cookies. At a minimum, users need a way to clear their browser data in all browsers, which currently isn’t possible.

 

13 Responses to Clearing Browser Data

  1. Good stuff, nice to know what the browsers are actually doing. We were just talking yesterday about how, although Chrome’s 4 years old now, there’s still no good ol’ ctrl-shift-R shortcut like Firefox has. Would make a great extension!

  2. @richtaur: +1 for “ctrl-shift-R” in Chrome. “Ctrl-shift-delete” brings up the “Clear Browsing Data” window, but that’s an extra step. Somebody file a feature request!

  3. So the best way to do it is check all the options and than close the tab and open the url in a new tab.

  4. @richtaur: Ctrl+F5 reloads the page ignoring cache. Works in both Chrome & Firefox!

  5. Another interesting angle on this is how Private Browsing behaves with caching. In Chrome, for instance, all local data (including localStorage) is cleared with each Icognito session. Nothing (as far as I can tell) survives a private browsing session.

    Clearly, it extends the scope of the experiment, but I’d be curious to know if all browsers are equally thorough at removing all local data between private browsing sessions.

  6. That’s quite an interesting article!

    If you are working on caching this month, one thing that would be awesome for you to test is asynchronously loaded scripts. I have scripts.js loaded in my layout, and scripts.js, on onload, appends an async.scripts.js to the head. Even if I use ?bustingparameters, it is still cached. Ie loading ….JS?123 then …JS?456 will load the 123 cached file. A ctrl f5 or ‘hard refresh’ in Firefox, chrome and safari does NOT remove the async script from cache, but removes everything else! Have to clear browser data for it to work, it’s weird!

  7. One of the most evil things in programming is browser cache – what’s even more evil than that is when your hosting company caches your PHP files for a few minutes or so – this means that whenever you make a change to the PHP file, then you won’t see the change until after 5 minutes, which makes you believe that you’re not working on the right file!

  8. What’s peculiar is that I have not seen any browser that reloads sites with frames correctly. Why not? In Firefox you can reload frames. However for that to work you have to know they are there.

    Not that I am planning on building websites with frames, but they are still used – even by big sites!

  9. Fantastic post, thanks. I do a lot of Web performance testing and this is helpful. Caching is always on our minds.

  10. One way to do a (very) hard refresh in Chrome in installing the extension Clear Cache, and setting it to remove everything, and after a clear reload the current tab. That way you have a very effective ‘hard reload’ button.

  11. @Todd

    I was just reading about that for Firefox.

    https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage

    And here is a note from that page from Mozilla:

    “When the browser goes into private browsing mode, a new, temporary database is created to store local storage data; this database is emptied, and is thrown away when private browsing mode is turned off.”

    I take it that means local data is persistent over a private mode session, at least for Firefox.

  12. very handy however i need to do this via script to use on multiple machines and user profiles is there any way possible?

  13. In firefox recent version (released after january 2013), you can go to Tools > Clear Recent History and clear “Site Preferences”. It will remove permissions of Offline cache.