Pro Yearly is on sale from $80 to $50! »

Deliberate Performance at Frontend Conference Zurich, 2014

Deliberate Performance at Frontend Conference Zurich, 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 Frontend Conference Zurich, in Zurich, Switzerland on August 29th, 2014.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

August 29, 2014
Tweet

Transcript

  1. #fec14 | August 29, 2014 | @tkadlec | timkadlec.com Deliberate

    Performance
  2. None
  3. http://flic.kr/p/z268

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

  5. None
  6. None
  7. None
  8. None
  9. None
  10. http://flic.kr/p/69SUZW

  11. we weren’t deliberate

  12. the web is getting fat

  13. None
  14. 1.7MB

  15. 43%

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

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

  19. lack of performance  ! ! lack of planning =

  20. 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.
  21. beautiful.

  22. beautiful. robust. fast.

  23. beautiful.

  24. beautiful. done on time.

  25. pre-optimization is the root of all evil

  26. post-optimization is the root of all evil

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

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

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

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

  33. Only a problem if it’s broken

  34. we can  can be better

  35. make friends early

  36. make it visual

  37. None
  38. None
  39. make it Visual

  40. make it matter

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

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

  43. $19.3 billion http://yhoo.it/17aFlLh

  44. 1% = $193,000,000 http://yhoo.it/17aFlLh

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

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

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

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

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

  50. vs

  51. None
  52. Time to display

  53. 2990ms Time to display

  54. 2990ms 6034ms Time to display

  55. Time to interact

  56. Time to interact

  57. Time to interact 3588MS

  58. Time to interact 3588MS 7222ms

  59. 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
  60. 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
  61. bad performance is bad business

  62. get concrete

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

  64. < 3 seconds DSL

  65. 300kb - 350kb

  66. how fast is fast enough?

  67. 100ms: Instantaneous 1 second: Uninterrupted flow

  68. performance of your site

  69. performance of competitors

  70. 20% rule

  71. 10 seconds

  72. 10 - 20% 8 seconds

  73. 5 seconds

  74. 4 seconds 5 -20%

  75. None
  76. None
  77. None
  78. None
  79. None
  80. Performance is a fundamental component of User Experience

  81. 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
  82. Interactive & Dynamic

  83. it’s about respect

  84. respecting time

  85. None
  86. None
  87. None
  88. None
  89. None
  90. 60% less likely to return

  91. 40% will visit a competitor

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

  93. respecting money

  94. None
  95. None
  96. None
  97. $44 thenextweb.com

  98. vogue.co.uk $65

  99. None
  100. None
  101. respecting desire for content

  102. http://bit.ly/Wi0xvw Now more than ever, we’re designing work meant to

    be viewed along a gradient of different experiences. — Ethan Marcotte
  103. Now more than ever, we’re designing work meant to be

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

    viewed along a gradient of different experiences. — Ethan Marcotte http://bit.ly/Wi0xvw gradient of different experiences
  105. embrace constraints

  106. Crying pic

  107. 50 words

  108. None
  109. None
  110. 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
  111. http://flic.kr/p/cfoupQ

  112. None
  113. None
  114. Make it hurt. http://flic.kr/p/yTjQS

  115. channel your inner performance masochist

  116. channel your inner performance masochist

  117. http://flic.kr/p/6MgMoG Pour salt on our performance wounds.

  118. None
  119. None
  120. Photo by Dan Cole

  121. Photo by Dan Cole

  122. perception = reality

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

  124. None
  125. None
  126. None
  127. None
  128. None
  129. None
  130. None
  131. performance by  design

  132. None
  133. the web is getting fat

  134. bake it into the process

  135. channel your inner performance masochist

  136. involve everyone

  137. create awesome

  138. None
  139. thank you #fec14 | August 29, 2014 | @tkadlec |

    timkadlec.com