Deliberate Performance

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. As Steve Jobs once pointed out, design is not merely about how something looks but also how something works.

If we want to start providing people with the fast experiences they so desperately want, performance needs to be engrained throughout the entire process.

Presented at Smashing Conference 2013, in Freiburg Germany on September 9th, 2013.

Transcript

1. Deliberate
   Performance
   Smashing Conference | September 9th, 2013 | @tkadlec | timkadlec.com
   Monday, September 9, 13
   

   View Slide

2. http://flic.kr/p/96ryj6
   http://flic.kr/p/5MWEMo
   Monday, September 9, 13
   

   View Slide

3. http://flic.kr/p/z268
   Monday, September 9, 13
   

   View Slide

4. http://flic.kr/p/492m2p
   Monday, September 9, 13
   

   View Slide

5. http://flic.kr/p/69SUZW
   Monday, September 9, 13
   

   View Slide

6. we weren’t
   deliberate
   Monday, September 9, 13
   

   View Slide

7. the web is getting
   fat
   Monday, September 9, 13
   

   View Slide

8. Monday, September 9, 13
   

   View Slide

9. 1.5mb
   Monday, September 9, 13
   

   View Slide

10. 21%
    Monday, September 9, 13
    

    View Slide

11. Monday, September 9, 13
    

    View Slide

12. Minimize JS & CSS
    Optimize images
    GZip
    JS at bottom
    Async scripts
    Browser caching
    Avoid redirects
    Monday, September 9, 13
    

    View Slide

13. it’s a
    cultural issue
    Monday, September 9, 13
    

    View Slide

14. lack of
    performance
    lack of
    planning
    =
    Monday, September 9, 13
    

    View Slide

15. 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.
    Monday, September 9, 13
    

    View Slide

16. beautiful.
    Monday, September 9, 13
    

    View Slide

17. beautiful.
    robust.
    fast.
    Monday, September 9, 13
    

    View Slide

18. beautiful.
    Monday, September 9, 13
    

    View Slide

19. beautiful.
    done on time.
    Monday, September 9, 13
    

    View Slide

20. pre-optimization
    is the root of all evil
    Monday, September 9, 13
    

    View Slide

21. post-optimization
    is the root of all evil
    Monday, September 9, 13
    

    View Slide

22. Monday, September 9, 13
    

    View Slide

23. death by a
    thousand
    cuts
    http://flic.kr/p/6DFYyo
    Monday, September 9, 13
    

    View Slide

24. http://flic.kr/p/5pp76g
    Monday, September 9, 13
    

    View Slide

25. http://flic.kr/p/9roSGx
    Monday, September 9, 13
    

    View Slide

26. http://flic.kr/p/9roSGx
    Hint: This is not juice
    Monday, September 9, 13
    

    View Slide

27. http://bit.ly/18pBjPK
    Only a
    problem if
    it’s broken
    Monday, September 9, 13
    

    View Slide

28. we can
    can be better
    Monday, September 9, 13
    

    View Slide

29. make
    friends early
    Monday, September 9, 13
    

    View Slide

30. make it
    visual
    Monday, September 9, 13
    

    View Slide

31. Monday, September 9, 13
    

    View Slide

32. Monday, September 9, 13
    

    View Slide

33. make it
    personal
    Monday, September 9, 13
    

    View Slide

34. http://bit.ly/1c7O9Gf
    100ms
    Monday, September 9, 13
    

    View Slide

35. http://bit.ly/1c7O9Gf
    100ms
    1%
    revenue
    Monday, September 9, 13
    

    View Slide

36. $15.7 billion
    http://yhoo.it/17aFlLh
    Monday, September 9, 13
    

    View Slide

37. 1% = $157,000,000
    http://yhoo.it/17aFlLh
    Monday, September 9, 13
    

    View Slide

38. One
    second
    11%
    page views
    http://bit.ly/oTg5ts
    Monday, September 9, 13
    

    View Slide

39. http://bit.ly/oTg5ts
    16%
    customer satisfaction
    One
    second
    Monday, September 9, 13
    

    View Slide

40. http://bit.ly/oTg5ts
    7%
    conversions
    One
    second
    Monday, September 9, 13
    

    View Slide

41. $2,500,000
    http://yhoo.it/17aFlLh
    Monday, September 9, 13
    

    View Slide

42. vs
    Monday, September 9, 13
    

    View Slide

43. Monday, September 9, 13
    

    View Slide

44. Time to display
    Monday, September 9, 13
    

    View Slide

45. 2990ms
    Time to display
    Monday, September 9, 13
    

    View Slide

46. 2990ms
    Time to display
    6034ms
    Monday, September 9, 13
    

    View Slide

47. Time to interact
    Monday, September 9, 13
    

    View Slide

48. Time to interact
    3588ms
    Monday, September 9, 13
    

    View Slide

49. Time to interact
    3588ms 7222ms
    Monday, September 9, 13
    

    View Slide

50. 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
    Monday, September 9, 13
    

    View Slide

51. 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
    Monday, September 9, 13
    

    View Slide

52. 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.
    Monday, September 9, 13
    

    View Slide

53. bad performance is
    bad business
    Monday, September 9, 13
    

    View Slide

54. get
    concrete
    get
    concrete
    Monday, September 9, 13
    

    View Slide

55. http://flic.kr/p/4CEdvf
    set a
    budget
    Monday, September 9, 13
    

    View Slide

56. < 3 seconds
    DSL
    Monday, September 9, 13
    

    View Slide

57. 300kb - 350kb
    Monday, September 9, 13
    

    View Slide

58. how fast is
    fast enough?
    Monday, September 9, 13
    

    View Slide

59. 1 second: Uninterrupted flow
    Monday, September 9, 13
    

    View Slide

60. performance of
    your site
    Monday, September 9, 13
    

    View Slide

61. performance of
    competitors
    Monday, September 9, 13
    

    View Slide

62. 20%
    rule
    Monday, September 9, 13
    

    View Slide

63. 10 seconds
    Monday, September 9, 13
    

    View Slide

64. 8 seconds
    10 x 1.2
    Monday, September 9, 13
    

    View Slide

65. 5 seconds
    Monday, September 9, 13
    

    View Slide

66. 4 seconds
    5 x 1.2
    Monday, September 9, 13
    

    View Slide

67. let’s add a
    carousel
    Monday, September 9, 13
    

    View Slide

68. Monday, September 9, 13
    

    View Slide

69. Brad hates
    carousels.
    Monday, September 9, 13
    

    View Slide

70. 1. Optimize
    Monday, September 9, 13
    

    View Slide

71. 1. Optimize
    2. Remove
    Monday, September 9, 13
    

    View Slide

72. 1. Optimize
    2. Remove
    3. Don’t add
    Monday, September 9, 13
    

    View Slide

73. Monday, September 9, 13
    

    View Slide

74. Performance
    is a fundamental
    component of
    User Experience
    Monday, September 9, 13
    

    View Slide

75. 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
    Monday, September 9, 13
    

    View Slide

76. Interactive
    & Dynamic
    Monday, September 9, 13
    

    View Slide

77. it’s about
    respect
    Monday, September 9, 13
    

    View Slide

78. respecting
    time
    Monday, September 9, 13
    

    View Slide

79. Monday, September 9, 13
    

    View Slide

80. Monday, September 9, 13
    

    View Slide

81. Monday, September 9, 13
    

    View Slide

82. Monday, September 9, 13
    

    View Slide

83. Monday, September 9, 13
    

    View Slide

84. 60%
    less likely to return
    Monday, September 9, 13
    

    View Slide

85. 40%
    will visit a competitor
    Monday, September 9, 13
    

    View Slide

86. bad experiences
    linger
    http://flic.kr/p/2uSm6
    Monday, September 9, 13
    

    View Slide

87. respecting
    money
    Monday, September 9, 13
    

    View Slide

88. Monday, September 9, 13
    

    View Slide

89. Monday, September 9, 13
    

    View Slide

90. Monday, September 9, 13
    

    View Slide

91. thenextweb.com $44
    Monday, September 9, 13
    

    View Slide

92. vogue.co.uk $65
    Monday, September 9, 13
    

    View Slide

93. Monday, September 9, 13
    

    View Slide

94. respecting
    desire for
    content
    Monday, September 9, 13
    

    View Slide

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

    View Slide

96. 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
    Monday, September 9, 13
    

    View Slide

97. 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
    Monday, September 9, 13
    

    View Slide

98. embrace
    constraints
    Monday, September 9, 13
    

    View Slide

99. Monday, September 9, 13
    

    View Slide

100. Monday, September 9, 13
     

     View Slide

101. 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
     Monday, September 9, 13
     

     View Slide

102. http://flic.kr/p/cfoupQ
     Monday, September 9, 13
     

     View Slide

103. Monday, September 9, 13
     

     View Slide

104. Make it hurt
     http://flic.kr/p/yTjQS
     Monday, September 9, 13
     

     View Slide

105. channel your inner
     performance masochist
     Monday, September 9, 13
     

     View Slide

106. http://flic.kr/p/6MgMoG
     Pour salt on our
     performance wounds.
     Monday, September 9, 13
     

     View Slide

107. Monday, September 9, 13
     

     View Slide

108. Monday, September 9, 13
     

     View Slide

109. talk to Dan
     Monday, September 9, 13
     

     View Slide

110. perception = reality
     Monday, September 9, 13
     

     View Slide

111. http://flic.kr/p/7DXqvK
     Monday, September 9, 13
     

     View Slide

112. Monday, September 9, 13
     

     View Slide

113. Monday, September 9, 13
     

     View Slide

114. performance by
     design
     Monday, September 9, 13
     

     View Slide

115. http://flic.kr/p/96ryj6
     http://flic.kr/p/5MWEMo
     Monday, September 9, 13
     

     View Slide

116. the web is getting
     fat
     Monday, September 9, 13
     

     View Slide

117. bake it into the
     process
     Monday, September 9, 13
     

     View Slide

118. channel your inner
     performance
     masochist
     Monday, September 9, 13
     

     View Slide

119. involve
     everyone
     Monday, September 9, 13
     

     View Slide

120. create
     awesome
     Monday, September 9, 13
     

     View Slide

121. Monday, September 9, 13
     

     View Slide

122. thank you
     Smashing Conference | September 9th, 2013 | @tkadlec | timkadlec.com
     Monday, September 9, 13
     

     View Slide