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 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