Click here to Skip to main content
Click here to Skip to main content

Monitoring User Experience: A Single Page Lifecycle

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.

Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These reviews 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:

rum_timeline_diagram_aligned_web_res.jpg

Monitoring the User Experience, Step by Step

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

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

GET http://example.com/silly_squirrels.html

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

<html>
<head>
  <title>Silly Squirrels!</title>
  <link rel="stylesheet" type="text/css" href="http://www.codeproject.com/theme.css" />
</head>
<body>
  <h1>Silly Squirrels!</h1>  
  <img src="http://img.example.net/squirrel.jpg" class="silly"/>  
  <script src="http://tracking.example.net/tracker.js" type="text/javascript"></script> 
</body>
</html>

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 Example.com, 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 example.com 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 http://example.com/theme.css
    – Downloads and parses the 28k CSS file
  • GET http://img.example.net/squirrel.jpg
    – Downloads and renders the 183k image file from the image host of example.net
  • GET http://tracking.example.net/tracker.js
    – 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!

License

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 --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 31 Aug 2011
Article Copyright 2011 by Brian Doll
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid