HAR Analyzer

Analyze HTTP Archive files — timings, performance, waterfall, slowest requests.

📦
Drop HAR file here or click to browse

Exported from Chrome DevTools → Network → "Export HAR" or Firefox / Safari

— or paste HAR JSON —

What is HAR File Analyzer?

HAR File Analyzer parses and visualizes HTTP Archive (HAR) files exported from browser DevTools. Upload or paste a HAR file to see a request waterfall chart, response time breakdown (DNS, TCP, SSL, TTFB, download), resource type distribution, total payload sizes, and individual request details. Identify slow requests, large resources, render-blocking assets, and third-party domain dependencies.

A HAR (HTTP Archive) file is a JSON-formatted log of a web browser's interactions with a server — every HTTP request, response, timing, and header captured during a browser session. HAR files are generated by Chrome DevTools (Network tab → Export HAR), Firefox Developer Tools, and Safari Web Inspector. They're used for performance analysis, bug reproduction, and sharing network activity with other developers or support teams.

Key performance metrics in HAR files: TTFB (Time to First Byte) — how long before the server started responding; DNS lookup time; TCP connection time; SSL/TLS handshake time; content download time. The waterfall chart shows these phases as horizontal bars, allowing you to spot bottlenecks: long DNS for third-party domains, slow TTFB indicating a slow server, large resources that take long to download, and requests that block parallel loading.

How to Use

  1. Export a HAR file from Chrome DevTools: F12 → Network tab → right-click → 'Save all as HAR'.
  2. Upload the .har file or paste the JSON content into the text area.
  3. View the request waterfall chart — each row is a request, columns show timing phases.
  4. Click any request to expand headers, cookies, request body, and response body.
  5. Use the filters (resource type, domain, search) to focus on specific requests or third-party domains.

Examples

Find slowest requests

Result: Sort by duration → largest 'time' values → api.example.com/heavy-endpoint: 2.4s TTFB

Audit third-party scripts

Result: Filter by external domains → 12 third-party domains identified, analytics.js: 340 KB

Check for caching

Result: Status 304 (Not Modified) = cached, Status 200 with large response = not cached

Frequently Asked Questions

What is TTFB and what is a good value?

TTFB (Time to First Byte) is the time from when the browser sends a request to when it receives the first byte of the response. It includes: DNS lookup + TCP connection + SSL handshake + server processing time. A good TTFB: under 200ms for co-located users, under 600ms for global users. High TTFB indicates slow server processing (database queries, heavy computation), not network issues. Improve TTFB with: caching, database optimization, CDN for static content, and server-side performance profiling.

What causes a waterfall to show many sequential requests instead of parallel?

HTTP/1.1 has a browser limit of 6 connections per domain. If your page loads from one domain with many resources, only 6 load at once. Solutions: HTTP/2 (multiplexes all requests over one connection), domain sharding (split resources across multiple subdomains — no longer needed with HTTP/2), bundling (reduce total requests). Also: render-blocking scripts (no defer/async) must complete before the browser continues parsing HTML, creating serialized loading.

How do I reduce my page's total request count?

Strategies: (1) Bundle JavaScript and CSS (Webpack, Vite, Parcel). (2) Sprite sheets for small icons (or use icon fonts, or SVG inline). (3) Use CSS instead of images for simple shapes and patterns. (4) Load non-critical third-party scripts with defer or async. (5) Lazy-load images (loading='lazy'). (6) Use HTTP/2 server push for critical resources. (7) Inline critical CSS. A page load under 50 requests is a reasonable target for most sites.

What is preload and prefetch in HTTP headers?

Link: ; rel=preload tells the browser to fetch a resource early (during HTML parsing) because it will be needed soon — use for critical CSS, fonts, and hero images. Link: ; rel=prefetch tells the browser to fetch a resource when idle because it may be needed in the future — use for next-page resources. rel=preconnect establishes a connection to a domain before the resource is requested — use for third-party domains (fonts.googleapis.com, cdn.example.com).

How do I share a HAR file without exposing sensitive data?

HAR files contain all request and response headers, including cookies, session tokens, and Authorization headers. Before sharing: open the HAR file in a text editor and search for: Set-Cookie, Authorization, Cookie, token, session, X-Auth. Replace sensitive values with placeholders. Tools like har-sanitizer (npm package) automate this. Chrome DevTools has a 'Sanitize' option when exporting HAR in newer versions. Never share raw HAR files from production sessions containing authentication tokens.

Related Tools