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
   

   View Slide

2. View Slide

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

   View Slide

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

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

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

    View Slide

11. we weren’t
    deliberate
    

    View Slide

12. the web is getting
    fat
    

    View Slide

13. View Slide

14. 1.7MB
    

    View Slide

15. 43%
    

    View Slide

16. View Slide

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

    View Slide

18. it’s a
    cultural issue
    

    View Slide

19. lack of
    performance
    !
    !
    lack of
    planning
    =
    

    View Slide

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.
    

    View Slide

21. beautiful.
    

    View Slide

22. beautiful.
    robust.
    fast.
    

    View Slide

23. beautiful.
    

    View Slide

24. beautiful.
    done on time.
    

    View Slide

25. pre-optimization
    is the root of all evil
    

    View Slide

26. post-optimization
    is the root of all evil
    

    View Slide

27. View Slide

28. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. Only a
    problem if it’s
    broken
    

    View Slide

34. we can
    can be better
    

    View Slide

35. make
    friends early
    

    View Slide

36. make it
    visual
    

    View Slide

37. View Slide

38. View Slide

39. make it
    Visual
    

    View Slide

40. make it
    matter
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. vs
    

    View Slide

51. View Slide

52. Time to display
    

    View Slide

53. 2990ms
    Time to display
    

    View Slide

54. 2990ms 6034ms
    Time to display
    

    View Slide

55. Time to interact
    

    View Slide

56. Time to interact
    

    View Slide

57. Time to interact
    3588MS
    

    View Slide

58. Time to interact
    3588MS 7222ms
    

    View Slide

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
    

    View Slide

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
    

    View Slide

61. bad performance is
    bad business
    

    View Slide

62. get
    concrete
    

    View Slide

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

    View Slide

64. < 3 seconds
    DSL
    

    View Slide

65. 300kb - 350kb
    

    View Slide

66. how fast is
    fast enough?
    

    View Slide

67. 100ms: Instantaneous
    1 second: Uninterrupted flow
    

    View Slide

68. performance of
    your site
    

    View Slide

69. performance of
    competitors
    

    View Slide

70. 20%
    rule
    

    View Slide

71. 10 seconds
    

    View Slide

72. 10 - 20%
    8 seconds
    

    View Slide

73. 5 seconds
    

    View Slide

74. 4 seconds
    5 -20%
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. Performance
    is a fundamental component of
    User Experience
    

    View Slide

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
    

    View Slide

82. Interactive & Dynamic
    

    View Slide

83. it’s about
    respect
    

    View Slide

84. respecting
    time
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. 60%
    less likely to return
    

    View Slide

91. 40%
    will visit a competitor
    

    View Slide

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

    View Slide

93. respecting
    money
    

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. $44
    thenextweb.com
    

    View Slide

98. vogue.co.uk $65
    

    View Slide

99. View Slide

100. View Slide

101. respecting
     desire for
     content
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

105. embrace
     constraints
     

     View Slide

106. Crying pic
     

     View Slide

107. 50
     words
     

     View Slide

108. View Slide

109. View Slide

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
     

     View Slide

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

     View Slide

112. View Slide

113. View Slide

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

     View Slide

115. channel your inner
     performance masochist
     

     View Slide

116. channel your inner
     performance masochist
     

     View Slide

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

     View Slide

118. View Slide

119. View Slide

120. Photo by Dan Cole
     

     View Slide

121. Photo by Dan Cole
     

     View Slide

122. perception = reality
     

     View Slide

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

     View Slide

124. View Slide

125. View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. performance by
     design
     

     View Slide

132. View Slide

133. the web is getting
     fat
     

     View Slide

134. bake it into the
     process
     

     View Slide

135. channel your inner
     performance
     masochist
     

     View Slide

136. involve
     everyone
     

     View Slide

137. create
     awesome
     

     View Slide

138. View Slide

139. thank you
     #fec14 | August 29, 2014 | @tkadlec | timkadlec.com
     

     View Slide