2 December 2022

Smashing Web Application Performance Issues.

This week, I’ve looked deeper into Boomerang, a JS library used to automate the tracking of user performance monitoring.

My goal is to get rid of performance issues on my web-app. The first step is to identify precisely what’s going on. It means monitoring and tracking all that is happening and being able to filter through information to know how it is affecting different types of browsers, users, assets and animations.

Actually, I have not found so many RUM libraries, and Boomerang is the most production-ready one. Boomerang measures many metrics relating to your end user web browsing experience. While many timings come directly as collectable, you can still add your own timings. And you can then send all the information collected to the endpoint of your choice with its beacon.

Boomerang was initially developed by the Yahoo performance team before being open-sourced. The library is today kept up to date by SOASTA, a Google Analytics competitor. I’m going to share in this post how to start quickly with the Boomerang library and launch your first tests on your web app.

I) Build the library using Grunt

You’ll be very surprised to learn the first thing that needs to be done is building the library…

Boomerang is modular and provides useful plugins. To begin working with it you first need to choose which plugin you want to use. For a first start, the most useful ones are the following:

RT: the RoundTrip plugin that measures page load time
Restiming: a plugin that collects performance data from user agents. It is built following the W3C Resource Timing specification
Navtiming: A plugin that collects performance data from user browsers. It also uses the the W3C Navigation Timing specification

The official documentation uses “make” to build the library. But a grunt task is also available. Let’s use it.

# get sources

git clone https://github.com/SOASTA/boomerang.git && cd boomerang

# get dependencies (mainly grunt)

npm install

# choose plugins (RT, restiming and navtiming)

curl -OL https://gist.githubusercontent.com/gpolaert/dd435c1ddcc37153217a6bf3e8f61499/raw/fe56ec14aabdf3347abb47d070882a34ff0ad9b2/plugins.json

# build the library

grunt build

The minified script is directly available into the `build` directory.

II) Add Boomerang to your code

There is 3 ways to include the library to your app. The good one, the bad one and the ugly one, and I will use the latter one for this post.

The method is in fact not so bad, and on the plus side, it allows you to make quick experiments as I’m going to show you. You will get a better understanding of what you can get before deep-diving in the other 2 methods that are harder to set up but more efficient as their library is asynchronously loaded (meaning no performance impact on your code).



<head>

<title>Example to report User Monitoring performance</title>

<scriptsrc=”path/to/boomerang.min.js”></script>

// set up boomerang

BOOMR.init({

// here comes the Boomerang configuration, see bellow 🙂

});

</script> …

</head>

…

III) Configure Boomerang to get your metrics flowing

Boomerang and its plugins merge all metrics into an object called a beacon. So you need to at least provide a URL endpoint to Boomerang for receiving all beacons. I’d recommend you to use RequestBin in order to quickly create an endpoint for your tests. So, navigate to their website and generate your bin url:

BOOMR.init({

beacon_url: <a href=”http://requestb.in/1m68z8a1″ target=”_blank”>”http://requestb.in/1m68z8a1</a>”,

beacon_type: “POST”

});

And this is it! You are now ready to get performance metrics from all of your users.

IV) What kind of metrics can I expect to find in the beacon?

You’ll find lots of useful metrics, and I’m sharing below the most interesting ones in my opinion.

Round Trip plugin metrics

This plugin allows you to add your custom timer to the code. The example below measures loaded time for both the “head” and “body” parts in addition to the default timer provided with the plugin:

<head>

<title>Google Phone Gallery</title>

BOOMR.init({

beacon_url: <a href=”http://requestb.in/1m68z8a1″ target=”_blank”>”http://requestb.in/1m68z8a1</a>”,

beacon_type: “POST”

});

BOOMR.plugins.RT.startTimer(“t_head”);

</script>

<scriptsrc=”b/jquery/dist/jquery.js”></script>

<scriptsrc=”b/angular/angular.js”></script>

<scriptsrc=”b/angular-animate/a-animate.js”></script>

<scriptsrc=”b/angular-resource/a-resource.js”></script>

<scriptsrc=”b/angular-route/a-route.js”></script>

<scriptsrc=”app.module.js”></script>

<scriptsrc=”app.config.js”></script>

<scriptsrc=”app.animations.js”></script>

<scriptsrc=”core/core.module.js”></script>

BOOMR.plugins.RT.endTimer(“t_head”).startTimer(“t_body”);

</script>

</head>

<body>

</div>

BOOMR.plugins.RT.endTimer(“t_body”);

</script>

</body>

Navigation Timing plugin metrics

The Navtiming plugin reports metrics coming from the W3C navigation API. The picture below shows you all markers that get attached to the beacon:

3. Resource Timing plugin metrics

This plugin might be the most useful one! If the user’s browser is compatible (ie if they are not using Safari), the W3C Resource Timing API reports loaded times for each asset: css, image, xmlhttprequest, etc.
Just run the following command to get a spoiler in your browser console.

performance.getEntries().forEach(function(e) {

console.debug(e.name, e);

});