The way we visualize performance data can have an impact on how we interpret and communicate performance issues within our teams.
This presentation will demonstrate the increasing importance of data visualization and present explorations into re-imagining the classic waterfall chart, which is the mainstay of front-end performance analysis.
Waterfall charts give 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, heatmaps, frequency tails, and colony graphs to name just a few.
I’ll 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 needing 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 those questions, rather than inferring problems and answers from an existing metric.
Traditional rendering of charts often limits the amount of information displayed and can hide important detail. I 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 modern browser techniques, allowing greater interaction and demonstrating just how powerful the modern browser has become at visualizing its own performance.
Learn how data visualization can engage the team around you in meaningful conversations about performance.
Mark Zeman is the founder of SpeedCurve, a front-end performance monitoring service that gives you continuous feedback on how your front-end code is affecting the performance of your website.
Mark comes from a design background but has always been just as passionate about the code. He is based by the ocean in beautiful New Zealand and has spent 20 years crafting websites and mobile apps.