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

Speed Matters at In Control 2014

Tim Kadlec
February 18, 2014

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.

Tim Kadlec

February 18, 2014
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

Transcript

  1. Speed
    Matters
    InControl Conference | February 18, 2014 | @tkadlec | timkadlec.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. we weren’t
    deliberate

    View full-size slide

  10. we weren’t
    deliberate

    View full-size slide

  11. the web is getting
    fat

    View full-size slide

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

    View full-size slide

  13. it’s a
    cultural issue

    View full-size slide

  14. lack of
    performance
    !
    !
    lack of
    planning
    =

    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.

    View full-size slide

  16. beautiful.
    !
    robust.
    fast.

    View full-size slide

  17. beautiful.
    !
    done on time.

    View full-size slide

  18. pre-optimization
    is the root of all evil

    View full-size slide

  19. post-optimization
    is the root of all evil

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. we can
    can be better

    View full-size slide

  26. make
    friends early

    View full-size slide

  27. make it
    visual

    View full-size slide

  28. make it
    matter

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. 160kb
    12%
    bounce rate

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Time to display

    View full-size slide

  40. 2990ms

    Time to display

    View full-size slide

  41. 2990ms

    Time to display
    6034ms

    View full-size slide

  42. Time to interact

    View full-size slide

  43. Time to interact
    3588ms

    View full-size slide

  44. Time to interact
    3588ms
    7222ms

    View full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. bad performance is
    bad business

    View full-size slide

  49. get
    concrete
    get
    concrete

    View full-size slide

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

    View full-size slide

  51. < 3 seconds
    DSL

    View full-size slide

  52. 300kb - 350kb

    View full-size slide

  53. how fast is
    fast enough?

    View full-size slide

  54. 100ms: Instantaneous
    1 second: Uninterrupted flow

    View full-size slide

  55. performance of
    your site

    View full-size slide

  56. performance of
    competitors

    View full-size slide

  57. 8 seconds
    10 x 1.2

    View full-size slide

  58. 4 seconds
    5 x 1.2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. let’s add a
    carousel

    View full-size slide

  62. Brad hates
    carousels.

    View full-size slide

  63. 1. Optimize
    !

    View full-size slide

  64. 1. Optimize
    2. Remove

    View full-size slide

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

    View full-size slide

  66. Performance
    is a fundamental
    component of
    User Experience

    View full-size slide

  67. 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 full-size slide

  68. Interactive
    & Dynamic

    View full-size slide

  69. it’s about
    respect

    View full-size slide

  70. respecting
    time

    View full-size slide

  71. 60%
    less likely to return

    View full-size slide

  72. 40%
    will visit a competitor

    View full-size slide

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

    View full-size slide

  74. respecting
    money

    View full-size slide

  75. thenextweb.com $44

    View full-size slide

  76. vogue.co.uk $65

    View full-size slide

  77. respecting
    desire for
    content

    View full-size slide

  78. 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 full-size slide

  79. 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 full-size slide

  80. 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 full-size slide

  81. embrace
    constraints

    View full-size slide

  82. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. channel your inner
    performance masochist

    View full-size slide

  89. channel your inner
    performance masochist

    View full-size slide

  90. 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 full-size slide

  91. 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 full-size slide

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

    View full-size slide

  93. perception = reality

    View full-size slide

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

    View full-size slide

  95. cognitive
    load time

    View full-size slide

  96. performance by
    design

    View full-size slide

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

    View full-size slide

  98. the web is getting
    fat

    View full-size slide

  99. bake it into the
    process

    View full-size slide

  100. channel your inner
    performance
    masochist

    View full-size slide

  101. involve
    everyone

    View full-size slide

  102. create
    awesome

    View full-size slide

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

    View full-size slide