Software testing is the process of evaluating and verifying that a software product or application does what it is supposed to do. There are different types of testing like unit testing, smoke testing, integration testing. One of the types is Performance Testing, Performance testing is a non-functional software testing technique that determines how the stability, speed, scalability, and responsiveness of an application holds up under a given workload. There are four major types of performance testing which are Capacity Testing, Load Testing, Volume Testing, Stress Testing.

Introduction to Client-side Performance Testing [Explained with examples]

Also Read: ROS(Robot Operating System): The Infrastructure of Modern Robotics I

Performance testing can be performed by two ways namely client side and sever side performance testing. Client-side testing implies that the trial and error (the change to content) occurs at the program level. An enhancer sets up focusing on rules and a guest's browser changes the current (default) page into the planned variety.

Server-side performance testing is the process of testing how well a server performs under various load conditions. This type of testing is important because it can help identify bottlenecks and other issues that may cause the server to slow down or crash when it is under heavy load.

Client-side performance testing implies everything including client-side action. That implies, when we do execution testing of an application in view of its client action. Assuming you consider a web application, client-side execution will incorporate the hour of server execution and client-side program delivering, JS/AJAX calling, attachment reactions, administration information populace and so forth.

 

Client-side performance metrics

We can measure different client-side performance metrics:-

a) Page Weight

This measurement, likewise called " total requests" is a gathering of each of the site's asset loads, estimated in kilobytes or megabytes, including the HTML of the actual page. It's helpful for setting weight financial plans on a site, which are not difficult to pass to engineers and creators. It doesn't necessarily in every case recount the entire story of execution, as execution frequently relies heavily on how a page stacks those solicitations.

b) Speed Index

Speed index is a score for the visual culmination of the page around the top (what's noticeable to the client) over the long run. It utilizes video catch to work out this score. Made by Webpage test, a score from 0 to limitlessness maps roughly to milliseconds of time before the page is totally noticeable to the client. A lower score is better.

c) Time to First Byte

Time to first byte (TTFB) is an estimation utilized as a sign of the responsiveness of a web server or other organization asset. TTFB estimates the length from the client or client making a HTTP solicitation to the main byte of the page being gotten by the client's program.

d) Page Load Time

This measurement shows when the page was totally stacked and begun to be intuitive. It is terminated when an asset and its reliant assets have completed the process of stacking.

e) Time to Interactive

The quantity of seconds from the time the route began until the design is settled, web text styles are apparent, and the page is receptive to client input. The page is balanced out assuming that there was no assignment impeding for no less than 50ms.

f) First Significant Paint

First significant paint is a program provided metric that actions what amount of time it requires for the most significant substance to be completely delivered on the site. It portrays the span until the program initially delivered any text, picture (counting foundation pictures), non-white material or SVG. This incorporates text with forthcoming web textual styles. This is the primary second when clients could begin consuming page content.

g) DOM Content Loaded

The DOMContentLoaded occasion is terminated when the underlying HTML archive has been totally stacked and parsed, without hanging tight for templates, pictures, and subframes to complete the process of stacking. A totally different occasion burden ought to be utilized exclusively to recognize a completely stacked page. It is a famous misstep to utilize load time as an exhibition metric, where DOMContentLoaded would be substantially more fitting.

 

Navigation Timing API

The Navigation Timing API gives information that can be utilized to quantify the presentation of a site. Not at all like JavaScript-based libraries that have generally been utilized to gather comparable data, The Navigation Timing API interface can be considerably more exact and dependable.

 

Some Examples

a) Calculate the total page load time

To process the aggregate sum of time it took to stack the page, you can utilize the accompanying code:-

const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

This deducts the time at which route started (navigationStart) from the time at which the load event handler returns (loadEventEnd). This gives you the apparent page load time.

 

b) Calculate request response time

You can compute the time passed between the start of a solicitation and the fulfillment of getting the reaction utilizing code like this:-

const connectTime = perfData.responseEnd - perfData.requestStart;

Here, the time at which the solicitation was started (requestStart). from the time at which the reaction was done being gotten (responseEnd).

 

c) Calculate page render time

As one more example of a interesting piece of information you can get utilizing the Navigation Timing API that you can't in any case effectively get, you can get how much time it took to deliver the page:-

const renderTime = perfData.domComplete - perfData.domLoading;

This is acquired by starting with the time at which loading of the DOM and its conditions is complete(domComplete) and deducting from it the time at which parsing of the DOM started (domLoading).

 

Measuring performance using HttpWatch

The HttpWatch and Fiddler tools can be used to quantify the performance of web applications. HttpWatch can be used to quantify the time it takes to load a website page, the time it takes to download assets, and the time it takes to execute JavaScript. Fiddler can be used to quantify the time it takes to make an network request, the time it takes to get a reaction, and the time it takes to handle the reaction.

To perform the HttpWatch test you would need to:-

• Visit httpwatch.com in Browser to prime the cache
• Close down Browser and start a new instance
• Open HttpWatch and click on Record
• Go to httpwatch.com
• HttpWatch will then display a time chart with the page load time

 

Measuring performance using BrowserMob proxy

BrowserMob proxy is a free tool that supports checking and controlling the network traffic from web applications. It can catch the performance information from a web application in a HTML File (HAR) design, as well as control the program conduct and traffic, for example, whitelisting and blacklisting content, reproducing network traffic and dormancy, and changing HTTP solicitations and reactions.

 

Uses of BrowserMob Proxy

The proxy is automatically controlled by means of a REST interface or by being embedded directly inside Java-based projects and unit tests. It catches execution information in the HAR design. Also, it can really control HTTP traffic, for example,

• Black-listing and white-listing specific URL designs
• Recreating different transfer speed and inactivity
• Remapping DNS queries

 

Conclusion

In this article we learnt about introduction to Client-side testing and its various types and metrics. We have also learned in a very brief how to measure the performance at client-side using tools like HttpWatch and BrowserMob Proxy.