(untagged)

Monitoring User Experience: A Single Page Lifecycle

Brian Doll

31 Aug 2011

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.

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 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 has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here