With all the different measurements we can take of web performance, the data we can report on becomes huge. Waterfall charts just don’t cut it any more – they are a technical tool to diagnose technical issues. What we need now are business-focused visualizations that quickly represent the impact of performance on user experience. More and more regularly we are being asked for rapid analysis of key web performance challenges: Where are the third parties coming from? What is the impact of loading web fonts? Are the ads on the page loading after the main content? How quickly could you answer these business-critical questions? Waterfall charts help, but need technical interpretation. We have used visualizations for years – waterfall charts, domain breakdowns, filmstrips – but they all require some technical understanding for them to answer these questions. Mark Zeman’s talk on visualizations at last year’s Velocity showed us that visualizations do not have to be technical to be meaningful. In this talk, Simon will demonstrate the value of exploring new types of visualizations to present a more holistic view of performance that anyone can understand.

1. Beyond the waterfall

2. A picture is worth a thousand words,
storytellersand we are all

3. A picture is worth a thousand words,
salespeopleand we are all

4. #perfmatters
#webperf
#devops
#sitespeed
@VelocityConf

5. http://www.slideshare.net/soasta
Our sales charts need work

6. Some images are universal
https://www.flickr.com/photos/vialbost/17797990034/

7. Some images are universal

8. Some images are easy
Good
Bad

9. And some are hard
Fast
Slow
Medium

10. it is our job to find the best
visualisations to support our story

12. We’ve been doing it for a while
https://www.flickr.com/photos/gruban/137421901/

13. 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

14. We process patterns, outliers, shapes…
++++
+++++
+++++-+
…faster than the speed of thought

15. So… infographics!

16. infographic = hand-made
visualisation = computer-made

17. 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

18. So what about web performance?

19. we now have a lot of data
https://mpulse.soasta.com/concerto/Central?anon=true

20. And our data can have a high entry-level

21. It doesn’t have to be this way…

22. it is imperative that we
present our data well
in a business context

23. 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

24. Publishing is changing

26. “we have no third-party
management strategy”

27. PIE Charts FTW?
Third-parties Enabled Third-parties Disabled
Content breakdown by domains

28. PIE Charts FTW?
Third-parties Enabled Third-parties Disabled
Content breakdown by domains

29. Waterfalls FTW?
Third-parties Enabled Third-parties Disabled

30. Domain cloud by # requests
wordle.net

31. wordle.net
Domain cloud by sqrt(loadtime)

32. “The Last Resort”

34. Success!

35. 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

36. “We don’t have that many third-parties!”

37. Can we plot the relationships?

38. Request Map
http://requestmap.webperf.tools/render/150930_6C_8e18a8699be0287083cc5f121a0b18f4/#

39. Request Map
http://requestmap.webperf.tools/render/151015_WZ_e40a3a8415ac2ca5d1b49726fa3dfd6b#

40. “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

41. 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

42. We need the ads for revenue
$$$

43. Can we show when the ads appear?

44. …without trawling filmstrips…

45. https://github.com/zeman/perfmap
Perfmap

47. Heatmap
http://heatmap.webperf.tools/render/151015_VV_0340c8912414b603853c30bdd04e79d7/60700

48. Performance - sold to business

49. 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

50. So what have we got?
point-in-time livetrends
onepagewholesitesomepages
requires
technical
understanding
requires
some
understanding
intuitive
waterfall
filmstrip
heatmap
requestmap
ops dash
?

51. http://calendar.perfplanet.com/2014/graph-your-web-performance-metrics/
F/OSS Performance Dashboard

52. Commercial Performance Dashboard

53. 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

54. Too focussed?
https://www.flickr.com/photos/visualogist/3202396970/

55. So what have we got?
point-in-time livetrends
onepagewholesitesomepages
requires
technical
understanding
requires
some
understanding
intuitive
waterfall
filmstrip
heatmap
requestmap
perf dash
ops dash
?

57. 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 - 

58. exit rate
pageviews
relative performance
homepage
checkout page
product page
storefinder
search results

59. http://rumwall.webperf.tools/

60. http://rumwall.webperf.tools/
Use what you’ve got &
make your own visualisations

61. So what have we got?
point-in-time livetrends
onepagewholesitesomepages
requires
technical
understanding
requires
some
understanding
intuitive
waterfall
filmstrip
heatmap
requestmap
perf dash
ops dash
rum wall

62. 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

63. analysis is only the beginning…

64. Visualize build changes
https://www.youtube.com/watch?v=UMnZiTL0tUc

65. Visualize on error
https://speakerdeck.com/aemcknig/crafting-performance-alerting-tools

66. 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

67. Don’t fear failure

68. Help is there
http://helpmeviz.com/

69. • 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

70. • graphite - graphite.wikidot.com
• graphene - github.com/jondot/graphene
• and more - bit.ly/foss_viz
Create your own

71. Information Is Beautiful – David McCandless
Data Visualizations - Noah Iliinsky
Storytelling with Data - Cole Nussbaumer Knaflic
Homework
moretechnical

72. Thanks!
@SimonHearne
slideshare.net/SimonHearne
Break Break
You are here