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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Text
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. View Slide

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

    View Slide

11. we weren’t
    deliberate
    

    View Slide

12. we weren’t
    deliberate
    

    View Slide

13. the web is getting
    fat
    

    View Slide

14. View Slide

15. 1.5mb
    

    View Slide

16. 38%
    

    View Slide

17. View Slide

18. Minimize JS & CSS
    Optimize images
    GZip
    JS at bottom
    Async scripts
    Browser caching
    Avoid redirects
    

    View Slide

19. it’s a
    cultural issue
    

    View Slide

20. lack of
    performance
    !
    !
    lack of
    planning
    =
    

    View Slide

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.
    

    View Slide

22. beautiful.
    !
    

    View Slide

23. beautiful.
    !
    robust.
    fast.
    

    View Slide

24. beautiful.
    !
    

    View Slide

25. beautiful.
    !
    done on time.
    

    View Slide

26. pre-optimization
    is the root of all evil
    

    View Slide

27. post-optimization
    is the root of all evil
    

    View Slide

28. View Slide

29. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. we can
    can be better
    

    View Slide

36. make
    friends early
    

    View Slide

37. make it
    visual
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. make it
    matter
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. 160kb
    
    

    View Slide

47. 160kb
    12%
    bounce rate
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. vs
    

    View Slide

54. View Slide

55. View Slide

56. Time to display
    

    View Slide

57. 2990ms
    
    Time to display
    

    View Slide

58. 2990ms
    
    Time to display
    6034ms
    
    

    View Slide

59. Time to interact
    

    View Slide

60. Time to interact
    3588ms
    
    

    View Slide

61. Time to interact
    3588ms
    7222ms
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

65. bad performance is
    bad business
    

    View Slide

66. get
    concrete
    get
    concrete
    

    View Slide

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

    View Slide

68. < 3 seconds
    DSL
    

    View Slide

69. 300kb - 350kb
    

    View Slide

70. how fast is
    fast enough?
    

    View Slide

71. 100ms: Instantaneous
    1 second: Uninterrupted flow
    

    View Slide

72. performance of
    your site
    

    View Slide

73. performance of
    competitors
    

    View Slide

74. 20%
    rule
    

    View Slide

75. 10 seconds
    

    View Slide

76. 8 seconds
    10 x 1.2
    

    View Slide

77. 5 seconds
    

    View Slide

78. 4 seconds
    5 x 1.2
    

    View Slide

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

    View Slide

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

    View Slide

81. let’s add a
    carousel
    

    View Slide

82. View Slide

83. Brad hates
    carousels.
    

    View Slide

84. 1. Optimize
    !
    

    View Slide

85. 1. Optimize
    2. Remove
    

    View Slide

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

    View Slide

87. View Slide

88. Performance
    is a fundamental
    component of
    User Experience
    

    View Slide

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
    

    View Slide

90. Interactive
    & Dynamic
    

    View Slide

91. it’s about
    respect
    

    View Slide

92. respecting
    time
    

    View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. 60%
    less likely to return
    

    View Slide

99. 40%
    will visit a competitor
    

    View Slide

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

     View Slide

101. respecting
     money
     

     View Slide

102. View Slide

103. View Slide

104. View Slide

105. thenextweb.com $44
     

     View Slide

106. vogue.co.uk $65
     

     View Slide

107. View Slide

108. respecting
     desire for
     content
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

112. embrace
     constraints
     

     View Slide

113. View Slide

114. View Slide

115. View Slide

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
     

     View Slide

117. http://flic.kr/p/cfoupQ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

121. 1330%
     

     View Slide

122. 1330% = .9s
     

     View Slide

123. View Slide

124. View Slide

125. View Slide

126. View Slide

127. View Slide

128. Make it hurt
     http://flic.kr/p/yTjQS
     

     View Slide

129. channel your inner
     performance masochist
     

     View Slide

130. channel your inner
     performance masochist
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

134. View Slide

135. View Slide

136. perception = reality
     

     View Slide

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

     View Slide

138. View Slide

139. View Slide

140. View Slide

141. View Slide

142. cognitive
     load time
     

     View Slide

143. performance by
     design
     

     View Slide

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

     View Slide

145. the web is getting
     fat
     

     View Slide

146. bake it into the
     process
     

     View Slide

147. channel your inner
     performance
     masochist
     

     View Slide

148. involve
     everyone
     

     View Slide

149. create
     awesome
     

     View Slide

150. View Slide

151. thank you
     InControl Conference | February 18, 2014 | @tkadlec | timkadlec.com
     

     View Slide