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.
Table of Contents
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.
In this case study, I took a sample application which was developed by HPE team to understand the concepts of LoadRunner/TruClient.
Below is the business scenario:
- Clear cache and cookies
- Navigate to https://example.com
- 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:
- Start measuring the performance
- Do the action
- Stop measuring the performance
- 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
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.