Download and Buy Now Link

Using HttpWatch to Measure Page Load Times for New and Existing Users

May 14, 2008

If you’re tuning a web page’s performance there are two types of visitors that you need to be concerned about:

  1. A new visitor to your site who won’t have any of your pages, scripts, CSS or images in their browser cache.
  2. An existing user of your site who will have your cacheable pages, scripts, CSS or images in their browser cache.

Visitor type 1) is said to be in the Empty Cache state and Vistor type 2) is said to be in the Primed Cache state. Optimizing for visitors with an empty cache is important as their initial impressions of your site will be affected by how quickly its pages are loaded.

The performance of any page is never going to worse for visitors with a primed cache, but minimizing the load on your site caused by existing users through the use of effective caching will reduce your bandwidth costs and server load.

Your can manually simulate these two scenarios with HttpWatch. For example, you could run an Empty Cache test on our home page (www.httpwatch.com) using these steps:

  • Open a HttpWatch in IE and click on Tools->Clear Cache or use the keyboard shortcut Alt+C. If you haven’t cleared your browser cache recently this could take a few minutes:
    Clear Cache
  • Click on Record and go to www.httpwatch.com
  • HttpWatch will then display a time chart with the page load time:
    Empty Cache Test

To run the Primed Cache test you would first need to ensure that the page has already been visited and then re-visit it in a new instance of IE. You shouldn’t re-use the same instance of IE because there may some images held in memory from the first visit to the page. To perform the Primed Cache test you would need to:

  • Visit www.httpwatch.com in IE to prime the cache
  • Close down IE and start a new instance
  • Open HttpWatch and click on Record
  • Go to www.httpwatch.com
  • HttpWatch will then display a time chart with the page load time:
    Primed Cache Test

Of course, with a test like this you really want to run it automatically. The HttpWatch Automation interface (document in the HttpWatch Help file) allows you to do this in a few lines of code. Here’s the code in C# for the Empty Cache test:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 6.x
//
 
using HttpWatch;                
 
namespace EmptyCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "http://www.httpwatch.com";
            Controller controller = new Controller();
 
            // Create an instance of IE (For Firefox use
            // controller.Firefox.New("") )
            Plugin plugin = controller.IE.New();                
 
            // Clear out all existing cache entries
            plugin.ClearCache();                
 
            plugin.Record();
            plugin.GotoURL(url);                
 
            // Wait for the page to download
            controller.Wait(plugin, -1);                
 
            plugin.Stop();                
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;                
 
            System.Console.WriteLine( "The empty cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");                
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");                
 
            plugin.CloseBrowser();
        }
    }
}

and here’s the Primed Cache test. Notice how we use controller.IE.New() a second time to ensure that a new instance of IE is started:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 6.x
//
using HttpWatch;               
 
namespace PrimedCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "http://www.httpwatch.com";
            Controller controller = new Controller();               
 
            // Create an instance of IE (For Firefox use
            // controller.Firefox.New("") )
            Plugin plugin = controller.IE.New();               
 
            // Visit the page to prime the cache
            plugin.GotoURL(url);
            controller.Wait(plugin, -1);               
 
            // Shutdown IE and create a new instance
            plugin.CloseBrowser();
            plugin = controller.IE.New();               
 
            plugin.Record();               
 
            // Visit the page a second time with the cache primed
            plugin.GotoURL(url);
            controller.Wait(plugin, -1);               
 
            plugin.Stop();               
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;               
 
            System.Console.WriteLine( "The primed cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");               
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");               
 
            plugin.CloseBrowser();
        }
    }
}

BTW, everything we’ve mentioned in this blog post works with the free Basic Edition of HttpWatch as well as the Professional Edition.

24 Comments

  • The issue with starting a new instance of IE is that the session gets killed. You’d have to re-login, or in the case of a form, possibly resubmit data to get back to the page you want to check.

    The reason why you need to restart the session (which is missing from the article) is due to the way IE handles its cache. If you hit refresh, or navigate to the page without closing the instance, you’d get inconsistent results. For details, check out: http://msdn2.microsoft.com/en-us/library/bb250442(VS.85).aspx

    For these tests, you’d also want to make sure your cache setting is set to “Automatically.” A different setting will also bring different results.

  • Tad,

    That’s a good point about having to re-authenticate or re-submit data to get to certain pages. We tried to simplify the post by just showing how you could test something like a home page.

    The reason for having to restart IE is the image cache (see http://blog.httpwatch.com/2008/02/27/image-caching-in-internet-explorer/ ).

    You can cause a new browser session to be created by using ‘Clear All Cookies’ or ‘Clear Session Cookies’ in HttpWatch. This has the side effect of creating a new session. If you then navigate to another location e.g. about:blank before clearing the session you should see the normal automatic cache validation when you re-visit the page.

    Unfortunately, the IE image cache is not reset when a new browser session is created. So you are forced to restart IE if you want to replicate a primed cache visit and see which images are accessed by IE.

  • How to automate the firefox browser using HTTPWatch means how to create
    // Create an instance of Firefox

  • When I create an instance of Firefox
    // Create an instance of IE
    Plugin plugin = control.New();

    It return ” System.Runtime.InteropServices.COMException(0x80004005): Internet Explorer terminated (Error 1) ”

    My system is Vista & IE8,I wonder that this API could work well with IE8.

  • Amethyst,

    For IE 8 please use HttpWatch 6.1.32 or later. If you have a license for HttpWatch Professional 5.x please install version 5.3.33 or later

  • We can measure load time for any page using url, but how can we meaure load time for a search
    for example :
    enter some keyword then click on search button then search results page, how can we automate this using httpwatch and visual basic. Please help me

  • Thanks for your input….is there any way out for filling and submitting web forms using visual basic and then measuring the load time using httpwatch.

  • I just found the way to install IE7 along with IE6 on the same PC for testing any performance differences between them. Is it possible to create different instances of IE versions?

  • Do HttpWatch (either 6.x or 7.x) allow exporting the log files to HAR format?

    Here is what I am trying to accomplish. Using Ruby+Watir, walk through a few pages and try to parse the page performance numbers. To be able to do this, the files need to be in HAR format. Hence I was wondering if either versions have this capability.

  • If you want to see request times only for non-cache requests, you can clear cache immediately before requesting the page:

    Set plugin = control.IE.New
    plugin.clearcache()

  • Hi,

    Is it same to assume

    Complete Browser Rendering time = Page Load – Render Start

    I am interested in fetching Browser rendering time using http watch automation library.

  • Mandy,

    Unfortunately, things aren’t that simple in a multithreaded application like a browser. It will be rendering a page at the same time as it is downloading the page content and its embedded resources. So it’s not really possible to separate out rendering time by looking at the high level events such as Page Load and Render Start.

  • Oh ok, You mean even if page is completely rendered, by displaying ‘done’ in left bottom of browser window; it might keep on downloading some dependent requests?
    So is there any event indicating render complete, I am okay with approximate rendering time. I will be executing my tests with the same environment but with different browser versions for benchmarking.

    Btw.. thanks for your quick response, this tool is really nice, developer friendly…

  • Yes, activity can continue in the page after ‘Done’ is displayed. Unfortunately, there is no render complete event available in IE or Firefox.

    Thanks for your comments about HttpWatch.

  • So, the time that is displayed in httpWatch is the total time a page takes to render itself?