A waterfall chart is a diagram of a page load in which each resource is a row and its bar spans from request start to finish. Bars are segmented by phase: DNS lookup, connection, TLS, waiting for the first byte and content download.
Why it matters
Waterfalls make dependency chains and bottlenecks visible. You can see which request starts late because it was discovered late, which files block rendering, how long the server took to respond and where third-party requests pile up. Browser developer tools, WebPageTest and Lighthouse-based tools all produce one.
Example
How to read a typical pattern:
index.html |==wait==|=dl=|
style.css |==wait==|dl|
font.woff2 |==wait==|dl|
hero.jpg |====wait====|====dl====|
The font starts only after the CSS finishes, a chain. Preloading it would let it start with the CSS.
Common mistakes
- Reading only total height. Long, narrow stacks of tiny requests and a few wide bars point to different problems.
- Ignoring long green "wait" sections, which mean slow server response, not a large file.
- Analyzing one run. Network variance means repeating tests.
- Not noticing the vertical line marks for FCP and LCP.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.