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

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
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.

  1. Copy the below snippet of code and paste inside script tags in the head of any web page. The code should be placed in the head to start observing for long tasks as the buffered flag is not supported yet for long tasks.

More opportunities

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

Netflix User Timing trace

Some links…

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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
Vignesh Shanmugam

Vignesh Shanmugam

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