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

Users Hate Slow Websites

Users Hate Slow Websites

Presentation from Devlink 2013 about why users hate slow websites and how to build faster sites.

Matthew Crist

August 29, 2013
Tweet

More Decks by Matthew Crist

Other Decks in Technology

Transcript

  1. Good Morning.

    View full-size slide

  2. Matthew Crist
    @matthewcrist

    View full-size slide

  3. Boston /Bähston/

    View full-size slide

  4. Customers Hate
    Slow Websites

    View full-size slide


  5. ☻ ☻ ☻
    ☻ ☻ ☻
    2% of them
    bounce after 1s

    ☻ ☻

    View full-size slide




  6. ☻ ☻ ☻
    ☻ ☻ ☻
    40% of them
    bounce after 2s

    View full-size slide




  7. ☻ ☻ ☻
    ☻ ☻
    57% bounce
    after 3s

    View full-size slide

  8. Customers show
    NO MERCY
    for slow websites

    View full-size slide

  9. Loses 1% of sales
    per 100ms delay

    View full-size slide

  10. Loses 5%-9% of traffic
    per 400ms delay

    View full-size slide

  11. Loses 3% of traffic
    per 500ms delay

    View full-size slide






  12. 85% of mobile users expect same
    response time as desktop




    View full-size slide

  13. An overly simplified graphic of a non-mobile web request

    View full-size slide

  14. An overly simplified of a desktop web request
    DNS

    View full-size slide

  15. An overly simplified of a desktop web request
    DNS

    View full-size slide

  16. These requests can
    take up to 200ms
    You’ll never get this back.
    1 second

    View full-size slide

  17. An overly simplified of a desktop web request
    DNS
    Server

    View full-size slide

  18. An overly simplified of a desktop web request
    DNS
    Server

    View full-size slide

  19. An overly simplified of a desktop web request
    DNS
    Server

    View full-size slide


  20. An overly simplified graphic of a mobile web request

    View full-size slide


  21. An overly simplified of a desktop web request
    The Tower

    View full-size slide


  22. An overly simplified of a desktop web request
    The Tower

    View full-size slide

  23. All your latency belongs
    to the tower
    1 second
    3.5seconds
    A 3g connection
    A 4g connection

    View full-size slide


  24. An overly simplified of a desktop web request
    The Tower
    DNS

    View full-size slide


  25. An overly simplified of a desktop web request
    The Tower
    DNS

    View full-size slide

  26. These requests can
    take up to 200ms
    You’ll never get this back.
    1 second

    View full-size slide


  27. An overly simplified of a desktop web request
    The Tower
    DNS
    Server

    View full-size slide


  28. An overly simplified of a desktop web request
    The Tower
    DNS
    Server

    View full-size slide


  29. An overly simplified of a desktop web request
    The Tower
    DNS
    Server

    View full-size slide


  30. Average page is 1.4mb

    View full-size slide

  31. jQuery
    1 second
    loads and processes in about 139ms

    View full-size slide

  32. Zepto
    1 second
    loads and processes in about 51ms

    View full-size slide

  33. Bootstrap
    1 second
    loads and processes in about 600ms
    Don’t forget jQuery

    View full-size slide

  34. Choose your tax
    1 second
    jQuery
    Zepto
    Nothing

    View full-size slide

  35. These examples were performed
    under optimal conditions.

    View full-size slide

  36. The “Golden Second”
    is aspirational.

    View full-size slide

  37. We can always try our
    hardest and do our best.

    View full-size slide

  38. Lose 10ms with
    this one weird
    server trick.

    View full-size slide


  39. CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS
    Combine many CSS files
    into one “compressed”.

    View full-size slide


  40. JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS
    Develop a build process for JS to
    compress & minify

    View full-size slide


  41. IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG
    Combine images into sprites
    where possible.

    View full-size slide

  42. Combine It,
    Minimize It,

    View full-size slide

  43. GZIP it,
    Combine It,
    Minimize It,

    View full-size slide

  44. GZIP it,
    Combine It,
    Minimize It,
    CDN it,

    View full-size slide

  45. {
    ! background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//
    gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/
    2wBDAAICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMDAgIDAgICAwQDAwMDBAQEAgMEBAQEBAMEBAP/
    2wBDAQICAgICAgICAgIDAgICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/
    wgARCAEJAQkDAREAAhEBAxEB/8QAHAAAAQUBAQEAAAAAAAAAAAAAAgEDBAUGAAcI/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAECAwQF/
    9oADAMBAAIQAxAAAAHFeB6Hi++W8U2fPs7LJUYFRwHJwEjgKRmiHay7XqSoAw/VCXnDucQp2TV/MjRkJpvPWVOr2Wpmpq+Ug63Rx
    +LdOW+mLbn2clnNGzqFA4FBQUCkYoh2Zej1OAWYXqjtM4jnJC18q3RzMjLbz0dWsrHVw04tBALc1y
    +PdGW1mbnDVwZzSgSOAqHEdJwKDTItGXo9Rhi3h
    +jKLcQXFQ3ocak5aOSxTbKEfKlLV2854NHXL5DvnsFF3hq4M5rgORWLQ4jpODgbCKzK2enU6SazVZ0eoxclLdyV9nrLyoU
    +qmkNtHTfKdqXSrjTj8j2nW55XmG7wydKgpCZ1BoSRQWRuiPZmaWgG1PTX0uoebpDOv3xtJjTQn1SCEEdKQMpWLRaRfkWsanPO9x3f
    TJ1yCkJnUGhZOA5SNw7Ft
    +7zefnsyrtClmqvbHD9XLErE88bAjg5gk8AyuYVGk5OnyffPSznf5bOxRuiAoFBWECoMDkRlVob6ttsbUy6aqbGakSypN7c3lHRyQr
    4bqKLOuDiOqhbUXIlcmvmHXlpJy0GWpxbjogWAgIFBQMHJBZl9D1B9M1dcI1YCSql5kkD0y8U6OCFtw
    +tYVN59uSEpGNU0Dofzf18jFL0JK7ysooo0MCUENSlAgdBZBZkCvVq3sa6qp6xkTE5ubUQXl5J0cFHty6zJO5WspIEo6jkEFbvlLkN
    BlnFHnoYEQQKWQEDodJwZAv0d6Tr6K6tItFvLl5tpNLjy7fi8725tHGYJCpQBDgUFFtsOgwIRjJM3TiOlEkrogIDApOCvLg6Vl60l1
    b7KMeuk260s5Mbtl5hpz+oRnK50siW+Dg4XOaQfAQnEyAmGUsBBwOA4CgcnBy0staxml6F3CNM0ITK/
    VbDK87Ty1Y7ScRxOSHQ4ODg5FHpBpKBCjNPEPD6dJDEluA4BA7NKhUStNmteixNLgrJpQlGiQ06qBNmEhYpMcCScChwcKi0kwIVe1w
    hJ0gSB1I3IuQBgYOTRIRLq3Hfq0BpNbyEqziacdjQ
    +TBOUpz5SgDK4EDg4KLSXkLRDabJbcODYCUnY5OatCGYKBAZRVozfVGqqFK4TsnTo47mtMXjhl5nQiK4BBA4FDP6y5I4FPRU0pBnJC
    UDSLfFW5s4UoEwgNU27zWm7FUZITU93om6hxQvmr3xaPNy8acNFDgdAwMPGOvE9B0GxWQTnKo5S0qHDSYhxW4Ag4y8IkvWpe8mthdF
    M1EmoZEqczrxQ3yVKJ0O9zu0zcibnmkht1HkvqYPBJFhyNKEyqZFGiKJPT46yCpo2GSyZtTOnOlTtl0uV1OrRqZoM4tGUmuXa8tcY1
    pLDb83PzT6bU6xi0KZ7ueYptxYSlsglzUcJeczwmzq2KA3HEZNiEgmhD6qevys
    +jJTcxLbRMq5x9Yk5qwZpIlOSnTTjDQ4VIVF0RdTMgXllTrhzZbSBhWCbI69uIOUJVM4ZisG/r
    +zHlfE9nsiPfM38eiqxyEloMIkzKcKakhtEoFkk9Kt5i3F4fR7aOxkRLAwXSqGFQBDQHAnBwvWKf0JqfH4vP5TAfU6Pm6HzsZEspUW
    JL4G2iYomIEnY725ONoF7RjgiSNozUGjTpRwRyRCOWKYOsZ9N2aiz5jF5fM
    +rhJR57DVUCodBlBuHBkNkcqAw6Y9J3qcS0GmFjggS82FFJoUVA2gliIcqRyph6z9UNlD+VB5Op+kh
    Your CSS File
    Some images do well as DATA-URI
    to help reduce HTTP requests.

    View full-size slide

  46. GZIP it,
    Combine It,
    Minimize It,
    CDN it,
    Cache it.

    View full-size slide

  47. CSS Blocks until loaded

    View full-size slide

  48. CSS JS Does too

    View full-size slide

  49. CSS JS
    HTML
    HTML
    HTML
    HTML

    View full-size slide

  50. Render fast, render often.

    View full-size slide

  51. Limit blocking items
    early in the DOM.

    View full-size slide

  52. Watch the dev tools

    View full-size slide

  53. Reduce CSS,
    Offload to the server,

    View full-size slide

  54. With media queries, we can right
    size images, CSS, Javascript.
    RESS

    View full-size slide

  55. Reduce CSS,
    Offload to the server,
    Unblock Javascript,

    View full-size slide

  56. head.js("/path/to/jquery.js", function() {
    // all done
    });
    Your Javascript File
    Head.js

    View full-size slide

  57. $LAB.script("jquery.js").wait()
    .script("jquery.ui.js")
    Your Javascript File
    Lab.js

    View full-size slide

  58. yepnope([
    {
    test : SomeJSTestHere,
    yep : ['/js/javascriptYouNeed.js', '/css/CSSYouNeed.css'],
    nope : ['/js/maybeAPolyfillOrSomethingAlongThoseLines.js', '/css/CrayCSS.css']
    }
    ]);
    Your Javascript File
    YepNope.js

    View full-size slide


  59. Your Javascript File
    HTML5
    Firefox 3.6+, IE 10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+

    View full-size slide

  60. Reduce CSS,
    Offload to the server,
    Unblock Javascript,
    Question everything.

    View full-size slide

  61. Do I really need ___________ ?
    Bootstrap

    View full-size slide

  62. Do I really need ___________ ?
    jQuery

    View full-size slide

  63. Do I really need ___________ ?
    Ember

    View full-size slide

  64. Do I really need ___________ ?
    Backbone

    View full-size slide

  65. What’s the least amount needed
    to paint above the fold?
    The fold

    View full-size slide

  66. The fold hides all slowness.

    View full-size slide

  67. It’s the same image
    Why not load an image once?

    View full-size slide

  68. Is responsive design slower?

    View full-size slide

  69. thepaintdrop.com ... 492kb

    View full-size slide

  70. status.heroku.com ... 190kb

    View full-size slide

  71. trello.com ... ~400kb

    View full-size slide

  72. instragram ... ~600kb

    View full-size slide

  73. These are first
    load problems.

    View full-size slide

  74. Delays cause user confusion
    and cost us revenue.
    Down with the spinners.

    View full-size slide

  75. The Lobster Parable
    Ladies and gentlemen: the story you are about to
    hear is true. Only the names have been changed...

    View full-size slide

  76. If there is a delay, animate or
    provide feedback.

    View full-size slide

  77. Let’s talk about the
    client side.

    View full-size slide

  78. Client side is slow on first load
    1 second

    View full-size slide

  79. If implemented poorly, can
    be slow subsequently.

    View full-size slide

  80. Turbolinks noun
    A ruby gem for speeding up
    your internet pages

    View full-size slide

  81. Javascript
    + pushState
    = Turbo Boost
    Also known as PJAX

    View full-size slide

  82. How to use it
    gem 'turbolinks'
    Gemfile
    //= require turbolinks
    application.js

    View full-size slide

  83. Use these as well...
    page:fetch // Fires when starting to fetch page
    page:receive // Fires when page received not parsed
    page:change // Fires when page is parsed and changed
    page:load // Fires when all done
    Turbolinks Events

    View full-size slide

  84. Built in cache
    page:change // Fires when page is changed from cache
    page:restore // Fires when all done
    Turbolinks Cache Events
    Turbolinks saves last 10 pages

    View full-size slide

  85. Opt Out

    Screw you Turbolinks

    View full-size slide

  86. jQuery Turbolinks
    gem 'jquery-turbolinks'
    Gemfile
    //= require turbolinks
    application.js
    Helps bind existing apps to Turbolinks

    View full-size slide



  87. Your HTML File
    Prefetch Your DNS
    Chrome, Firefox 3.5+, Safari 5+, Opera, IE 10
    Lose 50ms

    View full-size slide



  88. Your HTML File
    Prefetch Everything Else
    Chrome, Firefox 3.5+, Safari 5+, Opera, IE 10
    Lose 50ms

    View full-size slide

  89. Tools should make us
    more efficient, otherwise
    it’s not a tool.

    View full-size slide