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.
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.
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 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.
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.
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 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.
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.).
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.
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.