A set of experimental waterfall and webpagetest data visualisations presented at Velocity New York, Sep 2014 and Velocity Santa Clara, May 2015. Let us know which visualisations you like the best and we'll improve and integrate them into SpeedCurve.
Waterfalls from the same page overlaid with the front edge of each resource highlighted. The height of bars is scaled to show the byte weight of an asset. Beautiful but not that useful. What do the patterns tell us?
Waterfall of a single page with the height of requests scaled to represent the byte weight of an asset.
Techcrunch | Lazy loading of images visible latter in page load.
Weight scaled & collapsed
Waterfall of a single page with the height of requests scaled to represent the byte weight of an asset and collapsed together to show the byte weight profile of the whole page load on one screen. A large sparkline? Good for quick scannability. What's the browser doing during all the gaps?
Assets matched, collapsed to the left/right to highlight differences in load time and size of individual assets. Bolder and sharper trailing edge means a more consistent load time. It's interesting to compare assets. Some are small but take a long time to load. Size is very consistent but load time can vary a lot.
Highlight the proportion of what's cached. Makes different caching strategies very apparent. Check out the difference between these two pages.
Template Cache Map
Group assets by how often they're used across a site's templates and show their cache times.
Template Cache, Weight & Time Map
Grouped assets by how often they're used across a site's templates and scaled to show weight, time and cache colour.
How do assets sizes change across 17 different viewport width's on a responsive website.
Mapping timing info back into the browser view for assets that impact the user experience.
Keeping everything on one screen and connected.
Isolating single metrics and using colour and thresholds.