Got cache? Or, why can’t I see the changes I’ve made on my website?

pic_disp.phpNowadays, many of us maintain our own blogs or websites, using various tools, either on our computer or online.  Over the past 3 or 4 years that I’ve been creating websites, one of the issues raised by many frustrated users in user forums is “I don’t see my changes!!!”.

When you are developing or editing your blog or website using online tools (such as WordPress, Joomla, Google Blogger) the answer usually comes down to one of two things, both related to cache:

  1. The web browser is presenting the older view of your page from the data saved in cache.
  2. You are using the back button on your browser instead of refreshing the page.

Or, (only occasionally) you’re too fast for the host server.

What does that mean, what does it do, and how do I overcome it, you ask?  Well, let me give you some background information and examples to illustrate.

First, what do you mean by a browser?  Though this may seem like an unnecessary question, not everyone uses the term correctly.  So here goes – a browser is a software application running on your computer for retrieving, presenting and traversing information resources on the World Wide Web. Think Safari, Firefox, Google Chrome.

What is cache?  Well, it’s an area of high speed memory set aside to store frequently accessed data. When it comes to websites, your browser stores pages you’ve recently visited in web cache, so that when you go back to that page in the near future, the browser can get the page from cache, instead of having to go back out to the internet to find the page again.  This is one of the ways browsers can speed up your internet experience.

The assumption here is that the website page probably hasn’t changed in the few minutes since you last looked at it.

But you’re making changes – right?  And you want to see your changes.  So you need to Empty Cache.

If you empty cache before looking at your page, the browser will go out to the internet and get a new copy of the page.  That way, barring other problems, you will see the page with your changes.  What might those other problems be?  Too many to go into here; but perhaps you didn’t save your change, or you didn’t publish your page.  But if you’ve done everything right and you still can’t see your change, you probably need to empty cache.

So, how do I empty cache?  That depends on the browser you’re using.  And though you may think hitting the Refresh icon Unknown  will give you a completely new copy, it may not.  Some data that was cached may still be presented.  So your best bet is to empty cache.

In Safari (my favorite), you used to be able to go to the Safari menu and click on a menu item to clear cache.  In recent versions of Safari, Apple has changed and moved that capability.  You can do one of two things:

From the Safari Menu, choose Reset Safari.  That will open a new window, shown below.  Choosing either Clear History or Remove All Website Data will accomplish clearing the cache, but may remove some items (such as history or cookies) that you don’t want removed.

(Click on images for a larger view.)

Screen Shot 2014-03-06 at 3.38.13 PM

 

Or, my preferred method as a web developer, is to enable the Develop Menu item in Safari.  You do that by going to Safari Preferences and choosing the Advanced tab.  At the bottom of that window, you can check a box to Show Develop Menu in Menu Bar

Screen Shot 2014-03-06 at 3.40.46 PM

 

Once you have the Develop Menu in place, you can click on that Menu, and choose Empty Caches.  In earlier versions of Safari, there has been some discussion that this doesn’t always work.  However, I believe that in the current version of Safari (7.0) it is working

But I think the best benefit that the Safari Develop Menu brings is the ability to Disable Caches.  This will prevent Safari from caching data.  Therefore, as you’re developing and testing changes to your website, you don’t need to reset or clear cache each time you make a change.  Safari won’t cache the data with this setting turned on, and you can go merrily along your way making changes and knowing you’re seeing a fresh view each time you view a page.

One caveat; Disable Caches only stays checked until you quit Safari.   Though a touch annoying, this is a good thing, because if it remained checked, any web browsing you did would not be cached, and this could slow down your browsing experience.  So the default is not checked – you have to check it each time you go into Safari.

Screen Shot 2014-03-06 at 3.47.17 PM

 

The Safari Develop Menu has a lot of other cool goodies, like the Web Inspector.  You can learn more about the Develop tools by going to https://developer.apple.com/safari/

 

In Google Chrome, you click on the Chrome Menu, choose Clear Browsing Data, and it brings up some settings to allow you to choose what you clear.  Choose Cached Images and Files, and click on the Clear Browsing Data button.

Screen Shot 2014-03-06 at 3.03.34 PM        Screen Shot 2014-03-06 at 2.56.50 PM

 

In Firefox, go to Firefox Preferences, and choose the Advanced Setting, then the Network tab.  There you will see a section on Clearing Cache.  Click on the Clear Now button.

Screen Shot 2014-03-06 at 3.14.19 PM

Both Google Chrome and Firefox have Developer Menus, but I haven’t been able to find a capability to Disable Cache, as in Safari.

So what’s that about using the Back Button?  Well, in most online applications, using the Back Button on your browser doesn’t really activate the application, it simply goes back to your prior location in the application, looking like it used to look.  So, for instance, if you add a new Page to your website, and then use the Back Button to go back to the list of Pages, you probably won’t see your new Page.  You need to actually click on the appropriate menu item or button in your application to see a new Page.   That’s what makes the application do its thing.  Just be sure you’re looking at a refreshed page in your online application (such as WordPress) before you panic about having lost your new Page.

Lastly, though unlikely, you could be too fast for the Host Server.  If the server is slow to accept your changes, even though you have disabled caches you may not see your changes.  Always give it a second try (refresh the page Unknown )  before you start to sweat.

web-design-icon3-300x190    Happy Developing!