Question
Does the JavaScript agent for EUM (adrum.js) always need to be placed in the header of the web page? Won't this potentially cause latency and load delays in loading the web page?
Answer
Our Engineering team has gone to great lengths to ensure that the initial adrum.js is very lightweight.
Additionally, the loading of adrum.js is synchronous and minimal filesize to prevent page loading interruptions. It calls out to the extension script, adrum-ext.js, asynchronously to allow rest of the page to load.
For most modern browsers, it does not matter where you copy adrum.js file on the page because they support navigation timing, which is what we use for the timings. So loading in the body for them is ok.
If you care about accurate timing for older browsers, mostly older IE and Safari, then you need to load the tag as early possible so the fall back timer can be started.
Using the adrum-start-time property gets us around the timing issues with older browsers. Place this JS snippet in the page's <head> and then place adrum.js at the bottom like so window["adrum-start-time"] = new Date().getTime(); More code examples here.
IE browsers tips:
- adrum.js loading placement in relation to <meta> tags definitely impacts pre-IE 9 browsers, therefore the recommended location for adrum.js is AFTER any <meta> tags
- With older browsers, load adrum.js as early as possible to avoid missing resource timing data
- Intranet settings in IE can prevent the JS agent from functioning properly
