How-to measure performance impact due to multiple Embedded Components in a facet/tab

[guru_shetti]

OverView:

SAP Hybris Cloud for Customer allows key users and developers to add custom UI fields to meet customer specific business requirements. In many cases, these additional custom fields are in the form of embedded components. As of 1605 release these embedded components have their own floorpan metadata.  Even though this static floorplan metadata is cached on the browser for 14 days (or reset by HFC), for the business data itself, it is retrieved via POST requests. At least one additional roundtrip for each embedded component is required over the network from the cloud application servers. These requests are synchronous in nature and therefore adds to the end to end response time of that particular screen. If a particular facet/tab has multiple such embedded components then a heavy price is paid due to the additional roundtrips. 

In the example below and with the help of a free plugin from HTTPWatch, we will show, how by adding Feeds pane in the overview facet, the screen renders slower. For this, we will use the Key User Tool to implement the same. This is true in the case of PDI development as well.

In the non-customized Accounts overview facet screen below, we can see that there is only one network trip required (highlighted in green).

Example: HTTPWatch waterfall showing one roundtrip for a warm browser request to retrieve Accounts Overview

The first request in the screenshot above is a cached GET request for the floorplan which is stored locally in the browser's disk cache, the second is the actual POST request to retrieve the business data and the third is an asynchronous post request with performance measurements. The last POST request does not affect the end to end response time.

Now lets add a Feeds pane using the KUT by going into the adaptation mode.

               Example: Adding Feeds in the overview via adaption    

After adding the pane, we can now see three (3) additional roundtrips (image below) now required to render the overview screen facet. Therefore, in terms of user response, these additional roundtrips can cause sluggish behavior as its affects users end to end response times. This is also true for PDI development as well, where an Embedded Component is added to the screen and this additional roundtrip can cause slowness as well.

Example: HTTPWatch waterfall showing additional roundtrips after adding an embedded component.

Therefore when adding custom fields either via KUT or PDI, please check using HTTPWatch how much impact these additional embedded components are taking. If the total end to end times are high, consider moving these custom fields to other facets or tabs. This is true especially when the facet is the landing page facet. In this case navigating to this facet will take a long time and users will be dissatisfied with the performance