Speed Matters at In Control 2014

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
February 18, 2014

Speed Matters at In Control 2014

No one wants to create a slow site. Yet that's exactly what happens. Not only do fat sites exist, they're actually becoming more and more common. It would be one thing if performance was merely another feature, but the reality is that performance is a fundamental component of the user experience.

If we want to start providing people with the fast experiences they so desperately want, performance needs to be engrained throughout the entire process. In this session, we'll discuss how to make sure that our sites are as fast as they are beautiful by incorporating performance into our workflows from start to finish.

Presented at In Control, in Orlando, Florida on February 18th, 2014.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

February 18, 2014
Tweet

Transcript

  1. Speed Matters InControl Conference | February 18, 2014 | @tkadlec

    | timkadlec.com
  2. http://flic.kr/p/96ryj6 http://upload.wikimedia.org/wikipedia/commons/2/23/Albino_Alligator_in_Water.jpg

  3. http://flic.kr/p/96ryj6 http://upload.wikimedia.org/wikipedia/commons/2/23/Albino_Alligator_in_Water.jpg alligator.jpg

  4. http://flic.kr/p/96ryj6 http://upload.wikimedia.org/wikipedia/commons/2/23/Albino_Alligator_in_Water.jpg gator.jpg

  5. Text

  6. http://flic.kr/p/96ryj6 http://flic.kr/p/5MWEMo

  7. http://flic.kr/p/z268

  8. http://flic.kr/p/492m2p

  9. None
  10. http://flic.kr/p/69SUZW

  11. we weren’t deliberate

  12. we weren’t deliberate

  13. the web is getting fat

  14. None
  15. 1.5mb

  16. 38%

  17. None
  18. Minimize JS & CSS Optimize images GZip JS at bottom

    Async scripts Browser caching Avoid redirects
  19. it’s a cultural issue

  20. lack of performance  ! ! lack of planning =

  21. I doubt anyone really wants to release a site that

    doesn't perform well, it's just a product of not being afforded the luxury of time and top-down pressure. — a friend.
  22. beautiful. !

  23. beautiful. ! robust. fast.

  24. beautiful. !

  25. beautiful. ! done on time.

  26. pre-optimization is the root of all evil

  27. post-optimization is the root of all evil

  28. None
  29. None
  30. death by a thousand cuts http://flic.kr/p/6DFYyo

  31. http://flic.kr/p/5pp76g

  32. http://flic.kr/p/9roSGx

  33. http://flic.kr/p/9roSGx Hint: This is not juice

  34. http://bit.ly/18pBjPK Only a problem if it’s broken

  35. we can  can be better

  36. make friends early

  37. make it visual

  38. None
  39. None
  40. None
  41. make it matter

  42. http://bit.ly/1c7O9Gf 100ms 

  43. http://bit.ly/1c7O9Gf 100ms 1% revenue

  44. $15.7 billion http://yhoo.it/17aFlLh

  45. 1% = $157,000,000 http://yhoo.it/17aFlLh

  46. 160kb 

  47. 160kb 12% bounce rate

  48. http://bit.ly/oTg5ts one second slower

  49. One second 11% page views http://bit.ly/oTg5ts

  50. http://bit.ly/oTg5ts 16% customer satisfaction One second

  51. http://bit.ly/oTg5ts 7% conversions One second

  52. $2,500,000 http://yhoo.it/17aFlLh

  53. vs

  54. None
  55. None
  56. Time to display

  57. 2990ms  Time to display

  58. 2990ms  Time to display 6034ms 

  59. Time to interact

  60. Time to interact 3588ms 

  61. Time to interact 3588ms  7222ms

  62. Speed is the most important feature. If your application is

    slow, people won’t use it....If something is slow, they’re just gone. — Fred Wilson http://bit.ly/csL5ck
  63. There is real empirical evidence that substantiates the fact that

    speed is more than a feature. ! It’s a requirement. — Fred Wilson http://bit.ly/csL5ck
  64. There is real empirical evidence that substantiates the fact that

    speed is more than a feature. ! It’s a requirement. — Fred Wilson http://bit.ly/csL5ck It’s a requirement.
  65. bad performance is bad business

  66. get concrete get concrete

  67. http://flic.kr/p/4CEdvf set a  budget

  68. < 3 seconds DSL

  69. 300kb - 350kb

  70. how fast is  fast enough?

  71. 100ms: Instantaneous 1 second: Uninterrupted flow

  72. performance of your site

  73. performance of competitors

  74. 20% rule

  75. 10 seconds

  76. 8 seconds 10 x 1.2

  77. 5 seconds

  78. 4 seconds 5 x 1.2

  79. http://slidesha.re/1e2x4B0

  80. http://slidesha.re/1e2x4B0

  81. let’s add a  carousel

  82. None
  83. Brad hates carousels.

  84. 1. Optimize !

  85. 1. Optimize 2. Remove

  86. 1. Optimize 2. Remove 3. Don’t add

  87. None
  88. Performance is a fundamental component of User Experience

  89. Being a Web designer & not considering speed/ performance is

    like being a print designer & not considering how your colors will print. — Luke Wroblewski http://bit.ly/yRvfu8
  90. Interactive & Dynamic

  91. it’s about respect

  92. respecting time

  93. None
  94. None
  95. None
  96. None
  97. None
  98. 60% less likely to return

  99. 40% will visit a competitor

  100. bad experiences linger http://flic.kr/p/2uSm6

  101. respecting money

  102. None
  103. None
  104. None
  105. thenextweb.com $44

  106. vogue.co.uk $65

  107. None
  108. respecting desire for content

  109. Now more than ever, we’re designing work meant to be

    viewed along a gradient of different experiences. — Ethan Marcotte http://bit.ly/Wi0xvw
  110. Now more than ever, we’re designing work meant to be

    viewed along a gradient of different experiences. — Ethan Marcotte http://bit.ly/Wi0xvw Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. gradient of different experiences
  111. Now more than ever, we’re designing work meant to be

    viewed along a gradient of different experiences. — Ethan Marcotte http://bit.ly/Wi0xvw Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. gradient of different experiences
  112. embrace constraints

  113. None
  114. None
  115. None
  116. By keeping your client side code small and lightweight, you

    can literally open your product up to new markets. — Chris Zacharias http://bit.ly/Vl1sqy
  117. http://flic.kr/p/cfoupQ

  118. The future is already here— it’s just not very evenly

    distributed. — William Gibson
  119. http://bit.ly/13EITE0

  120. http://bit.ly/13EITE0

  121. 1330%

  122. 1330% = .9s

  123. None
  124. None
  125. None
  126. None
  127. None
  128. Make it hurt http://flic.kr/p/yTjQS

  129. channel your inner performance masochist

  130. channel your inner performance masochist

  131. That was a pretty harsh experience for us. We’d been

    building an app for users like us. But we were the exception, not the rule. — Ragavan Srinivasan
  132. That was a pretty harsh experience for us. We’d been

    building an app for users like us. But we were the exception, not the rule. — Ragavan Srinivasan
  133. http://flic.kr/p/6MgMoG Pour salt on our performance wounds.

  134. None
  135. None
  136. perception = reality

  137. http://flic.kr/p/7DXqvK

  138. None
  139. None
  140. None
  141. None
  142. cognitive load time

  143. performance by design

  144. http://flic.kr/p/96ryj6 http://flic.kr/p/5MWEMo

  145. the web is getting fat

  146. bake it into the process

  147. channel your inner performance masochist

  148. involve everyone

  149. create awesome

  150. None
  151. thank you InControl Conference | February 18, 2014 | @tkadlec

    | timkadlec.com