Anyone can gather data. Data heroes don't just gather data, they use it to make meaningful decisions and help organizations really understand their users. In this session, Buddy Brewer from SOASTA, along with Mark Zeman and Steve Souders from SpeedCurve, turn the tables on "Big Data" and illustrate how identifying and focusing deeply on a few meaningful metrics facilitates far better decision making.

1. April 23, 2015 ‹#›
what do data
heroes do?

2. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
Data heroes…
o Collect meaningful metrics
o Focus on the most important data
o Use data to advocate for the user
experience
o Create a common language for
interdisciplinary teams

3. © 2014 SOASTA. All rights reserved. October 23, 2014 ‹#›

4. © 2014 SOASTA. All rights reserved. October 23, 2014 ‹#›
44% Consumers say slow
transactions make them
anxious about transaction success.
http://www.webperformancetoday.com/2013/05/06/psychology-waiting-faster-online-checkout/

5. © 2014 SOASTA. All rights reserved. October 23, 2014 ‹#›
51% Consumers say slowness
is the top reason they would
abandon a purchase online.
http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2013/05/case-study-page-load-time-conversions/

6. performance has
different meanings

7. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
o Page Load Time
o TCP Latency
o Front-End Time
o Back-End Time
o DNS Resolution Time
o Time to First Byte
o SSL Handshake Time
o Front-End SPOFs
o Time to Critical Content
application
developer

8. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
o Cart Conversion Rate
o Bounce Rate
o Average Order Value
o Pages per Visit
o Retention Rate
o Click Through Rate
o Customer Lifetime Value
o Revenue per Minute
o Abandonment Rate
business
executive

9. o Page Load Time
o TCP Latency
o Front-End Time
o Back-End Time
o DNS Resolution Time
o Time to First Byte
o SSL Handshake Time
o Front-End SPOFs
o Time to Critical Content
o Cart Conversion Rate
o Bounce Rate
o Average Order Value
o Pages per Visit
o Retention Rate
o Click Through Rate
o Customer Lifetime Value
o Revenue per Minute
o Abandonment Rate

10. “I just want to buy my
Mom’s birthday present.”
user

11. o Page Load Time
o TCP Latency
o Front-End Time
o Back-End Time
o DNS Resolution Time
o Time to First Byte
o SSL Handshake Time
o Front-End SPOFs
o Time to Critical Content
o Cart Conversion Rate
o Bounce Rate
o Average Order Value
o Pages per Visit
o Retention Rate
o Click Through Rate
o Customer Lifetime Value
o Revenue per Minute
o Abandonment Rate
“I just want to buy my Mom’s birthday present.”

12. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
what should my
performance budget be?

13. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
All sites deliver both good and bad
experiences every day, at the same
time

14. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
(Baseline conversion rate: 2.9%)
2.9 sec = 5.8% convert
9.9 sec = 1.4% convert

15. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›

16. flickr.com/photos/timdorr

17. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

18. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

19. http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
“We made the new platform 60% faster
and this resulted in a 14% increase in
donation conversions.”

20. “To stay in Google's good graces,
websites must be designed so they
load quickly on mobile devices.”

21. flickr.com/photos/jronaldlee

22. designers & developers
often work in silos
flickr.com/photos/jronaldlee

23. designers & developers
often work in silos
some designs are hard to
make fast
flickr.com/photos/jronaldlee

24. designers & developers
often work in silos
some designs are hard to
make fast
being fast is important
flickr.com/photos/jronaldlee

25. guiding principles
flickr.com/photos/nihaogirl

26. Speed is more important
than design embellishment.
People are filling
small gaps in their
day with news. It
must load fast on all
touchpoints.
The design should
feel light and nimble,
always fresh and up
to date. Never
heavy, slow to load
or clogged up with
content.
Users expect sites
to render in under
2 seconds.
DAN/TBWA

27. Engage quickly and then
make it feel like you’re there.
Tourists are making
a big decision so
they want to know
that it’s worth it.
People need to
know they are in the
right place - hook
them immediately
with engaging
imagery.
Unobtrusively
stream in lots of rich
content.
DAN/TBWA

28. small interdisciplinary teams

29. prototype early

30. performance budgets

31. measure performance from the start
flickr.com/photos/josterpi

32. https://speakerdeck.com/lara/mobile-web-at-etsy

33. https://speakerdeck.com/lara/mobile-web-at-etsy
in-page reminders

34. https://speakerdeck.com/lara/mobile-web-at-etsy
in-page reminders
show what’s beaconed

35. https://speakerdeck.com/lara/mobile-web-at-etsy
in-page reminders
show what’s beaconed
bookmarklets

36. “window.onload is
not the best metric
for measuring
website speed”

38. onload: 3.9s

39. onload: 3.9s 98% ATF rendered: 4.7s

40. onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic

41. onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic

42. 99% ATF rendered: 2.0s
onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic

43. 99% ATF rendered: 2.0s onload: 9.7s
onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic

44. 99% ATF rendered: 2.0s onload: 9.7s
onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic
too critical

45. flickr.com/photos/goincase

47. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

48. filmstrips

49. custom metrics

50. custom metrics
define most important
elements on the page

51. custom metrics
define most important
elements on the page
measure using User Timing

52. custom metrics
define most important
elements on the page
measure using User Timing
track with RUM and synthetic

53. custom metrics
define most important
elements on the page
measure using User Timing
track with RUM and synthetic

54. https://blog.twitter.com/2012/improving-performance-on-twittercom

58. <script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
<img src="1-second.jpg">

59. <script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
<img src="1-second.jpg">
actual image display: ~5200 ms

61. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
performance
.getEntriesByName("hero.jpg")[0]
.duration

62. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
<img src="hero.jpg"
onload=
"performance.mark('hero')">

63. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
var observer =
new MutationObserver(obsCallback);
observer.observe(document,
{ childList: true, attributes: true,
subtree: true });

64. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
function imagePolling() {
var hero =
document.getElementById('hero');
if ( hero.offsetHeight ) {
performance.mark('hero'); }
else {
setTimeout(imagePolling, 100); }
}

65. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
<img src="hero.jpg">
<script>
performance.mark("hero");
</script>

66. <img src="7-seconds.jpg">
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>

67. <img src="7-seconds.jpg">
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>

68. <img src="7-seconds.jpg">
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>

69. max(image onload, inline script)
<img src="hero.jpg"
onload="performance.mark('hero1')">
<script>
performance.mark("hero2");
</script>
when is image displayed?

70. custom metrics

71. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
Data heroes…
o Collect meaningful metrics
o Focus on the most important data
o Use data to advocate for the user
experience
o Create a common language for
interdisciplinary teams

72. © 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›
mPulse and SpeedCurve for $99
o Start an interdisciplinary conversation about performance
o Understand how delays affect your business
o Determine your performance budget
o Measure the most important parts of the page with User Timing
soasta.com/speedcurve