Marfeel Javascript SDK performance and loading strategy

The Marfeel SDK loads entirely asynchronously and has zero impact on page smoothness. Below are the specific design decisions that ensure high performance across all browsers.

MarfeelSDK placement on the page

The marfeel-sdk is entirely asynchronous, giving you complete freedom over where to place it on your page.

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

Marfeel Compass works equally well regardless of where the SDK is placed, and your pages’ performance remains unaffected.

ES6 modules for progressive enhancement

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

<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 load a native ES6 SDK using built-in browser features.
2. Legacy browsers load an ES5 SDK with polyfills and transpiled code.

This approach ensures the most minimal and performant code is served to the majority of browsers while still providing a fallback for older ones.

Timing-Allow-Origin header

If you want to audit and measure Marfeel JS performance, Marfeel includes the Timing-Allow-Origin response header on all resources.

The Timing-Allow-Origin header specifies which origins are allowed to see values of attributes retrieved via the Resource Timing API. Without this header, cross-origin restrictions would report those values as zero.

Batched tracking requests with adaptive polling

CompassJS polls your page at specific intervals to gather interaction data, with polls becoming less frequent as the reader spends more time on a page. Marfeel does not actively listen to scroll events, avoiding unnecessary resource consumption.

Compass tracking network requests fire 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 adaptive polling strategy results in no impact on the user’s screen refresh rate and a jank-free reading experience.

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

Does the Marfeel SDK affect page performance?

No. The Marfeel SDK loads entirely asynchronously and does not listen to scroll events, so it has zero impact on screen refresh rate or page smoothness.

How does the Marfeel SDK handle modern and legacy browsers?

The SDK uses ES6 module support for progressive enhancement. Modern browsers load a native ES6 build, while legacy browsers receive an ES5 version with polyfills and transpiled code, ensuring minimal payload for each browser type.

How often does Compass send tracking requests?

Compass polls at increasing intervals: once on page load, once after 5 seconds, once after 15 seconds, then every 15 seconds for 4 minutes, and every 20 seconds thereafter. A final request fires when the page unloads.