Resource Timing Viewer

The Resource Timing API is a browser performance interface that provides detailed timing information for each resource loaded by a web page. It exposes metrics like DNS lookup time, TCP handshake duration, SSL negotiation, Time to First Byte (TTFB), and content download time for every asset (JS, CSS, images, fonts, XHR, etc.). This data is accessible via performance.getEntriesByType('resource') and is invaluable for diagnosing front-end performance bottlenecks.

Timing fields can be zero for several reasons: (1) Cached resources — browsers serve cached assets instantly, skipping DNS/TCP/SSL phases. (2) Cross-origin restrictions — if the resource server doesn't include the Timing-Allow-Origin response header, detailed timing data is obscured for security reasons. (3) Reused connections — HTTP/2 and HTTP/3 multiplex requests over a single connection, so DNS/TCP may already be established. (4) Same-origin resources typically expose full timing data.

Time to First Byte (TTFB) measures the time from the initial request until the first byte of the response arrives. It's calculated as responseStart - requestStart. A high TTFB indicates server-side slowness (database queries, API processing, network latency). Google recommends TTFB under 200ms for optimal performance. TTFB is a critical metric because nothing can render until the first byte arrives.

Use this tool to sort by Duration (descending) or enable the "Slow only (>1s)" filter. Look for resources with high TTFB (server issue), long download times (large files), or multiple sequential DNS/TCP phases (too many unique domains). The waterfall chart visually highlights long bars. Common culprits include unoptimized images, bloated JavaScript bundles, and third-party scripts.

A transferSize of 0 typically indicates the resource was served from the browser cache (304 Not Modified or cached locally). It may also appear as 0 for cross-origin resources without the Timing-Allow-Origin header. In this tool, we label these as "Cached" or "Unknown" to help you distinguish. Cached resources are great for performance!

You can Export CSV to open in Excel/Google Sheets, or Copy JSON to share raw Performance API data. You can also Import previously saved JSON data or data collected from Chrome DevTools using JSON.stringify(performance.getEntriesByType('resource')). This makes it easy to compare page loads or share findings with your team.

These phases represent the network connection lifecycle: DNS Lookup — resolving the domain name to an IP address. TCP Handshake — establishing a reliable connection (SYN, SYN-ACK, ACK). SSL/TLS Negotiation — encrypting the connection (only for HTTPS). Request — sending the HTTP request. TTFB — waiting for the server to process and start responding. Download — receiving the response body. Each phase adds latency; minimizing them improves load speed.

This tool analyzes the current page you're viewing using the browser's built-in Performance API. To analyze a different website, open that website in your browser, then run this tool on that page (or use a bookmarklet). You can also use Chrome DevTools → Performance tab → record a page load → export the data and import it here using the Import button.