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 them.
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?
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 3rd party code.
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 3rd party analytics company.
Step 3: How to record a HAR file
A couple tools that can be used to record data :
- 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?
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, 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.
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
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 in order to give customers the ability to analyze their mobile and web applications and improve quality based on network data.
To read more, check out: