Improving Perceived Performance for Visual Builder Pages

Perceived performance is how your end user perceived the speed of your application. There are all sorts of "tricks" you can use to influence this perception and help your application seem faster in the eyes of the user. In this blog we are going to cover two quick ideas - the first is shifting delays from initial page load to a later time, and the second is providing the user with a distraction while a long running action is taking place.

In the first part of the demo below I show how you can control the timing of data fetching in your application, delaying data fetch until it is actually shown on the page. This is a common technique you can use to improve the initial rendering of a page. There is a tradeoff to take into account between slow initial rendering and slowness later on when working with the page. In the demo we use an oj-bind-if component to hide a table/list until it is actually shown on the page. Since the table is not rendered, the SDP backing the table not executing the REST call initially. When we actually need to show the data, we update the variable controlling the oj-bind-if and only then is the REST call executed and the data fetched and displayed. Another advantage of this technique is that if the user never actually require to see the specific component, the REST call won't be executed and you saved overall time. In the demo I'm demoing how to do this with a collapsible area, but similar approach could be implemented for other hidden areas - such as tabs on a page.

The second part of the video shows how to notify a user that the delay they are experiencing is because the app is actually busy doing something. Again there is a psychological aspect here - a user is more likely to accept a delay if they know that something is happening, and in addition the user mind is busy reading the text which distract them from noticing the delay. To do this we add a dialog to the page, and open it at the start of an action chain, closing it as the last step in the action chain using the call component method action.

As you can see there are various things you can do to help tune your application as well as your end user experience working with the app.