Resource Waterfall draws every request the page made on a timeline, each bar broken into its real phases — queued, DNS, TCP, TLS, waiting and download — with markers for FCP, LCP, DOMContentLoaded and load.
When a page feels slow, the question is always the same: what is it waiting for? The browser's own answer lives in the Network panel, which means opening DevTools, docking a drawer over the page you are inspecting, and reloading to catch the start of the load.
Resource Waterfall puts that timeline in a floating panel beside the page. Every request appears as a bar positioned by when it started and segmented by where its time actually went: queued or stalled, DNS lookup, TCP connect, TLS handshake, waiting for the server, then downloading. A long blue segment is a slow server; a long green one is a fat file; a long grey one means the request sat waiting its turn. The distinction decides what you should fix.
Dashed markers across the timeline show First Contentful Paint, Largest Contentful Paint, DOMContentLoaded and load, so you can see which requests finish before the user sees anything and which ones are still going afterwards. Render-blocking resources and cache hits are flagged on each row, and a single Blocking filter cuts the list down to what is actually delaying first paint.
Filter by type, search by URL, or sort by slowest or largest to find the worst offender quickly. Click any row for its full URL, protocol, transfer and decoded sizes, status and complete phase breakdown. Requests that arrive while the panel is open stream straight in, and Export JSON copies the whole timeline, milestones included, so a performance finding can be handed to someone else without a screenshot.
Each bar is split into queued, DNS, TCP, TLS, waiting and download, so a slow server, a fat file and a queued request are immediately distinguishable.
Dashed lines for FCP, LCP, DOMContentLoaded and load show which requests complete before the user sees content and which are still running after it.
One click reduces the list to the resources actually holding up first paint, with total blocking counts in the summary bar.
Resources served from cache are marked and labelled instead of appearing as mysterious zero-byte rows, so you can verify your caching really works.
Narrow by type — document, CSS, JS, images, fonts, XHR, media — search by URL, or sort by slowest or largest to reach the worst offender in seconds.
Copy the whole waterfall as JSON, including milestones, totals and per-request phases, to attach to a ticket or compare against a later run.
Filter to render-blocking resources and see the exact stylesheets and scripts standing between your visitor and visible content.
Sort by slowest and watch an analytics, font or chat provider appear at the top with a long waiting phase that has nothing to do with your code.
Read the phase colours: time spent waiting is a backend or CDN problem, time spent downloading is a file-size problem. The fix is different for each.
Reload and confirm that assets come from cache and that transfer sizes are far smaller than decoded sizes, proving compression is actually on.
Export the timeline as JSON and attach it to a ticket so the next person sees the same numbers instead of trying to reproduce your session.
Click the Resource Waterfall icon in the DevSuite Pro dock. Everything the page has loaded so far appears on the timeline immediately.
Reload with the panel open to capture the load from the very first request, including the document itself and the paint milestones.
Press the blocking chip to see only render-blocking resources, or pick a type such as js or img. Sort by slowest to put the worst offender on top.
Click any row for its full URL, protocol, sizes, status and a phase-by-phase breakdown in milliseconds — and copy the URL if you need it.
Export JSON copies the full timeline with milestones and totals, ready to paste into a ticket or keep as a before-and-after record.
Install DevSuite Pro for free and unlock 71+ developer tools for your browser.
