The HAR file format is an evolving standard and the information contained within it is both flexible and extensible. You can expect a HAR file to include a breakdown of timings including:
The data is stored as a JSON document and extracting meaning from the low-level data is not always easy. But with practice a HAR file can quickly help you identify the key performance problems with a web page, letting you efficiently target your development efforts at areas of your site that will deliver the greatest results.
As HAR files are still an evolving format, support can be patchy and it may take some work to get your HAR file. High quality monitoring services will collect the HAR data for each sample they take. Automated testing tools can be tailored to get HAR files.
It is possible to use Firefox, Firebug, and NetExport together to generate a HAR file for a specific URL. That said, if you are using a modern browser it can generate a waterfall diagram, without the need to capture the HAR file as an interim representation, and this provides most of the information you will need in an instantly available view.
As the file is in a JSON format, this is relatively easy to process with software, but it can be difficult for us humans to visualize. Here are three options that will create visualizations of HAR files:
Once you have a clear visual layout of your HAR file, you need to know what to look for. When looking at the HAR file, you will graphically see for every object, when it starts loading and the time each step of the object load process takes.
Next, identify the critical path. By definition, reducing the load time of any item on the critical path will reduce your load time. In the interim, the easiest way to determine your critical path is to start at the last step to complete in the HAR file, which is always on the critical path, and then to work backwards looking for the item that prevented that item from loading sooner. To do this systematically can be time-consuming, although as a rule of thumb anytime an object is the only item in progress, it is very likely to be on the critical path.
At the Velocity Conference, Google demonstrated the forthcoming version of PageSpeed insight that will show the critical path of a web site, and this looks like it will be a great tool and a potentially big time saver. For each item on the critical path look to see how you can reduce its load time, as this will reduce the page load time. Reducing load times of items not in the critical path will not reduce the page load time.
After identifying the critical path, it is important to identify the items causing load time issues in the path. Here are some things to look for:
The HAR view below shows a page that is well down the path to optimization being loaded first with a fresh cache and then a second time with the cache primed. In the initial load the page has two CSS files, two JS files, some images and analytics trackers. Note that for the second page load, the page requires only the HTML document, a JSON document with the users customized data, and some analytics trackers, which are loaded asynchronously.
Armed with your HAR File visualization and these tips, you’re now ready to optimize your website speed.
yslow can be run from the command line and given a HAR file. You can include this as part of your automated regression testing to ensure your most recent changes are not degrading your websites behavior.