Skip to main content

A Better Waterfall Chart

Mark Zeman (SpeedCurve)
Average rating: ****.
(4.67, 12 ratings)

To date waterfall charts have been a mainstay in visualizing web performance, giving us details on each asset and how it cumulatively effects the load time of a web page. But there are many ways of visualizing performance: histograms, flame charts, heat maps, frequency tails, and colony graphs to name just a few.

Mark will explore the strengths and weaknesses of various types of charts and how well suited they are at answering a range of performance questions from both the perspective of a manager looking for quick high level answers and a developer needed to dig into the details. It’s important to start with the questions about performance first and then find the tools, metrics, and visualizations to best answer a question rather than inferring problems and answers from an existing metric.

Often charts are rendered along just two dimensions, which can limit the amount of information displayed and hide important detail. Mark will present several new visualizations that introduce depth, animation, and interaction to reveal performance bottlenecks and insights at both a holistic and detailed level.

These new visualizations make the most of HTML5 Canvas and WebGL allowing greater interaction and demonstrating just how powerful the modern browser has become at visualizing it’s own performance.

Photo of Mark Zeman

Mark Zeman


Mark Zeman is a Creative Director at Digital Arts by day and Founder at SpeedCurve by night.