HAR File Viewer & Analyzer

HAR (HTTP Archive) is a standardized JSON format for recording HTTP transactions between a browser and web servers. The HAR 1.2 specification, maintained by the W3C Web Performance Working Group, defines a structured schema capturing every detail of each request-response cycle: URLs, HTTP methods, status codes, request and response headers, cookies, body content, and granular timing data broken into DNS resolution, TCP connection, TLS negotiation, server wait (TTFB), and content transfer phases. Every modern browser's developer tools can export network recordings in this format.

Understanding the Waterfall Chart

The waterfall visualization is the primary tool for diagnosing network performance bottlenecks. Each horizontal bar represents one HTTP request, positioned along a shared time axis. The bar's left edge marks when the request started relative to the first request in the recording. The colored segments within each bar map to the five timing phases defined in the HAR specification:

• DNS (blue) -- Time spent resolving the hostname to an IP address. Nonzero only for the first request to each unique domain; subsequent requests reuse cached DNS results.
• Connect (orange) -- TCP three-way handshake duration. Typically 10-50ms for same-region servers, 100-300ms for cross-continent connections.
• SSL/TLS (purple) -- Time to negotiate the encrypted connection. Modern TLS 1.3 completes in one round trip; older TLS 1.2 requires two. This phase is absent for plain HTTP requests.
• Wait/TTFB (green) -- Time to First Byte, measured from the end of the request send to the first byte of the response. This reflects server processing time plus network latency. A high TTFB often indicates slow database queries, missing server caches, or overloaded application servers.
• Receive (gray) -- Time to download the complete response body. Large files on slow connections show long receive phases. Compression (gzip, Brotli) significantly reduces this duration.

Request Categories

The tool automatically categorizes each request based on the response MIME type and URL pattern. Document entries are HTML pages. JS entries are JavaScript files. CSS entries are stylesheets. Image entries cover all raster and vector image formats. Font entries are WOFF2, TTF, OTF, and EOT font files. XHR entries capture API calls (JSON, XML, plain text, and non-GET requests). Everything else falls into Other.

Common Performance Patterns

Certain waterfall shapes indicate specific performance issues. A staircase pattern where each request starts only after the previous one finishes reveals serial resource loading that could benefit from parallelization. A wide green band on early requests suggests slow server response times. Multiple requests with identical DNS and connect phases to the same host may indicate missing HTTP/2 connection reuse. Requests blocked behind a large JavaScript file point to render-blocking resources that should be deferred or loaded asynchronously. Compare the waterfall shapes before and after optimization to quantify the improvement. You can also use related tools like the JSON Formatter to inspect API response payloads or the URL Parser to break down complex request URLs.

HAR files are the standard way to share network traces across teams, and a dedicated viewer makes analysis faster and more secure than the alternatives. Here are the most common scenarios where this tool helps:

• Debugging slow page loads -- Identify which requests contribute the most latency by scanning the waterfall chart. Sort by time to find the slowest requests, filter by type to focus on API calls versus static assets, and examine TTFB values to distinguish server-side delays from network transfer time.
• API performance analysis -- Filter to XHR requests and inspect response times, payload sizes, and response bodies. Compare before-and-after HAR files when optimizing API endpoints to verify improvements. Use the Response tab to examine JSON payloads without switching to a separate JSON Formatter.
• Cross-team collaboration -- Share HAR files with backend engineers, DevOps teams, or support staff who may not have access to the original environment. The recipient can load the HAR file here without installing browser extensions or DevTools expertise. The structured view makes it easy to point to specific requests when discussing performance issues in code reviews or incident reports.
• Privacy-first analysis -- HAR files often contain sensitive data: session cookies, authorization headers, API tokens, and personally identifiable information in request and response bodies. Unlike online HAR viewers that upload your file to a remote server, this tool parses everything locally in your browser. Your network trace data never leaves your device, making it safe to analyze production HAR files containing real user data.
• Third-party resource auditing -- Filter by domain (search for the CDN hostname) to isolate requests to third-party services like analytics scripts, ad networks, or external fonts. Measure their impact on total page load time and identify candidates for removal, lazy loading, or self-hosting. Inspect headers to verify caching policies and security configurations like CORS headers and Content-Security-Policy directives.

For deeper URL analysis, use the URL Parser to decompose complex request URLs. To debug cURL commands derived from HAR entries, try the cURL to Code converter.