Rootconf 2017

As the world is moving more and more towards javascript enabled applications, its becoming increasingly complex to define performance of online web applications. The typical page load time metric has proven to be unsuitable and has been replaced with other more suitable metrics like first paint and time to interactive. In this talk I would like the listeners to understand how we can measure performance of these single page applications, what are the prevailing metrics that make sense. I will dive deeper into a simple framework that can be developed inhouse to get measure, report and alert based on these metrics. In the end i would also like to go over a simple evaluation of some of the existing tools.

Outline

At the end of this talk listeners would be able to understand:
1.What is web performance monitoring and why it is important?
2.What are some of the important metrics that should be captured for Single page applications?
3.How can we develop/reuse a simple framework to measure these metrics?
4.Other tools that are available which can help us in measuring.
In the first few slides listeners will understand the different kinds of performance monitoring methodologies namely:
1.What is Synthetic monitoring and how it is typically implemented?
2.What is Real time performance monitoring and how it is implemented?
Why is Real time performance monitoring equally or more important than just using synthetic monitoring?
In the next 2-3 slides we will go over the importance of reporting performance data in percentiles instead of calculating averages.
We will also describe how page load times are misleading in the world of javascript apps and describe some of the relatively new metric terms like time to first paint and time to user interactive metrics have gained importance.
In the next few slides we will go over how the browser (using navigation timing, user timing and resource timing) enables us today to take these measurements.
At this time we will get into the details of building a framework which will allow the development team to measure the metrics described above using the api’s provided by the browser. We will briefly go over the algorithm that is used for
•fresh page load: (last executed user marker – navigation start)
•button click: [last executed user marker (for route change, ajax, js)- user marker (setup for click/route change)]
•Send data using a beacon.
Showcase some of the reports generated for RUM for performance
Describe shortcomings to this approach namely:
•Developers need to keep track of markers
We can define some extensions to this approach:
•Run a preprocessing module with an input(describing the workflow) to capture the render of sections that are above the fold and DOM mutations that take place because of ajax/user clicks.
•Put user timing markers at certain sections in the source code during the build step using a processing module. (described above)
•Including a javascript file (for the algorithm described above) which will be used to capture metrics.
Finally we will cover an evaluation of some tools that help in real user performance monitoring for single page applications.

Speaker bio

I’m a staff engineer at Intuit working in the e-commerce domain. I have been involved in the building of performant online applications.
I have worked on front-end architectures be it on migrating to Single page (javascript) applications, their performance or seo content generation for single page applications. At the same time I have also worked on the backend services from designing them to improving their performance, to monitoring them while in production.
https://www.linkedin.com/in/nitin-mehra-996ab515

Slides

https://www.slideshare.net/nitinmehra23/performance-monitoring-for-single-page-applications