$30 off During Our Annual Pro Sale. View Details »

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 Slide

  2. Matthew Crist
    @matthewcrist

    View Slide

  3. Boston /Bähston/

    View Slide

  4. Customers Hate
    Slow Websites

    View Slide


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

    ☻ ☻

    View Slide




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

    View Slide




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

    View Slide

  8. Customers show
    NO MERCY
    for slow websites

    View Slide

  9. Loses 1% of sales
    per 100ms delay

    View Slide

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

    View Slide

  11. Loses 3% of traffic
    per 500ms delay

    View Slide






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




    View Slide

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

    View Slide

  14. An overly simplified of a desktop web request
    DNS

    View Slide

  15. An overly simplified of a desktop web request
    DNS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


  20. An overly simplified graphic of a mobile web request

    View Slide


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

    View Slide


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

    View Slide

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

    View Slide


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

    View Slide


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

    View Slide

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

    View Slide


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

    View Slide


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

    View Slide


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

    View Slide


  30. Average page is 1.4mb

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. Choose your tax
    1 second
    jQuery
    Zepto
    Nothing

    View Slide

  35. These examples were performed
    under optimal conditions.

    View Slide

  36. The “Golden Second”
    is aspirational.

    View Slide

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

    View Slide

  38. How?

    View Slide

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

    View Slide

  40. Combine It,

    View Slide


  41. CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS

    CSS
    Combine many CSS files
    into one “compressed”.

    View Slide


  42. JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS

    JS
    Develop a build process for JS to
    compress & minify

    View Slide


  43. IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG

    IMG
    Combine images into sprites
    where possible.

    View Slide

  44. Combine It,
    Minimize It,

    View Slide

  45. GZIP it,
    Combine It,
    Minimize It,

    View Slide

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

    View Slide

  47. {
    ! 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 Slide

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

    View Slide

  49. CSS Blocks until loaded

    View Slide

  50. CSS JS Does too

    View Slide

  51. CSS JS
    HTML
    HTML
    HTML
    HTML

    View Slide

  52. Render fast, render often.

    View Slide

  53. Limit blocking items
    early in the DOM.

    View Slide

  54. Watch the dev tools

    View Slide

  55. Reduce CSS,

    View Slide

  56. Reduce CSS,
    Offload to the server,

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

  64. Do I really need ___________ ?
    Bootstrap

    View Slide

  65. Do I really need ___________ ?
    jQuery

    View Slide

  66. Do I really need ___________ ?
    Ember

    View Slide

  67. Do I really need ___________ ?
    Backbone

    View Slide

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

    View Slide

  69. The fold hides all slowness.

    View Slide

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

    View Slide

  71. Is responsive design slower?

    View Slide

  72. thepaintdrop.com ... 492kb

    View Slide

  73. status.heroku.com ... 190kb

    View Slide

  74. trello.com ... ~400kb

    View Slide

  75. instragram ... ~600kb

    View Slide

  76. These are first
    load problems.

    View Slide

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

    View Slide

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

    View Slide

  79. View Slide

  80. Iowa

    View Slide

  81. View Slide

  82. View Slide

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

    View Slide

  84. Let’s talk about the
    client side.

    View Slide

  85. Client side is slow on first load
    1 second

    View Slide

  86. If implemented poorly, can
    be slow subsequently.

    View Slide

  87. Turbolinks

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  91. 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 Slide

  92. 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 Slide

  93. Opt Out

    Screw you Turbolinks

    View Slide

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

    View Slide



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

    View Slide



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

    View Slide

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

    View Slide

  98. fin.

    View Slide