LAB

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

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?

1 layer - Techcrunch

5 layers - NY Times

10 layers - Techcrunch

10 layers, height scaled by weight - Techcrunch

100 layers, height scaled by weight - Techcrunch

Weight scaled

weight-scaled

Waterfall of a single page with the height of requests scaled to represent the byte weight of an asset.

Guardian

Techcrunch | Lazy loading of images visible latter in page load.

Weight scaled & collapsed

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

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.

Techcrunch

Cache Times

cache-times

Highlight the proportion of what's cached. Makes different caching strategies very apparent. Check out the difference between these two pages.

Techcrunch

Guardian

Smashing

Template Cache Map

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

Techcrunch sorted by request

Guardian sorted by request

Template Cache, Weight & Time Map

cache-map

Grouped assets by how often they're used across a site's templates and scaled to show weight, time and cache colour.

Techcrunch

Guardian

Responsive Size

responsive

How do assets sizes change across 17 different viewport width's on a responsive website.

Barack Obama

Responsive dashboard

Frontend Heatmap

perfmap

Mapping timing info back into the browser view for assets that impact the user experience.

Techcrunch

PerfMap bookmarklet

Waterfall Scrubber

waterfall-scrubber

Keeping everything on one screen and connected.

Scrubber

Waterfall filmstrip scrubber

Performance Budgets

performance-budget

Isolating single metrics and using colour and thresholds.

Performance budgets (scroll down)