Home Brewing R.U.M - Analyzing application performance with real user monitoring
•
7 likes•3,009 views
It is a true fact that performance experienced by real world users has direct impact on our application adoption rate.Good performance increases retention and conversion rates. Our primary aim should be to deliver value to an user, and make sure that they get the best possible user experience that delights them, and keeps them coming back for more. In this regard, monitoring user behaviour becomes imperative as it provides key metrics for web application performance. While developing web applications, developers test in their local environments, and also do user acceptance testing. But what happens once the application goes out onto the real world? The case I’m making here talks about analysing application performance once its in the hands of real users. This is where real user monitoring a.k.a R.U.M comes in picture. R.U.M captures performance metrics such as bandwidth and page/view load times, user location, device type, carrier speed, application errors, Ajax request and application usage along with custom performance metrics that provides actionable business intelligence. In R.U.M, we can then visualize performance over time for key metrics based on different average, geometric mean, median or percentile calculations. The performance data can be drilled down further on the basis of geography, device, error encountered, speed etc.
Report
Share
Related slideshows
Home Brewing R.U.M - Analyzing application performance with real user monitoring
- 1. Home Brewing R.U.M Image source: http://en.wikipedia.org/wiki/Samuel_Adams_%28beer%29#mediaviewer/File:Samadams.jpg
- 2. Making developers happy since eternity Image source: http://en.wikipedia.org/wiki/List_of_rum_producers#mediaviewer/File:Rum_display_in_liquor_store.jpg
- 3. Real User Monitoring What is Image source: https://www.flickr.com/photos/madmask/421679860/in/gallery-zrav-72157623823227993/
- 4. Real User Monitoring It is a technology for collecting performance metrics directly from the browser of an end user and sending it to a collection point for analysis.
- 6. Real User Monitoring Why Image source: https://www.flickr.com/photos/tonythemisfit/3293309513
- 7. There’s Money in the metrics Image source: https://www.flickr.com/photos/epsos/8463683689
- 8. Expectations Image source: https://www.flickr.com/photos/frosch50/13026387874
- 9. Performance is differentiator Image source: https://www.flickr.com/photos/johnnieb/2289615538
- 10. Real User Monitoring How Image source: https://www.flickr.com/photos/pennuja/5386712834
- 11. Visualization Core Module Error Page Load Ajax Call Custom Analytic Engine Back End Front End
- 12. Page Load performance Image source: https://www.flickr.com/photos/telexa/2436798809
- 13. Measuring Page Load Performance 1. Request (Link clicked) 2. Request reaches server 3. Server finishes execution 4. Browser Receives HTML 5. HTML processing finished 6. Page Rendered Network Server DOM Processing Page Rendering
- 14. Cookies Image source: https://www.flickr.com/photos/seriousbri/4020277369
- 15. Cookies Network = Time between beforeunload event and first byte received. DOM Processing Page Rendering = Time between first byte received & DOMContentLoaded event. = Time between DOMContentLoaded event & load event.
- 16. Performance timing Api Image source: https://www.flickr.com/photos/eflon/5079163335
- 17. window.performance.timing redirect App Cache Prompt for unload DNS TCP Request Response Processing onLoad unload
- 18. AJAX Call performance Image source: https://www.flickr.com/photos/respres/2544979655
- 19. AJAX call performance var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","remoteResource.txt",true); xmlhttp.send();
- 20. Measuring AJAX Call Performance 0 1 2 3 4 Unsent Opened Headers Received Loading Done Ready State value Time to first byte = Time between when send method is called and when first time ready state value is 3 (Loading) Downloading Time = Time between first time ready state value is 3 (Loading) and when it is 4 (Done)
- 21. Monkey Patching Image source: https://www.flickr.com/photos/epsos/8463683689
- 22. Monkey Patching XMLHttpRequest _XMLHttpRequest = window.XMLHttpRequest; // Monkey Patched XMLHttpRequest Version window.XMLHttpRequest = function() { var req = new _XMLHttpRequest; // Monkey Patched version of open() and send() methods return req; };
- 23. Monkey Patching XMLHttpRequest _open = req.open; req.open = function(type, url, async) { req.addEventListener('readystatechange', function() { // Log timing for every state change }, false); req.addEventListener('loadend', function(event) { // Send all timing data to remote server }, false); return _open.apply(req, arguments); };
- 24. Monkey Patching XMLHttpRequest _send = req.send; req.send = function() { // Log timing when send is called return _send.apply(req, arguments); }
- 25. Performance getEntriesByType Api Image source: https://www.flickr.com/photos/ericflexyourhead/14083106147
- 26. HTML5 Performance Api window.performance.getEntriesByType('resource') Redirect App Cache DNS TCP Request Response
- 27. Error handling Image source: http://en.wikipedia.org/wiki/Coccinellidae#mediaviewer/File:Coccinella_magnifica01.jpg
- 28. window.onError Error Message Line Number File Name Stack trace Char number Work for cross origin scripts
- 29. try catch block Error Message Line Number File Name Stack trace Char number Work for cross origin scripts
- 30. Wrapper for Reporting Error function wrapper(fn) { return function() { try{ return fn.apply(this,arguments); }catch(e) { repportError(e); throw e; } }; }
- 31. Wrapper for Reporting Error var wrappedFunction = wrapper(function(){ // function definition });
- 32. Challenges in error tracking Image source: https://www.flickr.com/photos/chrismatos/6784152671
- 33. Challenges in Error Tracking ● Different browsers provide different stack trace information. ● Steps to reproduce Error. ● Need to manually wrap each function.
- 34. Challenges in Error Tracking Different browser provides different stack trace information. Tracekit.js / Stacktrace.js are well tested libraries which abstract this.
- 35. Challenges in Error Tracking Steps to reproduce error. Capture last X events in array like Input or click event and report them back along with error information.
- 36. Challenges in Error Tracking document.querySelector('input').addEventListener('change', function(e){ // Adding it to the event array });
- 37. Challenges in Error Tracking Need to manually wrap each function. Using instrumentation at build time or script serving time it can be automated.
- 38. Instrumenting JavaScript Image source: http://combathelo.blogspot.in/2010/05/multi-page-displays-wep-gun-submode.html
- 39. JavaScript Engine Building Blocks Parser Runtime Syntax Tree Source Code VM
- 40. Abstract Syntax Tree Number var a = 1 ; Equal Sign Identifier Keyword Variable Declaration Identifier Literal Constant
- 41. Instrumentation Esprima (Parser) Instrumentor Escodegen (Generator) JavaScript code Transformed JavaScript AST Transformed code JavaScript AST
- 42. Instrumentation Welcome Falafel library
- 43. Analysis & Visualization Image source: http://monster-solutions.net/2014/07/03/elk-stack-logging-solutions-now-available/
- 44. Analysis & Visualization ● Elastic Search ● Log Stash ● Kibana
- 45. Other use cases of R.U.M Image source: http://monster-solutions.net/2014/07/03/elk-stack-logging-solutions-now-available/
- 47. Feedback: http://bit.ly/jsfoo-rum-feedback Slides: http://bit.ly/jsfoo-rum-slides @ankit0rastogi Image source: https://www.flickr.com/photos/theilluminated/5386099858