Post by Eti Noked from TruClient, Performance Engineering Core R&D team

Organizations and individuals are increasingly coming to the understanding that the Internet is the best platform for creating applications to serve their needs. However, as more and more web-based applications are built, they require additional capabilities to satisfy the demand for enhanced business logic—with zero deployment footprint on the client-side.

In modern web applications, we are no longer dealing with static HTML applications, but instead with content that is constantly changing. While applications rely on client-side logic that uses JavaScript or other client-side scripting languages to provide users a quick and interactive browsing experience; most testing tools monitor the server-side execution time.

Client-side execution time is just as important. If you're measuring the end-user perspective, you should always look carefully at network time and client-side application logic performance.

This article introduces the TruClient approach to capturing the end-user's experience of application response time.

HAR format for recording HTTP tracing information

The HTTP Archive request (HAR), is a standard JSON-formatted archive file for logging a web browser's interaction with a site. The common extension for these files is .har.

TruClient uses HAR format to export detailed performance data about the web pages it loads. You can expect a HAR file to include a breakdown of timings such as:

1. DNS time - How long it takes to fetch DNS information
2. Response time - How long it takes to respond to each request
3. Connect time - How long it takes to connect to the server
4. Receive time - How long it takes to transfer assets from the server to the browser of each request

Extracting meaningful insights from a HAR file that contains low-level HTTP tracing information is not always easy. However, with practice, a HAR file can quickly help you identify the key performance problems within a web page. This ability lets you focus your development efforts onto areas of your site that will deliver the greatest results.

TruClient uses the HAR data structure to capture and save various client-side data and performance metrics. It uses standard HAR fields, and also enhances these with TruClient-related information. Learn more about standard HAR data structure.

View the data

Network Virtualization (NV) Insights Report

Client-side breakdown was added to version 12.55 of LoadRunner, Performance Center, and VuGen (it is also available in StormRunner Load). You can view the NV Insights report from VuGen after replaying the script in load mode, by clicking the Open NV Insights report link, as shown in figure 1.

See more about the NV Insights HTTP Waterfall page.

Make sure you install NV on your environment to see this cool feature. You can try it for FREE for 30 days!

The HTTP Waterfall page is a visual display of the client-side breakdown. This feature links network traffic to the client loading process, and to the steps performed by users.

In figure 2, you can see TruClient pages within a given transaction. Each color represents a page (in the example, five pages are displayed, each page lists the related resources).

If you hover the mouse over a specific page, you can see the step used to execute the network events, and which steps (user operations) were performed within the page context.

In the example in figure 3, there are three steps. Hovering over a specific step displays a screenshot of the application at the time the step was executed. The traffic during the step can also be viewed.

You can find other useful information in the HTTP Waterfall page including ‘start render’, ‘DOM content loaded’, and ‘page loaded’ time events (as displayed in figure 4). This combined with the network traffic, provides the information you need to help improve application load time and user experience.

StormRunner Load

After running a test in StormRunner Load, you can view the NV Insights report from the Runs screen by clicking the Dashboard icon, as shown in figure 5.

You can also view the NV Insights report by selecting the Client Side Breakdown tab:

 StormRunner Load provides additional visualization of the HAR data, as shown in figure 8.

Learn more about Client-side Breakdown reports in StormRunner Load here.

View Raw Data

A HAR file is created in the script folder when running a TruClient script using VuGen. The file is named replay.har and can be viewed using any HAR viewer. Note that you must use the JSON viewer to see TruClient-related raw data (using a third-party viewer won’t always give a visual display of TruClient additional entries).

So what are you waiting for? Start using client-side breakdown data for TruClient scripts today!