Marfeel Javascript SDK Performance

Configuration Platform
1

The Marfeel SDK is built with performance in mind, and doesn’t affect pages’ smoothness. Here are some of the points taken into consideration:

MarfeelSDK Placement on the page

marfeel-sdk is entirely asynchronous, and you have complete freedom as to where to place it on your page.

You can add marfeel-sdk as a custom HTML tag with Google Tag Manager, or directly include it in your HTML pages with your other scripts.

Marfeel Compass works just as well anywhere it is placed on the page, and your pages’ performance doesn’t suffer in any case.

Using ES6 modules for progressive enhancement

When you add the Marfeel Javascript SDK to a page it adds two script tags to load asynchronously the marfeel-sdk.

<script type="module" src="https://sdk.mrf.io/statics/marfeel-sdk.js?id=1234"></script>
<script nomodule src="https://sdk.mrf.io/statics/marfeel-sdk.es5.js?id=1234"></script>

Marfeel relies on browser ES6 support for feature detection and progressive enhancement:

  1. Modern browsers will load an ES6 SDK using native browser features.
  2. Legacy browsers will load an ES5 SDK with polyfills and transpiled code.

This allows Marfeel to always serve the most minimal and performant code for most of the browsers while providing a fall-back to olders browsers.

Timing-allow-origin header

In case you want to audit and measure the Marfeel JS performance, Marfeel adds the Timing-Allow-Origin response header to all resources.

The timing-allow-origin header specifies origins that are allowed to see values of attributes retrieved via features of the Resource Timing API, which would otherwise be reported as zero due to cross-origin restrictions.

Tracking user interactions in batch requests

CompassJS polls your page at specific intervals to gather information. The polls are fewer and further in-between as the reader spends more time on a page. Marfeel doesn’t actively listen to the reader’s scroll, avoiding unnecessary resource consumption.

Compass tracking network requests happens at the following times:

  1. Once when the page opens,
  2. Once 5 seconds later,
  3. Once 10 seconds after the second event,
  4. For the next 4 minutes, tracking events are sent every 15 seconds,
  5. If the reader is still on the page, any additional tracking event is sent every 20 seconds.
  6. Once right before the user leaves, as the page unloads

This polling strategy results in no impact on the user’s screen refresh rate, and a jank-free experience for the reader.

You can read in details what information is sent to Compass with each request.