Logmatic.io Blog

Smashing Web Application
Performance Issues

smashing app performance

Or more simply, Monitoring End User Experience
 RUM with Boomerang

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:

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

direction performance

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

   <script src="path/to/boomerang.min.js"></script>
       // set up boomerang
        // here comes the Boomerang configuration, see bellow 🙂
   </script>    ...

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:

 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.

  1. Round Trip plugin metrics
  2. 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:

       <meta charset="utf-8">
       <title>Google Phone Gallery</title>
       <script src="boomerang.min.js">
               beacon_url: <a href="http://requestb.in/1m68z8a1" target="_blank">"http://requestb.in/1m68z8a1</a>",
               beacon_type: "POST"
       <script src="b/jquery/dist/jquery.js"></script>
       <script src="b/angular/angular.js"></script>
       <script src="b/angular-animate/a-animate.js"></script>
       <script src="b/angular-resource/a-resource.js"></script>
       <script src="b/angular-route/a-route.js"></script>
       <script src="app.module.js"></script>
       <script src="app.config.js"></script>
       <script src="app.animations.js"></script>
       <script src="core/core.module.js"></script>
    <div class="view-container">
       <div ng-view class="view-frame"></div>

    For more details on the plugin, please check their documentation.

  3. Navigation Timing plugin metrics
  4. The Navtiming plugin reports metrics coming from the W3C navigation API. The picture below shows you all markers that get attached to the beacon:
    navigation api time
    All metric names are encoded by Boomerang and their description available on the API page.

  5. Resource Timing plugin metrics
  6. 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);

    By default, Boomerang encodes this data as a trie. To convert metrics as something more friendly, use the following decoder: logmatic/logmatic-rum-js.

See you soon

I’m planning on sharing how to customize the beacon metrics and how to monitor a single page application (Angular) next week, so stay tuned! And if you’re curious, have a look at logmatic-rum-js, the easiest way we found to grab all logs and metrics from user devices (mobile, browser) to Logmatic.io.

Related Posts