Wednesday, April 15, 2015

Monitoring Page Load Time on ADF UI Client Side

In certain situations, it might be useful to monitor ADF page load time. This is pretty easy to achieve with Navigation Timing API and Java Script. Navigation Timing API is supported by modern browsers and allows to retrieve client side load time. It takes into account data transfer time and actual rendering in the browser - real time it took for a user to see the content.

We could use ADF clientListener operation with load type, to identify when ADF UI is loaded. This listener should be added to the ADF UI document tag and it will be invoked at the end of page rendering. Through clientListener, we could invoke our custom JavaScript method, where we could calculate page load time on ADF UI client side:


The most important thing here, is to get page load start time. This value is retrieved from Navigation Timing API (mentioned above) - performance.timing.navigationStart. The rest is easy - we can get load time:


This is how it looks like on runtime. When I recompile ADF application and redeploy it on the server, first load is obviously slower. ADF UI is rendered on the client side (starting from page load request) in 10 seconds (look at top right corner):


Second access is a way faster - page load on the client side happens in 1 second:


You can test it yourself, download sample application (redsam/welcome1) - ADFAltaApp_v2.zip.

7 comments:

Anonymous said...

Why is the salary of the first guy so high? He gets twice as more as the president.

Andrej Baranovskij said...

He is programmer, his salary must be higher :)

Andrejus

Neel said...

Hi Andrejus, we noticed that ADF waits for all DOM content (e.g. images) to be loaded before rendering the page. Is there a way to have ADF render right away (images can keep loading after the page has been shown).

Andrej Baranovskij said...

You could try using CDN support in ADF for images: http://www.ateam-oracle.com/cdn-support-in-adf-faces-11-1-1-6/

Andrejus

Anonymous said...

The download link is not found.

Anonymous said...

How can we find, lets say if i click some button on the page and it refreshes the page

Andrej Baranovskij said...

Hi,

Button would refresh full page if partialSubmit=false is set for that button.

All samples prior to 2014 can be downloaded from Google archive: http://andrejusb.blogspot.lt/2017/08/my-blog-samples-download-repository-for.html

Regards,
Andrejus