Understanding Long Tasks data in the Real User Monitoring (RUM) world

Long Task is a new performance metric API that can be used for measuring the responsiveness of an application and helps developers to understand the bad user experience on the website. It enables detecting CPU intensive tasks that block the UI thread for extended periods (greater than 50 milliseconds) and block other critical tasks from being executed (eg: reacting to user input).

Background

I work at Elastic and one of the core contributors of Elastic APM Real User Monitoring Agent which provides detailed performance metrics and error tracking for web applications. We have recently added support for capturing Long Tasks using the API from the end-users as it does not suffer from bad performance implications like other timer based approaches and would help users stay under the RAIL performance model budgets.

Long Tasks example
JavaScript Self-Profiling API
Image for post
Image for post
Long Task from Zalando website

Demo — https://rum-profiler.now.sh/demo

How to run the profiler

JavaScript Self-Profiler API is experimental, It’s available only from Chrome 78 behind a flag-enable-blink-features=ExperimentalJProfiler. You can also head to chrome://flags/#enable-experimental-web-platform-features and enable it.

More opportunities

In addition to capturing the traces for long tasks, we can correlate the call stack information for all User Timing data.

Image for post
Image for post
Netflix User Timing trace

Some links…

Written by

Web Performance, JavaScript Fanatic, I watch videos at 2x speed 😎.. Work @elastic , ex @Zalando @Flipkart

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store