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.
2. The servers for Example.com process the request and return the following HTML page
Here’s what we’ve recorded so far:
- Network: includes the amount of time it took for Sarah’s
GETrequest 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.)
Now that we know how these metrics are recorded, we can use real user monitoring to improve our response time!