How to Use HAR Files to Analyze Website Performance Over Time

Website performance has a direct impact on user experience, conversion rates, and search engine rankings. But performance isn‘t a one-time optimization—it requires ongoing analysis and tweaking to ensure your site is as fast as possible over time, even as content and functionality evolves.

One powerful tool for measuring and monitoring website performance is the HTTP Archive (HAR) file format. HAR files provide a detailed log of a web browser‘s interactions with a page, including granular timing data for each resource loaded. By capturing and analyzing HAR files over time, we can identify opportunities for optimization and track the impact of performance tweaks.

In this guide, we‘ll walk through what exactly HAR files are, how to generate them using browser developer tools, best practices for analyzing them to assess performance, and an example of using them to measure the effect of an optimization. By the end, you‘ll be equipped to use HAR files to keep your site fast in the long run.

What Are HAR Files?

HAR stands for HTTP Archive, and is a standardized JSON-formatted log of a web browser‘s interactions with a site as it loads a page. A HAR file contains detailed performance data like:

• List of resources loaded (HTML, CSS, JS, images, etc.)
• HTTP headers for each request and response
• Timing data (DNS lookup, TCP handshake, SSL, TTFB, content download) for each resource
• Initiator of each resource (script, redirect, user navigation)
• Cookies, query string parameters, and POST data

So a HAR file is essentially a complete snapshot of everything the browser did to load the page along with precise timings. This data can then be analyzed to identify performance bottlenecks like slow server response times, render-blocking scripts, unoptimized images, etc.

Generating HAR Files

HAR files can be easily generated using the built-in developer tools in Chrome, Firefox, and Safari. Here‘s how:

Chrome

1. Open DevTools (Cmd+Option+I on Mac or Ctrl+Shift+I on Windows)
2. Go to the Network tab
3. Check the "Preserve log" option to persist network logs across page loads
4. Load the page you want to capture a HAR for
5. Once loaded, right-click anywhere in the Network log and select "Save as HAR with Content"
6. Choose a location and save the HAR file

Firefox

1. Open the Network Monitor (Cmd+Option+E on Mac or Ctrl+Shift+E on Windows)
2. Check "Persist Logs" to keep logs across page loads
3. Load the page to capture
4. Click the HAR download icon in the top right of the Network monitor
5. Save the HAR file

Safari

1. Enable the Develop menu in Safari‘s Advanced Preferences
2. Open the Web Inspector (Cmd+Option+I)
3. Go to the Network tab
4. Load the page
5. Once loaded, click the Export icon in the top right of the Network tab
6. Save the HAR file

Some tips for getting consistent HAR snapshots:

• Use private/incognito mode to avoid browser extensions interfering
• Disable cache in DevTools to capture full load behavior
• Run multiple captures to account for network variability
• Emulate a consistent connection speed (e.g. "Fast 3G") for comparable HARs over time

You can also generate HAR files from the command line using tools like Chrome‘s Lighthouse, which we‘ll explore later.

Analyzing HAR Files

Once you‘ve captured a HAR file, the real fun begins! By digging into the data contained in the file, we can identify opportunities to optimize resource loading and improve performance.

There are a number of free online tools for visualizing and analyzing HAR files, like Google‘s HAR Analyzer and Jan Odvarko‘s HAR Viewer. These provide a nice GUI for exploring all the data contained in the HAR.

Some key things to look for when analyzing a HAR file for performance:

• Large resources (> 100KB) that could be optimized or lazily loaded
• Resources loaded from many different domains/servers
• Render-blocking scripts or stylesheets loaded in the HEAD of the document
• Uncompressed text resources (HTML, CSS, JS) that could be GZipped
• Multiple resources loaded from the same URL that could be combined
• Slow TTFB (time to first byte) indicating server delays
• Gaps in the waterfall visualization showing wasted time

It‘s also useful to compare two HAR files captured before and after making an optimization to quantify the impact of the change. For example, you might capture a HAR before and after deferring script loading, enabling text compression, or resizing hero images. The overall load time and individual resource timings can show how much these tweaks improved performance.

Some metrics to look at when comparing HARs:

• Total page load time
• Time to first meaningful paint
• Number of requests
• Total kilobytes transferred
• JavaScript parse/compile time

You can also use online tools to calculate metrics like Speed Index and Time to Interactive from a HAR file to quantify the user-perceived performance.

Example: Using HARs to Measure Impact of Performance Optimizations

Let‘s walk through an example of using HAR analysis to assess the impact of some common web performance optimizations. We‘ll use the Moovweb website as a test case.

First, we‘ll capture a HAR file of the initial page load using Chrome DevTools as described above. Then we‘ll implement some performance best practices:

• Minify and compress (GZip) JavaScript and CSS files
• Optimize images (resize and compress)
• Eliminate render-blocking resources (use defer/async for scripts)
• Enable HTTP/2 and optimized caching headers

After implementing these optimizations, we‘ll capture another HAR file of the optimized page load. Now let‘s compare the two HARs in Jan Odvarko‘s HAR Viewer:

In the top (original) HAR, we can see that the total load time was 2.07s and page size was 1.2MB. After our optimizations, the load time decreased to 1.03s and the transfer size is down to 621KB—over a 50% reduction in both metrics!

Looking at the waterfall view, we can see that the original HAR had a number of render-blocking scripts and unoptimized images that slowed down the page rendering. The optimized HAR shows fewer overall requests, smaller sizes, and faster loading across the board.

So by capturing HAR files before and after, we‘re able to quantify the significant positive impact that implementing web performance best practices can have on page load times.

Best Practices for Analyzing Performance with HARs

To get the most value out of using HAR files to assess and monitor web performance, here are some tips and best practices to keep in mind:

• Standardize on one browser/tool for generating HARs to ensure consistency
• Emulate a consistent connection speed for comparable results over time
• Capture multiple HARs per page and average the results for more accuracy
• Integrate HAR dumps into your build process to enable continuous monitoring
• Focus on metrics that align with Core Web Vitals and user-perceived performance
• Use HARs alongside other testing tools like Lighthouse and WebPageTest

Speaking of Lighthouse, it has a super handy command line interface that can dump a HAR file along with its usual performance audits. For example:

lighthouse https://www.freecodecamp.org/ --chrome-flags="--headless" --output json --output-path ./fcc-report.json --save-assets

This will generate a JSON Lighthouse report and save all the assets it loads (including the HAR file) from the page. You can then integrate this into a Continuous Integration workflow to monitor performance on every code change.

Limitations of HAR Analysis

As useful as they are, HAR files aren‘t a complete performance measurement on their own. Since they only capture the network activity for loading a page, they miss out on some other important aspects of performance like:

• UI responsiveness and interactivity
• CPU usage and memory consumption
• User Timing API measurements
• Backend processing/rendering time
• Actual user experience in the wild

So while HARs are great for measuring network-related performance and identifying optimization opportunities, it‘s best to use them alongside other tools like:

• Lighthouse for auditing web performance, accessibility, SEO, and best practices
• Browser developer tools like the Performance Monitor for measuring runtime perf
• Chrome User Experience Report for real-world performance data
• Web Vitals for measuring actual user-centric performance metrics

Conclusion

HAR files are a powerful tool for capturing and analyzing web performance data over time. By generating them consistently and analyzing them with an eye for key metrics and optimization opportunities, you can keep your website fast for the long haul.

Some key tips to remember:

• Use browser dev tools or Lighthouse to generate HAR files
• Look for large/slow/render-blocking resources, uncompressed data, and duplicate requests
• Compare HARs before and after changes to measure impact
• Integrate HAR capture and analysis into your workflows for continuous monitoring
• Combine HAR data with other tools like Lighthouse and Web Vitals for a complete picture

Equipped with these techniques, you‘ll be well on your way to ensuring that your website is consistently fast and responsive for your users. So go forth and optimize!