App takes more than a minute to load for the first time

Question

I have completed an app in SAPUI5 & deployed in FLP. It takes more than a minute to load for the first time after which it takes only 2 to 3 seconds.

When I run Performance in Chrome console, it shows scripting takes too much time. How can I reduce my app's initial loading time?

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Orders</title>
    <script id="sap-ui-bootstrap"
      src="/sap/public/bc/ui5_ui5/1/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m, sap.ui.core"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-bindingSyntax="complex"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-preload="async"
      data-sap-ui-resourceroots='{"orders": "."}'
    ></script>
    <script>
      sap.ui.getCore().attachInit(function () {
        sap.ui.require([
          "sap/m/Shell",
          "sap/ui/core/ComponentContainer"
        ], function (Shell, ComponentContainer) {
          new Shell({
            app: new ComponentContainer({
              height : "100%",
              name : "orders"
            })
          }).placeAt("content");
        });
      });
    </script>
  </head>
  <body class="sapUiBody" id="content">
  </body>
</html>

Controller Modules

sap.ui.define([
  "./BaseController",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/routing/History",
  "../model/formatter",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator",
  "sap/m/MessageToast"
], function(BaseController, JSONModel, /* ... */) { /*... */ }));

XML Namespaces

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:semantic="sap.m.semantic"
  xmlns:core="sap.ui.core"
  xmlns:table="sap.ui.table"
  xmlns:smartTable="sap.ui.comp.smarttable"
  xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  controllerName="orders.controller.Worklist"
>
  <!-- ... -->
</mvc:View>

Does this answer your question? [How to load sap.ui.comp.smarttable.SmartTable faster?](https://stackoverflow.com/questions/49817459/how-to-load-sap-ui-comp-smarttable-smarttable-faster) — Boghyon Hoffmann, Oct 21 '20 at 13:58

Boghyon Hoffmann · Answer 1 · 2020-10-21T14:38:19.417

3

Technical Optimizations

I see you're using sap.ui.comp.smarttable.SmartTable without preloading its dependencies.

You can definitely reduce the app's initial load time massively by:

Preloading the dependent libraries, $metadata, and annotations as mentioned in How to load sap.ui.comp.smarttable.SmartTable faster?
Moving library dependencies from data-sap-ui-libs to sap.ui5/dependencies/libs in manifest.json. See Bootstrap's data-sap-ui-libs vs manifest's sap.ui5/dependencies/libs.
Identifying and reducing the number of synchronous XHRs as mentioned in How to avoid "Synchronous XMLHttpRequest on the main thread"?
Finally, use the UI5 Tooling's ui5 build command - with the applicable command options depending on the use case - to bundle and minimize all relevant component files before deploying the app. By default, a bundle named Component-preload.js will be generated which reduces the app's overall size and the number of requests in the runtime.

The above mentioned points apply generally to all UI5 applications, not only to SmartTable.
For other performance related guidelines, see Performance Checklist.

Psychological Optimizations

Besides technical optimizations, perception management should be also taken into account.

It's important to note that perceived performance is the real performance. The hard number of milliseconds isn't what really matters.
In order to indicate that something is happening, we can make use of busy state, BusyIndicator, BusyDialog, and ProgressIndicator according to the graphic below:

^{Source: Psychological Time: Tolerance Management}

edited Oct 21 '20 at 14:38

answered May 11 '18 at 13:32

Boghyon Hoffmann

17,103
12
72
170

Thank You so much !! .. I will try& let you know. – Haritha Perumal May 11 '18 at 13:48
@HarithaPerumal The SmartTable was just an example. You might have other controls whose dependent libraries aren't being preloaded. Please, look for them too. Usually, the *Network* panel in Chrome's devtool shows which libraries are loaded on-demand synchronously which is what happens if not preloaded. – Boghyon Hoffmann May 14 '18 at 09:10
I have preloaded dependencies & added Component-preload.js. Now it takes only 6 seconds for the first time. Thank you for your response !!! :) – Haritha Perumal May 14 '18 at 10:01
@HarithaPerumal The *Component-preload.js* shouldn't have to be created manually when you were deploying the app on FLP from Web IDE (as Web IDE creates the file automatically for you). Or were you using a different IDE? – Boghyon Hoffmann May 14 '18 at 10:06
I am using Web IDE. When I deployed app to SAP cloud platform, It has created a dist folder with _Component-preload.js_ file in it. – Haritha Perumal May 15 '18 at 08:45
@HarithaPerumal Exactly ;) On FLP, the *dist* folder is the folder from which the app will run. No need to add *Component-preload.js* by yourself :) – Boghyon Hoffmann May 15 '18 at 09:00
Yes !! Thank You :) – Haritha Perumal May 15 '18 at 14:11

score 0 · Answer 2 · answered May 11 '18 at 12:41

0

Although a minute takes too long, it is normal for a UI5 app to load longer the first time you run it because it downloads the UI5 libraries from the UI5 server -- after the libraries are downloaded, they are then cached to your browser hence, it is much faster in the next runs.

answered May 11 '18 at 12:41

Kawamoto Takeshi

596
1
3
24

Thanks for your response. I thought I could reduce to at-least 20 to 30 seconds. Is it possible? – Haritha Perumal May 11 '18 at 12:49
Taking a whole minute is definitely not "normal" even for a UI5 app. – Boghyon Hoffmann Oct 21 '20 at 14:42

score -1 · Accepted Answer · edited Oct 21 '20 at 14:54

-1

Component Preload file helps in increasing your app performance in intial load. You can create this file easily, for example, from SAP Web IDE: right click on the project → Build → Build Project to create / update the preload file.

edited Oct 21 '20 at 14:54