docs

Performance: Speed Up Your App

If a web app has performance issues, finding the cause can be both a time-consuming and nerve-consuming task. To help you avoid and solve performance issues in your app, here are some good practices we’ve discovered while dealing with OpenUI5 apps.

OpenUI5 apps are basically JavaScript files sent to a client by a server and interpreted by the browser. So it’s not only the coding of the app that can cause slow performance. It often turns out, for example, that the configuration is wrong. Slow networks or servers may also have a heavy impact on the performance of a web app. Let’s have a look at the most common issues that impact performance.

Enable Asynchronous Loading

The first step of improving the performance of your application is the switch to asynchronous loading. This makes your application a lot faster, as things can run in parallel. OpenUI5 provides several configuration options that you can set. For more information, see Use Asynchronous Loading.

Additional Information:

Use manifest.json Instead of the Bootstrap to Define Dependencies

Don’t specify a link to the CSS in the bootstrap of your app; use the manifest.json descriptor file instead.

Please use the manifest.json application descriptor file to declare dependencies. This has several advantages:

Make sure that you don’t load too many dependencies. In most apps it’s enough to load the libraries sap.ui.core and sap.m by default, and add additional libraries only when needed.

If you want to make additional libraries known in your app, without directly loading them during the app start, you can add them to the dependency declaration in the manifest.json file with the lazy loading option:

"sap.ui5": {
	"dependencies": {
		"minUI5Version": "1.70.0",
		"libs": {
			"sap.ui.core": {},
			"sap.m": {},
			"my.heavy.charting": {
				"lazy": true
			}
		},
...

If a library preload is configured to be loaded lazily ("lazy": true), the library isn’t available upon creation of the related component. In this case, you need to ensure yourself that the library is preloaded, e.g. via sap/ui/core/Lib.load({name: "my.heavy.charting"}), before any module from that library is used.

Additional Information:

Load OpenUI5 from the Content Delivery Network (CDN)

In order to ensure that all static SAPUI5 resources are served with the lowest possible latency in SAP Business Technology Platform scenarios, you can load the resources from the Content Delivery Network (CDN) cached by AKAMAI. Especially when running your app in the cloud, you benefit from the global distribution of servers. For other scenarios, it possible to configure a custom CDN of choice as an external location.

Additional Information:

Ensure that all Resources are Properly Configured to Avoid 404 Errors

Languages can be configured in your manifest since UI5 version 1.77.

The manifest configuration for i18n has now the option to provide the supportedLocales and the fallbackLocale:

Example: If the following language files exist:

They can be configured in your manifest.json in Section sap.ui5 under models:

"sap.ui5": {
	"models": {
		"i18n": {
			"type": "sap.ui.model.resource.ResourceModel",
			"settings": {
				"bundleName": "sap.ui.demo.todo.i18n.i18n",
				"supportedLocales": ["en", "de"],
				"fallbackLocale": "en"
			}
		}
	}
}

Wit’sh AppDescriptor version 1.21.0 this is also possible in the i18n section of sap.app in your manifest.json:

"sap.app": {
	"i18n": {
		"bundleUrl": "i18n/i18n.properties",
		"supportedLocales": ["en", "de"],
		"fallbackLocale": "en"
	}
}

For more information, see:

Use “manifest first” to Load the Component

When creating a component manually, make sure the manifest.json descriptor file is loaded first, so that the dependencies are analyzed and preloaded when the component is loaded. For more information, see Manifest First Function.

Ensure that Library Preloads are Enabled

If the library preloads are disabled or not found, every module is loaded separately by an own request. Depending on the server and network infrastructure, this can take a lot of time. Except for debugging reasons, it’s always recommended to make sure library preloads are used. Fortunately, the library preloads are active by default if the files are present.

In some cases it may happen that preloads are not enabled, or that modules of some libraries are still loaded separately:

Ensure that Application Resources are Loaded as Component Preload

Application modules (e.g. components, controllers, views or resource bundles) should be loaded asynchronously via the component preload file. Check (e.g. via the Network tab in the Google Chrome developer tools) if a component preload (Component-preload.js) is missing. If the application isn’t configured to load modules asynchronously, required application files may be loaded synchronously.

Note:

If a component preload doesn’t exist yet, the bundle needs to be created. For example, you can use the UI5 Tooling.

Check the Network Requests

To quickly check the network load caused by your app, look at your browser’s developer tools, for example the Network tab in the Google Chrome developer tools ([F12]). You’ll see an overview of all requests being sent. Possible issues here may be:

Synchronous requests that block each other

In this case, use the data-sap-ui-async="true" setting in the bootstrap.

Too many requests

You can use UI5 Tooling to bundle and minimize all relevant component files by creating a component-preload file.

Additional Information:

Migrate jquery.sap.* Modules to their Modularised Variants

Since UI5 version 1.58, the global jquery.sap.* modules are deprecated. Please use the modularised variant of the module. If you’re still using the jquery.sap.* variants, a so-called “stubbing layer” may load the old module synchronously!

You can find a list of modules in the Replacement of Deprecated jQuery APIs documentation.

The usages can either be replaced manually or by the UI5 Migration Tool.

Note:

Please make sure to declare the required modules in sap.ui.define or sap.ui.require to ensure that they get loaded asynchronously.

Migrate Synchronous Variants of UI5 Factories to Asynchronous Variants

Check if the application uses synchronous UI5 factories. Many asynchronous variants are available, e.g. for Components, Resource Bundles, Controllers, Views, and Fragments.Please visit the following overview: Deprecated Factories Replacement.

Use the OData Model Preload

Components can preload models for which modules are already loaded; otherwise a warning will be shown. The OData model (V2 or V4) benefits especially, because the metadata can be loaded in parallel during a component load.

"sap.ui5": {
  ...
  "models": {
      "mymodel": {
          "preload": true,
...

For the OData V2 model, also consider using the model parameter earlyTokenRequest. For more information, see the API Reference: sap.ui.model.odata.v2.ODataModel.

For the OData V4 model, also consider using the model parameter earlyRequests. For more information, see the API Reference: sap.ui.model.odata.v4.ODataModel.

For more information, see Manifest Model Preload.

Use OData Metadata Caching

To ensure fast loading times for SAP Fiori applications started from the SAP Fiori launchpad, the OData metadata is cached on the web browser using cache tokens. The tokens are added with the parameter sap-context-token to the URL of metadata requests. Please check via the developer tools of your browser (e.g. the Network tab in the Google Chrome developer tools) if the token has been appended to the request URL.

Note:

This feature is currently only supported for ABAP back ends.

Additional Information:

Use a $select Query when Binding an Aggregation in the OData V2 Model

With a $select query you enable your application to fetch only necessary properties of an entity from the collection.

As an example, consider the EntityType “Customers”, which is available from the public Northwind OData service at https://services.odata.org/V2/Northwind/Northwind.svc/Customers?$format=json. It has several properties.

If you have an sap.m.List that only needs to display the CompanyName from the collection, you could add the following to your XML view:

...
<List
    id="myList"
    ...
    items="{
        path: '/Customers',
        parameters: {
            select: 'CustomerID,CompanyName'
        }
    }">
    ...

Note that all key properties, such as the CustomerID, should still be added, even though they’re not directly relevant to the user.

As a result, the response size of your application is reduced significantly. You also enable the back end to perform a more efficient database query.

In the OData V4 model, $select and $expand values can be automatically defined. For more information, see Automatic determination of $expand and $select.

Check Lists and Tables

The performance limits are reached differently depending on the used browser, operating system and hardware. Therefore, it is important to be mindful about the amount of controls and data bindings. This applies especially to lists and their variants (e.g. sap.m.Table or sap.ui.table.Table):

Additional Information:

Further Code Optimization

You can further optimize your code by doing the following:

Related Information

Coding Issues to Avoid: Performance Issues

Performance Measurement Using sap/ui/performance/Measurement Module

Blog: SAPUI5 Application Startup Performance – Best Practices

Blog: SAPUI5 Application Startup Performance – Advanced Topics

This site is open source. Improve this page.