BreadcrumbHomeResourcesBlog How To Use a HAR File To Find The Hidden Performance Bottlenecks In Your App January 10, 2018 How To Use a HAR File to Find The Hidden Performance Bottlenecks in Your AppMobile Application TestingBy Uzi EilonApp 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. Table of ContentsWhat Is a HAR File?How to Use a HAR File ViewerHow to View a HAR FileHow to Record a HAR File How to Analyze Performance With a HAR File ViewerSummaryRelated ContentTable of Contents1 - What Is a HAR File?2 - How to Use a HAR File Viewer3 - How to View a HAR File4 - How to Record a HAR File5 - 6 - How to Analyze Performance With a HAR File Viewer7 - Summary8 - Related ContentBack to topWhat 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.Back to topHow to Use a HAR File ViewerUsing 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 3rd 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 3rd party analytics company.Back to topHow to View a HAR FileYou 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.Back to topHow to Record a HAR FileIn 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 ProxyMITM Proxy https://mitmproxy.org/ Back to topHow to Analyze Performance With a HAR File Viewer1.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.Back to topSummaryUser 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 networkHow much time it took to execute specific transactionHow the third party integration affects your appWas the right image matched to the right screen sizeBUT ...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 Back to topRelated ContentThe Future of Software Testing & DevOps Trends for 2020The Keys to a Strong CI/CD PipelineBest Practices for Your Automated Test CasesBack to top
Uzi Eilon Director of Technology, Perfecto Uzi joined Perfecto Mobile seven years ago after a fifteen year career as a software developer and manager at IDF, Netrialty, Comverse and Sundisk. Over the past seven years, Uzi has helped grow Perfecto by managing expanding R&D teams and leading sales engineering teams. His fields of expertise include agile methodologies, mobile application testing, automation tools, and defining customer projects and on-boarding.