Visualize resource loading waterfall using the Resource Timing API with DNS, TCP, and download breakdowns.
The Resource Timing API records a timestamp for every phase of each request a page makes: DNS lookup, TCP connection and TLS handshake, time to first byte, and body download. This tool takes those entries and draws them as a waterfall, one horizontal bar per resource with each phase as a colored segment, alongside the numeric breakdown and transferred byte counts. The surprise most users hit: cross-origin resources - fonts, analytics, CDN assets on another host - report their phase timings as zero unless the server sends a Timing-Allow-Origin header, so those bars arrive with blank segments. Everything is computed in the browser from the page's own timeline; nothing is uploaded.
A concrete input and expected output from the current implementation.
Input
[
{
"name": "https://example.com/assets/app.js",
"initiatorType": "script",
"startTime": 124.3,
"domainLookupStart": 124.3,
"domainLookupEnd": 126.1,
"connectStart": 126.1,
"secureConnectionStart": 127.2,
"connectEnd": 131.8,
"requestStart": 131.9,
"responseStart": 145.6,
"responseEnd": 148.2,
"transferSize": 24811,
"encodedBodySize": 24442,
"decodedBodySize": 24442
}
] Expected output
app.js (script): DNS 1.8 ms, TCP 1.1 ms, TLS 4.6 ms, TTFB 13.7 ms, Download 2.6 ms, Total 23.9 ms; 24,811 bytes transferred (24,442 encoded)
Each segment is the difference between adjacent timestamps: DNS ends at domainLookupEnd, the TCP handshake ends where TLS begins at secureConnectionStart, TTFB spans requestStart to responseStart, and download spans responseStart to responseEnd. The segments plus the 0.1 ms gap between connectEnd and requestStart sum to the total, 148.2 - 124.3 = 23.9 ms.
The tool reads the browser's resource timing buffer, which holds one PerformanceResourceTiming entry per requested resource: the final URL, initiator type (script, img, css, link, xmlhttprequest, fetch), byte counts, and the phase timestamps. The buffer resets on every navigation and only covers the current page, so a reload with the tool active is usually needed for a complete picture.
Each bar spans startTime to responseEnd. DNS is domainLookupEnd minus domainLookupStart; connection is connectEnd minus connectStart, with the TLS portion between secureConnectionStart and connectEnd on HTTPS; TTFB is responseStart minus requestStart; download is responseEnd minus responseStart. On plain HTTP secureConnectionStart is 0, so no TLS segment is drawn.
They are cross-origin, and their servers did not send a Timing-Allow-Origin header, so the browser zeroes the phase timestamps - a privacy rule, not a tool bug. Have those hosts send Timing-Allow-Origin: * (or your origin) and reload; the segments then appear.
Most likely the browser served it from its HTTP cache, so zero bytes crossed the network; transferSize counts bytes actually transferred. Clear the cache, or add a cache-busting query, and reload to see the real wire size. Cross-origin responses without Timing-Allow-Origin also report zero sizes.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.