Click here to Skip to main content
15,350,015 members
Articles / Web Development / HTML
Posted 31 Aug 2011


8 bookmarked

Monitoring User Experience: A Single Page Lifecycle

31 Aug 2011CPOL2 min read
Ever wonder exactly how long it takes your customers to view your website? Let's break down a single page lifecycle and see exactly where time is spent delivering that page to your customers.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Real User Monitoring has been a big hit with customers old and new. Along with our announcement of Real User Monitoring, we published a post on how real user monitoring works.

Today we're going to walk through an example web page, and show exactly how the end user experience is displayed in our Real User Monitoring graphs.

First, let's look at the anatomy of a typical web request, and how we instrument it with Real User Monitoring:


Monitoring the User Experience, Step by Step

1. Sarah clicks on the “Silly Squirrels” page on

When Sarah clicks her mouse, her browser sends a request for the silly squirrel page.


2. The servers for process the request and return the following HTML page

  <title>Silly Squirrels!</title>
  <link rel="stylesheet" type="text/css" href="" />
  <h1>Silly Squirrels!</h1>  
  <img src="" class="silly"/>  
  <script src="" type="text/javascript"></script> 

Here's what we've recorded so far:

  • Network: includes the amount of time it took for Sarah's GET request to be sent to, as well as the time it took to deliver the HTML document back to her over the internet.
  • Web Application: includes the amount of time it took for the servers for to generate the silly_squirrels.html page for Sarah.
  • DOM Processing: includes the amount of time that Sarah's browser spent parsing and interpreting the HTML. This is measured by the browsers “DOMContent” event.

3. Sarah's browser renders the HTML page

In order to see just how silly this squirrel is, Sarah's browser now does the following:

  • GET
    – Downloads and parses the 28k CSS file
  • GET
    – Downloads and renders the 183k image file from the image host of
  • GET
    – Downloads and parses the 63k tracker.js file from a visitor tracking service

(Browsers are a bit more complicated that this, of course. Here's some more detailed information on how modern browsers work under the covers.)

These three GET requests, including the network time involved in fetching them and the time it takes for the browser to parse (JavaScript) and render them, shows up in the Page Rendering category of Real User Monitoring.

Now that we know how these metrics are recorded, we can use real user monitoring to improve our response time!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Brian Doll
United States United States
No Biography provided

Comments and Discussions

-- There are no messages in this forum --