How To Use a HAR File to Find The Hidden Performance Bottlenecks in Your App

App performance can be a killer problem for any digital company, especially when the performance issues take too long to identify. That's why it's important to know how to use a HAR file viewer. 

In fact, 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 them. 

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.

How to Use a HAR File Viewer

Using a HAR file viewer allows you to view HAR files. These 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 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.

How to View a HAR File

You can view a HAR file by using different tools. Here are two UI tools I suggest 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.

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 :

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

How to Analyze Performance With a HAR File Viewer

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 1000x1000, good for big desktop 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 these files can be, it is also important to understand that this process is very complicated and requires manual actions to set them up.

This is why the Perfecto cloud made it simple to collect data from these files as part of the automation scripts. This gives you the ability to analyze mobile and web applications and improve quality based on network data.

Give it a try for free today.

Try Perfecto

Related Content

• The Future of Software Testing & DevOps Trends for 2020
• The Keys to a Strong CI/CD Pipeline
• Best Practices for Your Automated Test Cases