Reputation: 19

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

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>

Upvotes: 1

Answers (3)

user7434216

Reputation:

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.

Upvotes: -1

Boghyon Hoffmann

Reputation: 18044

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}

Upvotes: 3

Kawamoto Takeshi

Reputation: 606

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.

Upvotes: 0