Starting with the release of Strategy ONE (March 2024), dossiers are also known as dashboards.

Symptom

Users may feel it takes much longer to execute an embedded dossier than directly execute the dossier from Strategy Library Web, especially for the first time when there is no browser cache.

Cause

When trying to integrate a Strategy dossier into a custom web application with the embedding SDK, especially when using a custom authentication without requiring that users enter their credentials, all the needed files supporting the dossier functionalities have to be downloaded during the execution. When there is no browser cache (first-time execution), the downloading of these files may take quite long, depending on the Network, Web Server settings, etc. For example, in 10.11, with a 5Mbps network throughput and Web Server GZIP enabled, an embedded dossier may take as long as 30 seconds to be loaded for the first time.

Action

Our Engineering team is continuously working on improving the first-time execution performance. Compared to 10.11 version, 11.0 version has gained a more than 20% improvement as dynamically resource downloading has been implemented.   

Workaround

If the embedded dossier will not be executed directly when the custom web application is loaded, but later triggered by user actions (such as clicking a button), then a possible way to speed up the first-time dossier execution is to pre-load the needed file(s) in the custom web application page.
Imagine you have a custom web application ‘

app.html

’ which hosts the embedded Strategy dossier app, you can modify the html file to pre-load the file(s) required for executing the Strategy dossier. And it is suggested to only pre-load the JavaScript file '

mojo-dossier.js

', as it's the base file that other JavaScript files depend on.
To do this, firstly you need to check the file path and version. For example,

• In the browser, open browser’s Developer Tool, go to Network tab
  
• Execute the specific dossier in the current browser page
  
• Check the version of file ‘mojo-dossier.js’
  

 
Then, in the ‘app.html’ file, add the link to pre-load the JavaScript file in the end of the page body, before </body> tag. In this way, the pre-loading won’t block the rendering of the ‘app.html’ page. 

<script type="text/javascript" src="/StrategyLibrary/javascript/bundles/mojo-dossier.js?v=10.11.0100.15860"></script>

Based on the implementation of the 'app.html' file, you may also need to add ‘async’ or 'defer' attribute to the link to avoid the pre-loading blocking your page’s JavaScript execution, such as

<script async type="text/javascript" src="/StrategyLibrary/javascript/bundles/mojo-dossier.js?v=10.11.0100.15860"></script>

With this pre-load scenario, when user visits the host html page 'app.html', the ‘mojo-dossier.js’ file will be downloaded in background. When user takes action to execute the embedded dossier, the browser will get the file from browser cache, so the total time will be decreased to load the dossier. Even if the ‘mojo-dossier.js’ file has not been completely downloaded before user executes the embedded dossier, it will take advantage of the already completed part and continuous on the downloading.

How about adding more files to be pre-loaded?

You can check the most time-consuming JavaScript files from the browser's Developer tool, Network tab when executing a specific dossier.  For example: if you have a dossier which has New Graph Matrix visualizations (such as Waterfall) and Graph Matrix visualizations (such as bar chart), then, you can add below lines to the host html page

<script type="text/javascript" src="/StrategyLibrary/javascript/bundles/mojo-dossier.js?v=10.11.0100.15860"></script>
<script type="text/javascript" src="/StrategyLibrary/VisFramework/ngm/dist/bundle/ngm.js?v=10.11.0100.15860"></script>
<script type="text/javascript" src="/StrategyLibrary/javascript/bundles/vi-ngm.js?v=10.11.0100.15860"></script>
<script type="text/javascript" src="/StrategyLibrary/javascript/bundles/vi-gm.js?v=10.11.0100.15860"></script>

Please note the above list of scripts if added to your host html file, they may block the rendering of your host page. To avoid blocking the host page, in modern browsers that support prefetching, you can use the following way:

<link rel="prefetch" href="/StrategyLibrary/javascript/bundles/mojo-dossier.js?v=10.11.0100.15860">
<link rel="prefetch" href="/StrategyLibrary/VisFramework/ngm/dist/bundle/ngm.js?v=10.11.0100.15860">
<link rel="prefetch" href="/StrategyLibrary/javascript/bundles/vi-ngm.js?v=10.11.0100.15860">
<link rel="prefetch" href="/StrategyLibrary/javascript/bundles/vi-gm.js?v=10.11.0100.15860">

Please keep in mind that if you pre-load too many files, it may have negative impact on subsequent user actions that requires network resources.