Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deliberate Performance

Tim Kadlec
September 12, 2013

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.

Tim Kadlec

September 12, 2013
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Monday, September 9, 13

    View full-size slide

  9. 1.5mb
    Monday, September 9, 13

    View full-size slide

  10. 21%
    Monday, September 9, 13

    View full-size slide

  11. Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  16. beautiful.
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

  18. beautiful.
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. make
    friends early
    Monday, September 9, 13

    View full-size slide

  30. make it
    visual
    Monday, September 9, 13

    View full-size slide

  31. Monday, September 9, 13

    View full-size slide

  32. Monday, September 9, 13

    View full-size slide

  33. make it
    personal
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. vs
    Monday, September 9, 13

    View full-size slide

  43. Monday, September 9, 13

    View full-size slide

  44. Time to display
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Time to interact
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. performance of
    competitors
    Monday, September 9, 13

    View full-size slide

  62. 20%
    rule
    Monday, September 9, 13

    View full-size slide

  63. 10 seconds
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

  65. 5 seconds
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Monday, September 9, 13

    View full-size slide

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

    View full-size slide

  70. 1. Optimize
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. Monday, September 9, 13

    View full-size slide

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

    View full-size 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 full-size slide

  76. Interactive
    & Dynamic
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

  78. respecting
    time
    Monday, September 9, 13

    View full-size slide

  79. Monday, September 9, 13

    View full-size slide

  80. Monday, September 9, 13

    View full-size slide

  81. Monday, September 9, 13

    View full-size slide

  82. Monday, September 9, 13

    View full-size slide

  83. Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. respecting
    money
    Monday, September 9, 13

    View full-size slide

  88. Monday, September 9, 13

    View full-size slide

  89. Monday, September 9, 13

    View full-size slide

  90. Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  93. Monday, September 9, 13

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  98. embrace
    constraints
    Monday, September 9, 13

    View full-size slide

  99. Monday, September 9, 13

    View full-size slide

  100. Monday, September 9, 13

    View full-size 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 full-size slide

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

    View full-size slide

  103. Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  107. Monday, September 9, 13

    View full-size slide

  108. Monday, September 9, 13

    View full-size slide

  109. talk to Dan
    Monday, September 9, 13

    View full-size slide

  110. perception = reality
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

  112. Monday, September 9, 13

    View full-size slide

  113. Monday, September 9, 13

    View full-size slide

  114. performance by
    design
    Monday, September 9, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  119. involve
    everyone
    Monday, September 9, 13

    View full-size slide

  120. create
    awesome
    Monday, September 9, 13

    View full-size slide

  121. Monday, September 9, 13

    View full-size slide

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

    View full-size slide