cancel
Showing results for 
Search instead for 
Did you mean: 

How can I further optimize the intial loading time of my SAPUI5 App?

Hey guys,

I am using the Web IDE to develop an SAPUI5 app. I tried to implement all the advice about optimizing the performance from the SAPUI5 docs I could find (e.g. asynchronous module loading, see red square below). But when I build and run my app in the Web IDE, it still needs more than 7 seconds to load:

Is there a way to further improve the loading time?

Thanks in advance

Lucas

Accepted Solutions (1)

Accepted Solutions (1)

boghyon
Product and Topic Expert
Product and Topic Expert

According to the screenshot, some libraries seem to be loaded lazily. You could identify them and include those libraries to be loaded in parallel with other libs. For example, the lib sap.f , as well as sap.uxap, depends on sap.ui.layout (source). Or maybe you're loading additional libs that are not needed at all?

Also ensure to trigger $metadata request as soon as possible as described in Manifest Model Preload.

"sap.ui5": {
  "models": {
    "myODataModel": {
      "...": "...",
      "preload": true
    }
  }
}

I also see that the manifest is not loaded before the Component. Make sure to apply manifest first approach. For example, setting the manifest to true when creating the ComponentContainer.

Here is an example that applied most of the best-practices in terms of initial loading: https://odatav2northwind-p1941744473trial.dispatcher.hanatrial.ondemand.com/index.html
The network tab reports that the app finishes under 2 sec.

0 Kudos

Hey Boghyon,

thanks a lot for your input and especially the code sample. That's a nice and complete example for the Declarative API which the documentation is missing imho. I was able to reduce the loading time by changing the following things:

  • load core library from CDN
  • identify and load all libraries in parallel (good catch with sap.ui.layout! I am indeed using sap.f)
  • use declarative API for initial component and applied manifest first approach (the model was already set to preload)

Here's the result:

Now I have three follow-up questions and I would really appreciate if you could help yet again:

First, I added these two lines from your example to my bootstrap but I couldn't find any explanation in the documentation:

data-sap-ui-modules="sap/ui/core/ComponentSupport,sap/ui/thirdparty/datajs,sap/ui/model/odata/v2/ODataModel"
data-sap-ui-xx-waitfortheme="true"

I guess the first line specifies some modules to be loaded asynchronously. So first question: What do these lines do exactly? Followed by the second question: How would I set these properties in the manifest (for launching the App in Fiori Launchpad)?

And lastly: I still get an deprecation warning because of a synchronous XMLHttpRequest which I can vaguely pinpoint to the request for .../sap/ui/core/messagebundle_de.properties :

Do you have any idea how to resolve this issue?

Thanks in advance

Lucas

boghyon
Product and Topic Expert
Product and Topic Expert

Hi lucasnebot. Those two bootstrap configs are described in the topic Configuration Options and URL Parameters. I was adding the modules to make sure that they are loaded asynchronously beforehand since they used to be being fetched via sync XHRs. But the current stable versions seem to have fixed that. The waitForTheme is an experimental flag that enables avoiding flash of unstyled content. Unfortunately, those settings can't be configured from the manifest.json.

About the messagebundle_*.properties being loaded synchronously; it shouldn't be the case anymore after UI5 version 1.52 if the libraries are configured to be loaded asynchronously (See this similar answer). You can check the current UI5 version by simply entering sap.ui.version in the browser console.

0 Kudos

Hey boghyon.hoffmann , thanks again for your quick reply! I totally forgot about the "Configurations Options and URL Parameters" page, thank you for reminding me.

Actually I'm running SAPUI5 1.61.1 . I tried to set some breakpoints to understand the issue but the stack trace digs deep into the core code and that's were my limited development knowledge is exeeded pretty quickly.

Any more ideas?

boghyon
Product and Topic Expert
Product and Topic Expert
0 Kudos

lucasnebot In the network tab, could you check from which library that messagebundle is loaded? It should look something like this:

https://openui5.hana.ondemand.com/resources/sap/ui/unified/messagebundle_de.properties

My guess is that the messagebundle is loaded lazily because some controls require controls from another lib. That dependent lib should be preloaded as well. For example, sap.m.DatePicker makes use of sap.ui.unified.Calendar. You may have sap.m preloaded already but not the sap.ui.unified lib.

0 Kudos

boghyon.hoffmann you can see which messagebundle is loaded in the second screenshot of my first comment to your awnser. It is the messagebundle from sap/ui/core. Here is a screenshot of the network tab with all the loaded libraries and the warning message.

Thanks again for helping out!

Answers (1)

Answers (1)

UxKjaer
Product and Topic Expert
Product and Topic Expert
0 Kudos

Thanks Jakob! I didn't stumble across these slides yet. Valuable Insight!