Beyond the Waterfall - meaningful web performance visualisations
2 likes1,053 views
The document discusses the importance of effective visualizations in conveying data and supporting storytelling, particularly in the context of web performance. It highlights various visualization tools and techniques, emphasizing their role in increasing awareness, tracking performance, and presenting data in a business context. Specific challenges faced by 'Jane' are explored, and several resources are mentioned for creating useful visual representations of web data.
Beyond the Waterfall - meaningful web performance visualisations
- 2. A picture is worth a thousand words, storytellersand we are all
- 3. A picture is worth a thousand words, salespeopleand we are all
- 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
- 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
- 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)
- 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?
- 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?
- 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 ?
- 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
- 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
- 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…
- 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
- 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