In the wild, a user’s experience of your website can vary greatly due to network latency, browser rendering and your backend server processing. You need to be able to measure the user experience with standard metrics. Luckily your favorite web tool, the browser, can provide this data to you. Sending this browser data back to your site is called Real User Monitoring (RUM). In this session, we will explore how to measure web performance that your users are experiencing. We will cover the W3C standards for timings and how to analyze them. How can you capture this information from your user’s browser and transmit that back to your webserver for analysis? We will look at an open source project Boomerang which provides JavaScript code that you can run in your web pages to gather this data. Then we will review a few options for customization and analysis of the data.

1. Getting to know your Users
with a little RUM
SCOTT POVLOT

2. Introduction
Scott Povlot
Technical Architect
Autotrader
Twitter: @spovlot

9. Browser Testing and Monitoring
Actual Browsers
Browser Metrics

11. Synthetic Monitoring
Scheduled/Consistent
Known Environment
◦ Browser
◦ OS
◦ Network Speed
◦ Fixed Locations
Good for availability monitoring

12. Real User Monitoring (User)
Any Browser
Any Where
Any Time
Real Users
◦ How your site works in the “real world”
Broad View of the World
Using JavaScript and a beacon

13. Latency
the delay from input into a system to desired outcome

14. Navigation Timing
http://www.w3.org/TR/navigation-timing/
Not supported on iOS and older browsers

16. Resource Timing
http://www.w3.org/TR/resource-timing/
Not supported on iOS, Safari and older browsers

19. Navigation Timing – JavaScript Sample
// Navigation Timing
var t = performance.timing,
pageloadtime = t.loadEventStart - t.navigationStart,
dns = t.domainLookupEnd - t.domainLookupStart,
tcp = t.connectEnd - t.connectStart,
ttfb = t.responseStart - t.navigationStart;

20. Resource Timing – JavaScript Sample
// Resource Timing
var r0 = performance.getEntriesByType("resource")[0],
loadtime = r0.duration,
dns = r0.domainLookupEnd - r0.domainLookupStart,
tcp = r0.connectEnd - r0.connectStart,
ttfb = r0.responseStart - r0.startTime;

21. Real User Monitoring (RUM)
Gather Data via JavaScript
Send Data via Beacon
Receive Data on Server
Store and Analyze

27. Boomerang
https://github.com/lognormal/boomerang/
Documentation
http://www.lognormal.com/boomerang/doc/
Philip Tellis
@bluesmoon
SOASTA, Inc.
Chief Architect & RUM Distiller

28. Boomerang Plugins
Round Trip
Bandwidth & Latency
DNS
Navigation Timing
Resource Timing
IPv6
Clicks
AutoXHR

29. Boomerang JavaScript
<script src="boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
beacon_url: "http://yoursite.com/path/to/beacon.gif"
});
</script>

30. Boomerang Customization
<script type="text/javascript">
BOOMR.subscribe('before_beacon', function(o) {
BOOMR.addVar({
"bucket": "test#1",
"page_id": 123
});
});
</script>

31. RUM Beacon
GET
or POST (if over 2000 char)
/beacon/rum?rt.start=navigation&rt.tstart=1438653301740&rt.bstart=143865
3304560&rt.end=1438653308546&t_resp=1699&t_page=5107&t_done=6806&t_other=
t_domloaded%7C4172&nt_red_cnt=0&nt_nav_type=0&nt_nav_st=1438653301740&nt_
red_st=0&nt_red_end=0&nt_fet_st=1438653302905&nt_dns_st=1438653302905&nt_
dns_end=1438653302905&nt_con_st=1438653302905&nt_con_end=1438653302905&nt
_req_st=1438653302906&nt_res_st=1438653303439&nt_res_end=1438653303609&nt
_domloading=1438653303441&nt_domint=1438653305779&nt_domcontloaded_st=143
8653305779&nt_domcontloaded_end=1438653305912&nt_domcomp=1438653308530&nt
_load_st=1438653308530&nt_load_end=1438653308546&nt_unload_st=0&nt_unload
_end=0&nt_spdy=0&nt_cinf=http%2F1&nt_first_paint=1438653304.607804&v=0.9&
vis.st=visible&bucket=test#1&page_id=123

32. Boomerang Timings
t_done
◦ Roundtrip time: rt.end - rt.tstart
t_resp
◦ Backend time: (responseStart || t_fb_approx) - rt.tstart
t_page
◦ Frontend time: rt.end - (responseStart || t_fb_approx)

33. Beacon Reciever
BoomCatch
◦ https://github.com/nature/boomcatch/
SOASTA mPulse
Your Custom Server

34. Now What?
Analyze, Analyze, Analyze

37. And Then?
Triangulate with Synthetic Monitoring Results
Optimize Performance
Rinse and Repeat

39. Appendix

40. Compressing Resource Timing
http://www.soasta.com/blog/compressing-resourcetiming/
https://github.com/lognormal/boomerang/pull/44
{
"responseEnd":323.1100000002698,
"responseStart":300.5000000000000,
"requestStart":252.68599999981234,
"secureConnectionStart":0,
"connectEnd":0,
"connectStart":0,
"domainLookupEnd":0,
"domainLookupStart":0,
"redirectEnd":0,
"redirectStart":0,
"startTime":252.68599999981234,
"initiatorType":"script",
"name":"http://foo.com/js/foo.js"
}
{
"http://": {
"foo.com/": {
"js/foo.js": "370,1z,1c",
"css/foo.css": "48c,5k,14"
}
}
}