What is a browser waterfall chart?

When a page is slow, your first instinct might be to check Lighthouse scores or Core Web Vitals. Those tell you that something is wrong. The browser waterfall tells you what to fix. It shows every request your page makes, in the order the browser made them, with timing for each one. It's the closest thing to a full trace of a page load you'll get without running a profiler in DevTools. 

This article explains what the waterfall shows, how to find it in Niteco Performance Insights, and how to use it to identify and prioritize what to fix.

The waterfall provides a visual representation of how all the assets on your website load, including CSS, JavaScript, HTML, images, plugins, and third-party content. Each row is a single network request. The horizontal position of each bar shows when the request started relative to page load, and the width shows how long it took.

Above the request rows, the waterfall overlays a set of diagnostic timelines: CPU utilization, bandwidth usage, browser main thread activity, long tasks, and layout shift markers. These give you context for what the browser was doing at any given moment during the load. A long JavaScript execution that blocks the main thread, for example, shows up as a spike in the CPU lane at the same time a cluster of requests is stacked up waiting.

The two key timing markers are Fully Loaded, which is measured from the start of navigation until there are 5 seconds of no network activity after the DOM Complete event, and Visually Complete, which marks the point when all content in the viewport has fully rendered. These are visible as vertical lines across the waterfall, so you can see which requests were still running after the page appeared done to the user.

Open the Performance section of your report by clicking Performance in the left menu. Scroll down to the browser waterfall section and click Expand to show the detailed network chart.

The toolbar above the chart gives you a few options. Video plays back the test recording so you can watch the page render frame-by-frame alongside the request timeline. Fit screen rescales the chart to fit your viewport. Pin keeps the toolbar fixed at the top as you scroll through a long waterfall.

Get a free trial for Niteco Performance Insights to get access to our browser waterfall analysis.

Click any request bar to open the detail panel. This is where the waterfall earns its keep for debugging.

The panel has four tabs: Summary, Headers, Certificate, and HTML Source. Summary shows the request URL, HTTP status code, timing, size, and a breakdown of connection stages including DNS lookup, connect time, and wait time. Headers shows the full request and response headers. Certificate shows SSL/TLS details for HTTPS requests. HTML Source shows the response body when the resource is an HTML document.

The Summary timing breakdown is the most immediately useful. If a request has a long wait time (sometimes labeled TTFB for that resource), the problem is server-side: slow response, missing cache headers, or an overloaded origin. If the download time is long, the file is large and transfer time is the issue. Those are different problems with different fixes, and the waterfall shows you which one you're dealing with.

Click the Analyze Harview Requests button (star icon) in the toolbar. The system runs an AI analysis of the network requests. When it finishes, request bars that have suggestions show a recommendation badge. Click on a bar to open the detail panel, then go to the Recommendations tab to see fix suggestions for that specific request, for example, how to compress an image, defer a script, or reduce the impact of a third-party call.

The suggestions are prioritized, so you're not looking at a flat list of 40 items and guessing where to start. Resources with the biggest impact on load time or rendering are flagged first. That's useful when you have a page with a complex request chain and limited development time to address it.

Worth being clear about what this does and doesn't do: the analysis identifies what to fix and how, but the fixes themselves happen in your codebase or CDN configuration. The waterfall won't push a change for you. What it does is narrow a slow page down to specific files, specific requests, and specific reasons, which is most of the diagnostic work.

The browser waterfall is where you go when a score or a metric isn't enough. It gives you the full request sequence, timing at each stage, third-party breakdowns, and per-request fix suggestions with prioritization built in. Open it from the Performance tab of any report in Niteco Performance Insights, use the filters to cut the noise, and click into individual requests to find the specific cause of the slowdown. 

Start a performance test with Niteco Performance Insights to see your own (or competitors') waterfall.