Visualisation Experiments
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.
Layered waterfalls
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?
10 layers, height scaled by weight - Techcrunch
100 layers, height scaled by weight - Techcrunch
Weight scaled
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?
Guardian | Standard Waterfall | #12 small beacon request delaying start render?
Techcrunch | Standard Waterfall
Smashing Before | Smashing After
Waterfall Diff
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.
Cache Times
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.
Techcrunch sorted by cache time
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.
Responsive Size
How do assets sizes change across 17 different viewport width's on a responsive website.
Frontend Heatmap
Mapping timing info back into the browser view for assets that impact the user experience.
Waterfall Scrubber
Keeping everything on one screen and connected.
Performance Budgets
Isolating single metrics and using colour and thresholds.
