Intro

Today, internet users expect a website to not only provide functionality and a user-friendly interface, but work fast. Most of efforts is spent on optimizing server side code to reduce response time (TTFB – time to first byte). However, this approach doesn’t account for delays occurring on the client side (in browser). As a result, while we have very good TTFB on the server side the end-user experience might be very disappointing.

In this article I will highlight some methods of client side performance testing in order to make your users happier with responsive web sites. See also: Quality and Performance Engineering

Possible solutions

As I have mentioned above, client side performance is an important part of system optimization. Every web developer should be aware of typical performance issues and stick to the best practices during his work. With basic knowledge and a bit of attention to performance, performance bottlenecks can be avoided.

Also it is important to see the overall picture. For this, tone should run comprehensive performance tests on the client side. For both cases (debugging of the specific page or overall result for the system) there are specific tools. Let`s have a closer look at each type of tool.

See also: Test Automation: Hopes and Fears.

Debugging

To find out where page performance should be improved we can use tools that provide detailed page loading statistics. These tools can be both desktop and online.

dynaTrace

DynaTrace is a powerful tool for profiling page load. It records all activities which occur during the load and gives comprehensive reports. The collected data includes information about all sub requests, information on internal timings values (full page loading, DOM model loading, rendering of the page and so on), execution time for each JS-function and much more. DynaTrace is a desktop application. Talking about drawbacks, the tool works only with IE browsers as it operates via a plugin and works only in the Windows environment. Despite this minor inconvenience, I think this tool is a “must have” for every web developer.

Browser`s plugins

Everyone knows FireBug for FireFox browser. But not everyone use it for performance testing purposes. The “Net” tab within the plugin provides the ability to analyze the statistic of each activity taking place within the browser. Adding “NetExport” plugin allows to export all recorded data to HAR format for further investigations.

There are two other similar plugins: PageSpeed from Google and YSlow from Yahoo. Both tools provide reports about the general performance of a page and hints for improvement. Another tool - online service GTmetrix - helps to leverage all the plugins mentioned above. You just enter the URL of a webpage and promptly receive summary report.

Another useful tool is Google Chrome Speed Tracer. It is an extension for Google Chrome which offers a deep insight into what the browser is doing. Among its features are resources loading, JavaScript execution, CSS selector matching, paint processes and garbage collection.

It should be noted that almost all browsers have the ability to collect performance metrics out of the box: Opera (Opera Dragonfly), Chrome (Developers tools) and even IE (Developers tools).

WebPageTest

WebPageTest is an open source project supported by Google. The platform is under active development on GitHub. The tool is aimed at specific page performances analysis. It gathers data when the page is loaded in various types of browsers with different settings. Also it is possible to compare the page loading speed of different pages. There are a lot of other interesting and useful features, so it is worth checking out.

Statistical Performance

Many external factors affect performance metrics such as server load, network latency, client load, type of a browser and so on. Therefore the tests should always be run in series. In case of server side testing we have a variety of tools (Visual Studio, JMeter, WAPT and more). For client side performance testing the choice is much more limited.

We have to answer following questions in order to assess client-side performance:

How to collect performance metric from browsers manually? How to programmatically simulate the way regular users interact with a web application?

First, we have to know how to collect performance metrics from browsers without any extra tools which could affect the metrics. The solution was given by W3C consortium in 2010. All current browsers support navigation timing – a feature which provides access to trace information while page is loaded into browser (start and end of navigation, DNS lookup, connection to server, loading and building DOM model, etc.).

What about interactions with a browser? The most convenient solution is the Selenium Web Driver library which interacts with a browser like a regular user and collects performance metrics via JavaScript queries.

At the final stage, we have to create a framework that will launch Selenium in the required browsers with the desired settings which will allow us to gather the data we are looking for.

Summary

Server side performance testing of the doesn’t provide a complete picture. The client side is of paramount importance as it assesses end-user experience. Therefore, developers should care about client-side performance and never leave it off-screen.