Getting to know your Userswith a little RUMSCOTT POVLOT

Introduction Scott Povlot Technical ArchitectAutotrader

Twitter: @spovlot

Browser Testing and Monitoring Actual Browsers

Browser Metrics

Synthetic Monitoring Scheduled/Consistent Known Environment

◦ Browser◦ OS◦ Network Speed◦ Fixed Locations

Good for availability monitoring

Real User Monitoring (User) Any Browser Any Where Any Time

Real Users◦ How your site works in the “real world”

Broad View of the WorldUsing JavaScript and a beacon

Latency the delay from input into a system to desired outcome

Navigation Timing http://www.w3.org/TR/navigation-timing/

Not supported on iOS and older browsers

Resource Timing http://www.w3.org/TR/resource-timing/

Not supported on iOS, Safari and older browsers

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;

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;

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

Boomerang https://github.com/lognormal/boomerang/

Documentation http://www.lognormal.com/boomerang/doc/

Philip Tellis@bluesmoonSOASTA, Inc.Chief Architect & RUM Distiller

Boomerang Plugins Round Trip

Bandwidth & Latency

DNS

Navigation Timing

Resource Timing

IPv6

Clicks

AutoXHR

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>

Boomerang Customization <script type="text/javascript">

BOOMR.subscribe('before_beacon', function(o) {

BOOMR.addVar({

"bucket": "test#1",

"page_id": 123

});

});

</script>

RUM Beacon GET

or POST (if over 2000 char)

/beacon/rum?rt.start=navigation&rt.tstart=1438653301740&rt.bstart=1438653304560&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=1438653305779&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

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)

Beacon Reciever BoomCatch

◦ https://github.com/nature/boomcatch/

SOASTA mPulse

Your Custom Server

Now What? Analyze, Analyze, Analyze

And Then? Triangulate with Synthetic Monitoring Results

Optimize Performance

Rinse and Repeat

Appendix

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" } }}