Measuring Client-side performance using Performance APIs

Measuring Client-side performance using Performance APIs Measuring end-to-end performance is critical, especially if the application stack built using web 2.0 technologies. If you are using HPE LoadRunner TruClient for Web protocol, then you must have Network Virtualization enabled to gather the end-to-end performance metrics. In this article, we are going to see about measuring client-side performance in HPE LoadRunner TruClient for Web using Performance APIs.

What is Performance APIs?

Performance APIs provides information about performance for the current page. It is part of High-Resolution Time API and enhanced by the following: Performance Timeline API, Navigation Timing API, User Timing API and Resource Timing API. For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/Performance

How to leverage Performance APIs in TruClient for Web Protocol in HPE LoadRunner?

As you aware, TruClient has Evaluate JavaScript step. By injecting performance APIs in Evaluate JavaScript step in appropriate steps, it is possible to measure the end-to-end performance.

pasted image 0

In this case study, I took a sample application which was developed by HPE team to understand the concepts of LoadRunner/TruClient.

https://example.com

Below is the business scenario:

  1. Clear cache and cookies
  2. Navigate to https://example.com
  3. Measure the performance using JavaScript using Performance APIs

Test Script Design

Below is my test script design in TruClient for Firefox IDE.

To measure the end-to-end performance you need to follow the below approach:

  1. Start measuring the performance
  2. Do the action
  3. Stop measuring the performance
  4. Difference between stop and start will yield the end-to-end performance

Below is the timeline overview where when each event occurs on the browser side. The different between loadEventEnd and navigationStart is the total end-to-end time response time. If you want to measure only the rendering time, then you can use below formula.

window.performance.timing.loadEventStart – window.performance.timing.domLoading

timing overview

In Evaluate JavaScript append this code to measure the end-to-end performance. This will print the performance measurement (in milliseconds) in the Output pane.

TC.log(window.performance.timing.loadEventEnd – window.performance.timing.navigationStart);

Below is the sample output log.

Virtual User Script started at : 2017-09-18 19:42:43

TruClient Replay for LoadRunner 12.55.0, build 0911. OS: Windows 10, Browser: Firefox, initialized on 2017/09/18 at 19:42:40 (0000.000s)

Running Vuser…

Starting iteration 1.

t=00003423ms: ** 1: Evaluate JavaScript code Utils.clearCookies() Utils.clearCache() ** started    [MsgId: MMSG-205180]

t=00003658ms: ** 1: Evaluate JavaScript code Utils.clearCookies() Utils.clearCache() ** successfully completed with end event ‘Action completed’    [MsgId: MMSG-205180]

Notify: Transaction “Transaction 1” started.

t=00004274ms: ** 2: Navigate to “https://www.example.com” ** started    [MsgId: MMSG-205180]

t=00004499ms: ** 2: Navigate to https://www.example.com ** successfully completed with end event ‘Document Loaded’    [MsgId: MMSG-205180]

Notify: Transaction “Transaction 1” ended with a “Pass” status (Duration: 0.3390 Wasted Time: 0.2010).

t=00004597ms: ** 3: Evaluate JavaScript code TC.log(window.performanc…avigationStart); ** started    [MsgId: MMSG-205180]

t=00004597ms: 133    [MsgId: MMSG-205180]

t=00004707ms: ** 3: Evaluate JavaScript code TC.log(window.performanc…avigationStart); ** successfully completed with end event ‘Action completed’    [MsgId: MMSG-205180]

Ending iteration 1.

Ending Vuser

Vuser Terminated.

Total time to load example.com is 133 milliseconds.

Now we will see how much it is taking for netflix.com. Below is the log where it took 1.467 seconds to load in the browser.

Virtual User Script started at : 2017-09-18 19:45:21

TruClient Replay for LoadRunner 12.55.0, build 0911. OS: Windows 10, Browser: Firefox, initialized on 2017/09/18 at 19:45:18 (0000.000s)

Running Vuser…

Starting iteration 1.

t=00003435ms: ** 1: Evaluate JavaScript code Utils.clearCookies() Utils.clearCache() ** started    [MsgId: MMSG-205180]

t=00003670ms: ** 1: Evaluate JavaScript code Utils.clearCookies() Utils.clearCache() ** successfully completed with end event ‘Action completed’    [MsgId: MMSG-205180]

Notify: Transaction “Transaction 1” started.

t=00004342ms: ** 2: Navigate to “https://www.netflix.com” ** started    [MsgId: MMSG-205180]

t=00005841ms: ** 2: Navigate to https://www.netflix.com ** successfully completed with end event ‘Document Loaded’    [MsgId: MMSG-205180]

Notify: Transaction “Transaction 1” ended with a “Pass” status (Duration: 1.6700 Wasted Time: 0.2010).

t=00005945ms: ** 3: Evaluate JavaScript code TC.log(window.performanc…avigationStart); ** started    [MsgId: MMSG-205180]

t=00005945ms: 1467    [MsgId: MMSG-205180]

t=00006048ms: ** 3: Evaluate JavaScript code TC.log(window.performanc…avigationStart); ** successfully completed with end event ‘Action completed’    [MsgId: MMSG-205180]

Ending iteration 1.

Ending Vuser

Vuser Terminated.

To validate the performance, I have turned on the Network Virtualization Report. Below is the waterfall chart of netflix.com where you can see total time to load the page is around 1.6 seconds.

Limitations

Though the JavaScript performance APIs helps you to get the performance, there is a difference between NV Insights Report and JavaScript performance API measurement. You need to use above strategy wisely in your project. Suppose, if you do not have a license for NV Insights, you can leverage performance APIs in your script, but only Micro Focus R&D team has to confirm why there is a difference between NV metrics and Performance APIs metrics.

About the Author

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hamster - Launch JMeter Recent Test Plans SwiftlyDownload for free
+
Share via
Copy link