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.

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
10. http://flic.kr/p/69SUZW
11. we weren’t
    deliberate
12. we weren’t
    deliberate
13. the web is getting
    fat
15. 1.5mb
    
16. 38%
    
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
    
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
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
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
83. Brad hates carousels.
84. 1. Optimize !
85. 1. Optimize
    2. Remove
    
86. 1. Optimize
    2. Remove
    3. Don’t add
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
98. 60% less likely to return
    
99. 40% will visit a competitor
    
100. bad experiences
     linger http://flic.kr/p/2uSm6
101. respecting
     money
105. thenextweb.com $44
106. vogue.co.uk $65
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
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
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.
136. perception = reality
137. http://flic.kr/p/7DXqvK
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
151. thank you InControl Conference | February 18, 2014 | @tkadlec | timkadlec.com