![Page 1: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/1.jpg)
Beyond the waterfall
![Page 2: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/2.jpg)
A picture is worth a thousand words,
storytellers and we are all
![Page 3: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/3.jpg)
A picture is worth a thousand words,
salespeople and we are all
![Page 4: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/4.jpg)
#perfmatters #webperf #devops
#sitespeed @VelocityConf
![Page 5: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/5.jpg)
http://www.slideshare.net/soasta
Our sales charts need work
![Page 6: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/6.jpg)
Some images are universal
https://www.flickr.com/photos/vialbost/17797990034/
![Page 7: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/7.jpg)
Some images are universal
![Page 8: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/8.jpg)
Some images are easy
Good
Bad
![Page 9: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/9.jpg)
And some are hard
Fast
Slow
Medium
![Page 10: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/10.jpg)
it is our job to find the best
visualisations to support our story
![Page 11: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/11.jpg)
![Page 12: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/12.jpg)
We’ve been doing it for a while
https://www.flickr.com/photos/gruban/137421901/
![Page 13: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/13.jpg)
We’re rubbish at parsing letters
http://www.mrc-cbu.cam.ac.uk/people/matt.davis/Cmabridge/rawlinson/
it deosn't mttaer in waht oredr the
ltteers in a wrod are, the olny
iprmoetnt tihng is taht the frist and
lsat ltteer be at the rghit pclae
![Page 14: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/14.jpg)
We process patterns, outliers, shapes…
+ + + + + + + + + + + + + + - +
…faster than the speed of thought
![Page 15: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/15.jpg)
So… infographics!
![Page 16: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/16.jpg)
infographic = hand-made visualisation = computer-made
![Page 17: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/17.jpg)
Size – Weight, scale, importance
Position – Relationship, inheritance Colour & Contrast – Importance, categorisation, value Shape – Categorisation, importance
Animation – Movement, importance
We have got a lot to work with
![Page 18: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/18.jpg)
So what about web performance?
![Page 19: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/19.jpg)
we now have a lot of data
https://mpulse.soasta.com/concerto/Central?anon=true
![Page 20: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/20.jpg)
And our data can have a high entry-level
![Page 21: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/21.jpg)
It doesn’t have to be this way…
![Page 22: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/22.jpg)
it is imperative that we
present our data well
in a business context
![Page 23: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/23.jpg)
Meet Jane
Jane’s challenge(s) Using visualisations to prove a point Using visualisations to increase awareness Using visualisations to create value Using visualisations to track performance Building visualisations into business processes
Ecommerce Director Large UK Publisher
![Page 24: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/24.jpg)
Publishing is changing
![Page 25: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/25.jpg)
![Page 26: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/26.jpg)
“we have no third-party management strategy”
![Page 27: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/27.jpg)
PIE Charts FTW?
Third-parties Enabled Third-parties Disabled
Content breakdown by domains
![Page 28: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/28.jpg)
PIE Charts FTW?
Third-parties Enabled Third-parties Disabled
Content breakdown by domains
![Page 29: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/29.jpg)
Waterfalls FTW?
Third-parties Enabled Third-parties Disabled
![Page 30: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/30.jpg)
Domain cloud by # requests
wordle.net
![Page 31: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/31.jpg)
wordle.net
Domain cloud by sqrt(loadtime)
![Page 32: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/32.jpg)
“The Last Resort”
![Page 33: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/33.jpg)
![Page 34: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/34.jpg)
Success!
![Page 35: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/35.jpg)
Meet Jane
Jane’s challenge(s) Using visualisations to prove a point Using visualisations to increase awareness Using visualisations to create value Using visualisations to track performance Building visualisations into business processes
![Page 36: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/36.jpg)
“We don’t have that many third-parties!”
![Page 37: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/37.jpg)
Can we plot the relationships?
![Page 38: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/38.jpg)
Request Map
http://requestmap.webperf.tools/render/150930_6C_8e18a8699be0287083cc5f121a0b18f4/#
![Page 39: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/39.jpg)
Request Map
http://requestmap.webperf.tools/render/151015_WZ_e40a3a8415ac2ca5d1b49726fa3dfd6b#
![Page 40: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/40.jpg)
“requestmap is the most powerful visualisation we have”
“it has been fundamental in the performance mind-set shift at
Marks and Spencer”
Andrew Neilson
PerfOps | marksandspencer.com
![Page 41: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/41.jpg)
Meet Jane
Jane’s challenge Using visualisations to prove a point Using visualisations to increase awareness Using visualisations to create value Using visualisations to track performance Building visualisations into business processes
![Page 42: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/42.jpg)
We need the ads for revenue
$$$
![Page 43: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/43.jpg)
Can we show when the ads appear?
![Page 44: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/44.jpg)
…without trawling filmstrips…
![Page 45: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/45.jpg)
https://github.com/zeman/perfmap
Perfmap
![Page 46: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/46.jpg)
![Page 47: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/47.jpg)
Heatmap
http://heatmap.webperf.tools/render/151015_VV_0340c8912414b603853c30bdd04e79d7/60700
![Page 48: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/48.jpg)
Performance - sold to business
![Page 49: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/49.jpg)
Meet Jane
Jane’s challenge Using visualisations to prove a point Using visualisations to increase awareness Using visualisations to create value Using visualisations to track performance Building visualisations into business processes
![Page 50: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/50.jpg)
So what have we got?
point-in-time live trends
one p
age
whole
site
so
me p
ages
requires technical
understanding
requires some
understanding
intuitive
waterfall
filmstrip
heatmap
requestmap
ops dash
?
![Page 51: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/51.jpg)
http://calendar.perfplanet.com/2014/graph-your-web-performance-metrics/
F/OSS Performance Dashboard
![Page 52: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/52.jpg)
Commercial Performance Dashboard
![Page 53: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/53.jpg)
Meet Jane
Jane’s challenge Using visualisations to prove a point Using visualisations to increase awareness Using visualisations to create value Using visualisations to track performance Building visualisations into business processes
![Page 54: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/54.jpg)
Too focussed?
https://www.flickr.com/photos/visualogist/3202396970/
![Page 55: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/55.jpg)
So what have we got?
point-in-time live trends
one p
age
whole
site
so
me p
ages
requires technical
understanding
requires some
understanding
intuitive
waterfall
filmstrip
heatmap
requestmap
perf dash
ops dash
?
![Page 56: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/56.jpg)
![Page 57: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/57.jpg)
Using RUM Data
Google Analytics - ga-dev-tools.appspot.com/query-explorer/ New Relic - rpm.newrelic.com/api/explore
mPulse - cloudlink.soasta.com/t5/Knowledge-Base/mPulse-Query-API/ba-p/17077 Pingdom -
![Page 58: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/58.jpg)
exit rate
pagevi
ew
s
relative performance
homepage
checkout page
product page
storefinder
search results
![Page 59: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/59.jpg)
http://rumwall.webperf.tools/
![Page 60: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/60.jpg)
http://rumwall.webperf.tools/
Use what you’ve got & make your own visualisations
![Page 61: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/61.jpg)
So what have we got?
point-in-time live trends
one p
age
whole
site
so
me p
ages
requires technical
understanding
requires some
understanding
intuitive
waterfall
filmstrip
heatmap
requestmap
perf dash
ops dash
rum wall
![Page 62: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/62.jpg)
Meet Jane
Jane’s challenge Using visualisations to prove a point Using visualisations to increase awareness Using visualisations to create value Using visualisations to track performance Building visualisations into business processes
![Page 63: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/63.jpg)
analysis is only the beginning…
![Page 64: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/64.jpg)
Visualize build changes
https://www.youtube.com/watch?v=UMnZiTL0tUc
![Page 65: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/65.jpg)
Visualize on error
https://speakerdeck.com/aemcknig/crafting-performance-alerting-tools
![Page 66: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/66.jpg)
Meet Jane
Jane’s challenge Using visualisations to prove a point Using visualisations to increase awareness Using visualisations to create value Using visualisations to track performance Building visualisations into business processes
![Page 67: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/67.jpg)
Don’t fear failure
![Page 68: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/68.jpg)
Help is there
http://helpmeviz.com/
![Page 69: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/69.jpg)
• webpagetest.org – you know this one
• heatmap.webperf.tools – red means slow
• requestmap.webperf.tools – plot your domains
• rumwall.webperf.tools – dashboard your analytics
Use the right tools for the job
![Page 70: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/70.jpg)
• graphite - graphite.wikidot.com
• graphene - github.com/jondot/graphene
• and more - bit.ly/foss_viz
Create your own
![Page 71: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/71.jpg)
Information Is Beautiful – David McCandless
Data Visualizations - Noah Iliinsky
Storytelling with Data - Cole Nussbaumer Knaflic
Homework m
ore
tech
nica
l
![Page 72: Beyond the waterfall · Our sales charts need work](https://reader035.vdocuments.site/reader035/viewer/2022071215/6045372e67fd6643602e55f8/html5/thumbnails/72.jpg)
Thanks!
@SimonHearne slideshare.net/SimonHearne
Break Break
You are here