title: How to find loading bottleneck of a slow-loading SAPUI5 app
body: <p>I'm building a custom SAPUI5 app which consists of a seven diagrams (<code>sap.viz.ui5.controls.VizFrame</code>) in the page's header content (nested inside a <code>sap.suite.ui.commons.ChartContainer</code>) and a grid table (<code>sap.ui.table.Table</code>) in the main content area. The data for the charts and the table is provided by an OData V2 Service and the app is running stand-alone on the latest version (1.81.0).</p>
  <p>The problem is the long loading time of the app. It takes between 7 and 20 seconds. Is this common for a &quot;more complex&quot; app? I tried to find the bottleneck but everything looks fine. Many network requests are cached (they take 0ms), however, there is a slight delay in between them and I can't see why. Additionally, there is the following warning in the console, although I'm using the <code>data-sap-async=&quot;true&quot;</code> in my <code>index.html</code> file:</p>
  <blockquote>
  <p>[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check <a href="https://xhr.spec.whatwg.org/" rel="nofollow noreferrer">https://xhr.spec.whatwg.org/</a>. [syncXHRFix-dbg.js:211:15]</p>
  </blockquote>
  <h3>Code snippets of my index.html and manifest.json</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt;Loading - Customer Fact Sheet&lt;/title&gt;
          &lt;script id=&quot;sap-ui-bootstrap&quot;
              src=&quot;resources/sap-ui-core.js&quot;
              data-sap-ui-theme=&quot;sap_fiori_3&quot;
              data-sap-ui-resourceroots='{&quot;com.schott.fiori.customerfactsheet.customerfactsheet-fiori3&quot;: &quot;./&quot;}'
              data-sap-ui-compatVersion=&quot;edge&quot;
              data-sap-ui-oninit=&quot;module:sap/ui/core/ComponentSupport&quot;
              data-sap-ui-async=&quot;true&quot;
              data-sap-ui-frameOptions=&quot;trusted&quot;&gt;
          &lt;/script&gt;
          &lt;link href=&quot;https://www.schott.com/static/assets/gfx/favicon/SCHOTT_16.png&quot; rel=&quot;shortcut icon&quot; type=&quot;image/png&quot; /&gt;
      &lt;/head&gt;
      &lt;body class=&quot;sapUiBody&quot;&gt;
          &lt;div data-sap-ui-component data-name=&quot;com.schott.fiori.customerfactsheet.customerfactsheet-fiori3&quot; data-id=&quot;container&quot; data-settings='{&quot;id&quot; : &quot;customerfactsheet-fiori3&quot;}'&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;_version&quot;: &quot;1.12.0&quot;,
      &quot;sap.app&quot;: {
          &quot;id&quot;: &quot;com.schott.fiori.customerfactsheet.customerfactsheet-fiori3&quot;,
          &quot;type&quot;: &quot;application&quot;,
          &quot;i18n&quot;: &quot;i18n/i18n.properties&quot;,
          &quot;applicationVersion&quot;: {
              &quot;version&quot;: &quot;1.0.0&quot;
          },
          &quot;title&quot;: &quot;{{appTitle}}&quot;,
          &quot;description&quot;: &quot;{{appDescription}}&quot;,
          &quot;sourceTemplate&quot;: {
              &quot;id&quot;: &quot;servicecatalog.connectivityComponentForManifest&quot;,
              &quot;version&quot;: &quot;0.0.0&quot;
          },
          &quot;dataSources&quot;: {
              &quot;YODATA_SD_CFS_MATRIX_SRV&quot;: {
                  &quot;uri&quot;: &quot;/sap/opu/odata/sap/YODATA_SD_CFS_MATRIX_SRV/&quot;,
                  &quot;type&quot;: &quot;OData&quot;,
                  &quot;settings&quot;: {
                      &quot;localUri&quot;: &quot;localService/metadata.xml&quot;
                  }
              }
          }
      },
      &quot;sap.ui&quot;: {
          &quot;technology&quot;: &quot;UI5&quot;,
          &quot;icons&quot;: {
              &quot;icon&quot;: &quot;&quot;,
              &quot;favIcon&quot;: &quot;&quot;,
              &quot;phone&quot;: &quot;&quot;,
              &quot;phone@2&quot;: &quot;&quot;,
              &quot;tablet&quot;: &quot;&quot;,
              &quot;tablet@2&quot;: &quot;&quot;
          },
          &quot;deviceTypes&quot;: {
              &quot;desktop&quot;: true,
              &quot;tablet&quot;: true,
              &quot;phone&quot;: true
          }
      },
      &quot;sap.ui5&quot;: {
          &quot;flexEnabled&quot;: false,
          &quot;rootView&quot;: {
              &quot;viewName&quot;: &quot;com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.view.Main&quot;,
              &quot;type&quot;: &quot;XML&quot;,
              &quot;async&quot;: true,
              &quot;id&quot;: &quot;Main&quot;
          },
          &quot;dependencies&quot;: {
              &quot;minUI5Version&quot;: &quot;1.65.6&quot;,
              &quot;libs&quot;: {
                  &quot;sap.ui.layout&quot;: {},
                  &quot;sap.ui.core&quot;: {},
                  &quot;sap.m&quot;: {}
              }
          },
          &quot;contentDensities&quot;: {
              &quot;compact&quot;: true,
              &quot;cozy&quot;: false
          },
          &quot;models&quot;: {
              &quot;i18n&quot;: {
                  &quot;type&quot;: &quot;sap.ui.model.resource.ResourceModel&quot;,
                  &quot;settings&quot;: {
                      &quot;bundleName&quot;: &quot;com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.i18n.i18n&quot;
                  }
              },
              &quot;&quot;: {
                  &quot;type&quot;: &quot;sap.ui.model.odata.v2.ODataModel&quot;,
                  &quot;settings&quot;: {
                      &quot;defaultOperationMode&quot;: &quot;Client&quot;,
                      &quot;defaultBindingMode&quot;: &quot;OneWay&quot;,
                      &quot;defaultCountMode&quot;: &quot;Request&quot;
                  },
                  &quot;dataSource&quot;: &quot;YODATA_SD_CFS_MATRIX_SRV&quot;,
                  &quot;preload&quot;: true
              }
          },
          &quot;resources&quot;: {
              &quot;css&quot;: [{
                  &quot;uri&quot;: &quot;css/style.css&quot;
              }]
          },
          &quot;routing&quot;: {
              &quot;config&quot;: {
                  &quot;routerClass&quot;: &quot;sap.m.routing.Router&quot;,
                  &quot;viewType&quot;: &quot;XML&quot;,
                  &quot;async&quot;: true,
                  &quot;viewPath&quot;: &quot;com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.view&quot;,
                  &quot;controlAggregation&quot;: &quot;pages&quot;,
                  &quot;controlId&quot;: &quot;app&quot;,
                  &quot;clearControlAggregation&quot;: false
              },
              &quot;routes&quot;: [{
                  &quot;name&quot;: &quot;RouteMain&quot;,
                  &quot;pattern&quot;: &quot;RouteMain&quot;,
                  &quot;target&quot;: [&quot;TargetMain&quot;]
              }],
              &quot;targets&quot;: {
                  &quot;TargetMain&quot;: {
                      &quot;viewType&quot;: &quot;XML&quot;,
                      &quot;transition&quot;: &quot;slide&quot;,
                      &quot;clearControlAggregation&quot;: false,
                      &quot;viewId&quot;: &quot;Main&quot;,
                      &quot;viewName&quot;: &quot;Main&quot;
                  }
              }
          }
      },
      &quot;sap.platform.hcp&quot;: {
          &quot;uri&quot;: &quot;webapp&quot;,
          &quot;_version&quot;: &quot;1.1.0&quot;
      }
  }
  </code></pre>
  <h3>Screenshots of my network tab</h3>
  <p><a href="https://i.stack.imgur.com/KMo81.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KMo81.png" alt="Network 1" /></a></p>
  <p><a href="https://i.stack.imgur.com/7utKM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7utKM.png" alt="Network 2" /></a></p>
  <p><a href="https://i.stack.imgur.com/FJgWO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FJgWO.png" alt="Network 3" /></a></p>
  <p><a href="https://i.stack.imgur.com/ygCUC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ygCUC.png" alt="Network 4" /></a></p>