Users Hate Slow Websites

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

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...
80. Iowa
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.