How To Use HAR File To Find The Hidden Performance Bottlenecks In Your App

Introduction

App performance can be a killer problem for any digital company, especially when the performance issues take too long to identify. What I have found by working with many of our customers is that the answer can be hiding in the HAR file data – which is why you should always check your HAR files.

Step 1: What Is a HAR File?

HAR (HTTP Archive Viewer) is a JSON file that contains a record of the network traffic between client and server. It contains all the end to end HTTP requests/responses that are sent and received between the two network components.

Step 2: What Can I Do With a HAR File?

HAR files allow developers and testers to learn what actually happens when a transaction is executed and to help find performance bottlenecks and security issues in the original and 3^rd party code.

Example

One of our customers came to me with a recurring performance degradation in their native mobile app. They had no idea what was causing the given issue; no big changes were pushed to the code and the problem was not reproducing on the Dev/QA environments. After collecting the HAR file from the production environment, we found that the analytics calls were taking twice as long because of a change made by the 3^rd party analytics company.

Step 3: How to Record a HAR File?

In order to record the HAR, you should set a proxy between the server and the client. All the data which goes through the proxy will be stored in a HAR file. A couple tools that can be used to record data are:

• Charles Proxy
• MITM Proxy https://mitmproxy.org/

Step 4: Visualize Your HAR File:

I would like to suggest two UI tools in order to help you visual the HAR data and help focus on the interesting data.

• HAR viewer – http://www.softwareishard.com/har/viewer/ – a free web based tool showing a waterfall graph of all the calls with the ability to drill down to a specific request.
• Charles Proxy – Charles is an HTTP proxy / HTTP monitor which allows you to record and see the data.

Step 5: How to Analyze Performance Through the HAR File

1.Execute one flow and record the data. In the following example I went to amazon and searched for a laptop.

Total Transaction Time Was 12.45s. A Good Performance, but What Is Causing the Difference in the HTML Displays?

2. Drill down to a specific request

In the drill down I found that as part of the display request the server also executes a request from the mobile-ads which takes 80% of the time.

I did the same exercise with Best Buy by opening a page and searching for a laptop.

This site transaction took 42.8 seconds!! I traced the longest calls and drilled down:

The search call took 1.1s.

As shown on Charles I can see that the delay (server query) took 1 sec.

One of the useful features in Charles is to get curl url – it gives you the full url call which you executed from your command line, in this case I found that this specific call for device details took around 2 seconds:

curl -H ‘Host: www.bestbuy.com’ -H ‘Upgrade-Insecure-Requests: 1’ -H ‘User-Agent: Mozilla/5.0 (Linux; Android 6.0.1; SM-G935F Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36’ -H ‘Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8’ -H ‘Referer: https://www.bestbuy.com/site/searchpage.jsp?st=XBOX&_dyncharset=UTF-8&_dynSessConf=&id=pcat17071&type=page&sc=Global&cp=1&nrp=&sp=&qp=&list=n&af=true&iht=y&usc=All+Categories&ks=960&keys=keys’ -H ‘Accept-Language: en-US,en;q=0.9’ -H ‘Cookie……..c?id=pcmcat303600050004′
</font=10>

It helps to isolate the issue and now I can drill down to the code and understand where the bottleneck is occurring.

On the Best Buy page I also found that the ad image size is 1000×1000, which is good for big desktops, but when I search on mobile I should get a smaller image. On mobile it takes time to download big images (network) but also to display it on screen (rendering). By reducing the image size, it will not affect the mobile user experience and it will improve the site performance.

Summary

User expectations are raising the bar on app performance and release velocity are requiring Dev & QA to fix fast. In most cases the performance issues are related to access to the databases or network. Analyzing the HAR file will give you more information about both and help you with the following:

• What has been transferred over the network
• How much time it took to execute specific transaction
• How the third party integration affects your app
• Was the right image matched to the right screen size

But…

Keeping everything we just spoke about in mind and how beneficial the HAR files can be, it is also important to understand that this process is very complicated and requires manual actions to setup an HAR file. This is why the Perfecto cloud made it simple to collect HAR file data as part of the automation scripts, in order to give our customers the ability to analyze their mobile and web applications and improve quality based on the network data.