Users Hate Slow Websites

Users Hate Slow Websites

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

761be20b5ebd271008bcee1244fc5b52?s=128

Matthew Crist

August 29, 2013
Tweet

Transcript

  1. Good Morning.

  2. Matthew Crist @matthewcrist

  3. Boston /Bähston/

  4. Customers Hate Slow Websites

  5. ☻ ☻ ☻ ☻ ☻ ☻ 2% of them bounce

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

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

  8. Customers show NO MERCY for slow websites

  9. Loses 1% of sales per 100ms delay

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

  11. Loses 3% of traffic per 500ms delay

  12. ☻ ☻ 85% of mobile users expect same response time

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

  14. An overly simplified of a desktop web request DNS

  15. An overly simplified of a desktop web request DNS

  16. These requests can take up to 200ms You’ll never get

    this back. 1 second
  17. An overly simplified of a desktop web request DNS Server

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

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

  20. An overly simplified graphic of a mobile web request

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

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

  23. All your latency belongs to the tower 1 second 3.5seconds

    A 3g connection A 4g connection
  24. An overly simplified of a desktop web request The Tower

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

    DNS
  26. These requests can take up to 200ms You’ll never get

    this back. 1 second
  27. An overly simplified of a desktop web request The Tower

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

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

    DNS Server
  30. Average page is 1.4mb

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

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

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

    forget jQuery
  34. Choose your tax 1 second jQuery Zepto Nothing

  35. These examples were performed under optimal conditions.

  36. The “Golden Second” is aspirational.

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

  38. How?

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

  40. Combine It,

  41. CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS

    CSS CSS CSS Combine many CSS files into one “compressed”.
  42. JS JS JS JS JS JS JS JS JS JS

    JS JS JS Develop a build process for JS to compress & minify
  43. IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG

    IMG IMG IMG Combine images into sprites where possible.
  44. Combine It, Minimize It,

  45. GZIP it, Combine It, Minimize It,

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

  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.
  48. GZIP it, Combine It, Minimize It, CDN it, Cache it.

  49. CSS Blocks until loaded

  50. CSS JS Does too

  51. CSS JS HTML HTML HTML HTML

  52. Render fast, render often.

  53. Limit blocking items early in the DOM.

  54. Watch the dev tools

  55. Reduce CSS,

  56. Reduce CSS, Offload to the server,

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

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

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

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

  61. yepnope([ { test : SomeJSTestHere, yep : ['/js/javascriptYouNeed.js', '/css/CSSYouNeed.css'], nope

    : ['/js/maybeAPolyfillOrSomethingAlongThoseLines.js', '/css/CrayCSS.css'] } ]); Your Javascript File YepNope.js
  62. <script async src="YourJavascriptFile.js"></script> Your Javascript File HTML5 Firefox 3.6+, IE

    10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+
  63. Reduce CSS, Offload to the server, Unblock Javascript, Question everything.

  64. Do I really need ___________ ? Bootstrap

  65. Do I really need ___________ ? jQuery

  66. Do I really need ___________ ? Ember

  67. Do I really need ___________ ? Backbone

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

    The fold
  69. The fold hides all slowness.

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

  71. Is responsive design slower?

  72. thepaintdrop.com ... 492kb

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

  74. trello.com ... ~400kb

  75. instragram ... ~600kb

  76. These are first load problems.

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

    the spinners.
  78. The Lobster Parable Ladies and gentlemen: the story you are

    about to hear is true. Only the names have been changed...
  79. None
  80. Iowa

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

  84. Let’s talk about the client side.

  85. Client side is slow on first load 1 second

  86. If implemented poorly, can be slow subsequently.

  87. Turbolinks

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

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

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

    application.js
  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
  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
  93. Opt Out <div id="some-div" data-no-turbolink> Screw you Turbolinks

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

    bind existing apps to Turbolinks
  95. <link rel="dns-prefetch" href="//ajax.microsoft.com"> <link rel="dns-prefetch" href="//ajax.aspnetcdn.com"> Your HTML File Prefetch

    Your DNS Chrome, Firefox 3.5+, Safari 5+, Opera, IE 10 Lose 50ms
  96. <link rel="prefetch" href="an-image-of-a-kitten.jpg"> <link rel="prefetch" href="/the-url-of-another-page.html"> Your HTML File Prefetch

    Everything Else Chrome, Firefox 3.5+, Safari 5+, Opera, IE 10 Lose 50ms
  97. Tools should make us more efficient, otherwise it’s not a

    tool.
  98. fin.