Beyond the Waterfall - Meaningful Web Performance Visualizations
A waterfall chart is a tool for people who already know what they are looking at. This talk is about everyone else.
About the talkPermalink to this heading
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 coveredPermalink to this heading
- 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.