What Is a HAR File?

HAR, short for HTTP Archive, is a format used for tracking information between a web browser and a website. A HAR file is primarily used for identifying performance issues, such as bottlenecks and slow load times, and page rendering problems. The HAR file keeps track of each resource loaded by the browser along with timing information for each resource.

HAR file components

HAR file information is stored in JSON format which means in order to visualize the information easier, tools such as the HAR Viewer can be used. Inside the HAR file, there will be several timing components. Based on Google's Network Performance article, the following outlines and explains each component that can exist in a HAR file generated from Google Chrome's developer tools.

• Stalled/blocking: The time the request spent waiting before it could be sent. This includes any time spent in proxy negotiation or when waiting for an established connection to become available for reuse.
• Proxy negotiation: The time spent negotiating with the proxy server connection.
• DNS lookup: The time spent performing the DNS lookup.
• Initial connection/connecting: The time it took to establish a connection.
• SSL: The time spent completing an SSL handshake.
• Request sent/sending: The time spent issuing the network request.
• Waiting (TTFB): The time spent waiting for the initial response, also known as the Time To First Byte.
• Content download/downloading: The time spent receiving the response data.

Timing reads are displayed for each resource of a website when viewing them in Google Chrome's Developer Tools - waterfall view. You can view this by going to Menu > More Tools > Developer Tools and selecting the Network tab. You will need to refresh the page to see each resource's details.

When in the waterfall view, you can hover over a single resource to display additional timing details.

Generating a HAR File

Depending on which browser you are using, there are a few ways to generate a HAR file.

1. If you are using IE, you will need to download HTTP Watch. Once you have it installed, you will need first to record the behaviour you would like to capture and then export the capture to HAR format.
2. If you are using Firefox, you can simply open the Developer Tools and select the Network tab. From here you can allow the capturing of the HTTP session of the current tab. Once you have your capture, you can export it to a HAR file by clicking on "HAR" and selecting "Save All As HAR".
3. If you are using Google Chrome, you can simply open the DevTools and select the Network tab. Ensure the round button at the top left of the DevTools window is red and select the Preserve Logs option. Once you have recreated what you would like to capture, you can save the HAR file by right-clicking on the grid and selecting "Save as HAR with content".

Analyzing the HAR file

As previously mentioned, the components of a HAR file can be visualized in many different ways including:

• From the browser
• Using HAR Viewer
• Using a website speed test tool

All of these methods give a visual representation of how much time it is taking each resource to load. With this information, we can analyze where there is potential to decrease page loading bottlenecks and increase site speed. Common things to look out for when analyzing a HAR file include the following:

• Resources not being cached: Static items do not need to be reloaded every time a page is loaded. Doing this will have an effect on page loading time as the browser must request all of the same resources every time the user revisits the page.
• Resources with the longest load time: Depending on the file type of the resource, load times can be decreased either by compressing the resource and/or combining or removing unused elements.
• Long DNS lookup times: DNS lookup times vary due to a number of factors. However if you have many resources being loaded from third party websites, this can increase the DNS lookup time for these resources thus decreasing the overall speed of your site. If this is the case, consider moving some of these resources to your origin server or CDN if you prefer for them to be cached.

Summary

A HAR file contains a lot of valuable information for determining where you can improve website performance. With the ability to view HAR data directly from the browser or on a speed test website, it is quite easy to access this information. Additionally, in the case that you need to send a HAR file to someone for analysis, this can easily be done from within the browser with the processes mentioned above.