# Beyond the Waterfall - Meaningful Web Performance Visualizations

> With all the different measurements we can take of web performance, the data we can report on becomes huge. Waterfall charts just don’t cut it any more – they are a technical tool to diagnose technical issues. What we need now are business-focused visualizations that quickly represent the impact of performance on user experience.

Author: Simon Hearne (https://simonhearne.com/about/)
Published: 2016-10-14
Canonical: https://simonhearne.com/2016/meaningful-visualisations/
Tags: WebPerf, video, talk
Video: https://www.youtube.com/watch?v=l1RpGiP3FpM
Slides: https://noti.st/simonhearne/tODEWH/beyond-the-waterfall-meaningful-web-performance-visualisations

---
A waterfall chart is a tool for people who already know what they are looking at. This talk is about everyone else.

## About the talk

Waterfall charts are diagnostic instruments. They reward expertise, and they assume the reader already knows what a request is, why blocking matters and what a long green bar means. That makes them excellent for engineers and close to useless for the people who decide whether performance work gets funded.

This talk argues for visualisations built for that second audience: images that carry their meaning at a glance, because we read pattern and shape faster than we read text. It walks through the visual vocabulary available, then applies it to real performance data.

## What's covered

- **Infographics versus visualisations.** The hand-made and the computer-generated, and why the distinction matters once your data changes daily.
- **The visual vocabulary.** Size for importance, position for relationship, colour for category, plus shape and animation — the raw materials of any chart worth putting in front of a stakeholder.
- **Six ways to show a site's performance.** Waterfalls, filmstrips, heatmaps, request maps, dashboards and the RUM wall, and which audience each one actually serves.
- **A worked third-party problem.** Using word clouds and request maps to make the third-party load at a large UK publisher legible to people who don't read waterfalls.
- **The tools.** WebPageTest, the heatmap, request map and RUM wall tools on `webperf.tools`, and Graphite for trends.

Further reading suggested in the deck: *Information Is Beautiful* by David McCandless, and *Storytelling with Data* by Cole Nussbaumer Knaflic.