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.

Transcript

1. #fec14 | August 29, 2014 | @tkadlec | timkadlec.com Deliberate Performance
3. http://flic.kr/p/z268
4. http://flic.kr/p/492m2p
10. http://flic.kr/p/69SUZW
11. we weren’t
    deliberate
12. the web is getting
    fat
14. 1.7MB
15. 43%
    
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
    
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
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
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%
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
90. 60% less likely to return
    
91. 40% will visit a competitor
    
92. bad experiences
    linger http://flic.kr/p/2uSm6
93. respecting
    money
97. $44 thenextweb.com
98. vogue.co.uk $65
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
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
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.
120. Photo by Dan Cole
121. Photo by Dan Cole
122. perception = reality
123. http://flic.kr/p/7DXqvK
131. performance by
     design
133. the web is getting
     fat
134. bake it into the
     process
135. channel your inner
     performance masochist
136. involve
     everyone
137. create
     awesome
139. thank you #fec14 | August 29, 2014 | @tkadlec | timkadlec.com