Waterfall charts are one of the most important tools for analyzing web performance in Catchpoint’s Records module. They visually map out every request made by a browser to load a webpage, showing both sequence and duration. By reading a waterfall chart, you can quickly identify bottlenecks, errors, and optimization opportunities.
Structure of a Waterfall Chart
- Each row represents a single request (e.g., HTML, CSS, JavaScript, image, font, API call).
- The left side shows details such as request number, domain, and resource type.
- The horizontal axis represents time (milliseconds or seconds).
- Colored bars represent how long each request took, and are further broken down by stage, with each color representing a different stage of the request.
Color Coding and Stages
Typical stages in Catchpoint’s waterfall charts include:
- DNS Lookup – Time spent resolving the domain name.
- TCP Connect – Establishing the network connection.
- SSL Handshake – Negotiating secure connections (if HTTPS).
- Wait/Blocking – Time before a response starts.
- Send – Request data sent to the server.
- TTFB (Time to First Byte) – Waiting for the first byte from the server.
- Content Download – Time to receive the response body.
Catchpoint uses distinct colors to make these stages clearer (e.g. green for DNS, orange for connect, purple for SSL, etc.). You can hover over a request's bar to see a breakdown of each request stage:
Why Requests May Be Blocked
In a waterfall chart, some requests show Blocked time before they start. This doesn’t mean the server was unresponsive; it usually reflects browser behavior. Common reasons for blocked requests include:
- Connection limits: Browsers only allow a certain number of simultaneous requests to the same host. Later requests must wait until earlier ones finish.
- Resource prioritization: Critical files (like CSS or JavaScript) load first, and other requests may be delayed.
- Handshake queuing: Requests may wait while a TCP or SSL connection is being established.
- HTTP/2 multiplexing: With shared connections, requests may briefly queue before being sent.
Blocked time highlights how the browser sequences requests, which is useful for spotting bottlenecks in page loading.
How to Interpret Patterns
Sequential vs Parallel Loading
- Requests that do not overlap are sequential (blocked by earlier requests).
- Requests that overlap are parallel (browser loads them simultaneously).
Identifying Bottlenecks
- Long DNS/TCP/SSL segments → Networking or handshake issues.
- Long TTFB → Server-side latency or slow backend processing.
- Long content download → Large payloads or slow transfer speeds.
- Stacked requests with delays → Browser blocking or dependency chains.
Key Metrics Derived from Waterfalls
- Start Render / DOM Load / Onload markers show key milestones in page rendering.
- Critical Path Requests (e.g., CSS or JS) determine how quickly content becomes interactive.
- Third-party requests often appear later and can affect total load time.
Practical Analysis Tips
- Look at the first few requests — is the initial HTML fast?
- Check if external dependencies (ads, CDNs, analytics) delay rendering.
- Focus on longer bars to quickly spot performance problems.
- Compare waterfalls across tests/locations to see if issues are systemic or local.
Conclusion
Waterfall charts are not just raw data—they are a story of how your page loads. By breaking down requests into stages and durations, you can uncover both quick fixes and deeper systemic issues. Mastering waterfall interpretation in Catchpoint is key to diagnosing and improving digital performance.