The UX of Speed

An ode to performance -- presented at #DIV15

Transcript

8. 400ms 9% traffic
9. 1.5 seconds 150% organic traffic
10. 2.2 seconds 60 mio downloads / yr
11. 100ms 1% revenue
12. 1 second 1.6 billion USD / yr
14. A website’s first content should not be a loading indicator, but the content.
15. Define metrics Define a goal Optimize
16. Define a goal Optimize Define metrics
17. 1 Pageweight
18. Images 1.310 Other 4 Video 227 HTML 56 Fonts 97 Scripts 329 Stylesheets 63
19. CSS JS
20. CSS JS
21. CSS JS JPG
22. CSS JS JPG
23. 2 Page Speed Score
24. “Page Speed Score” tells you if you’ve followed a series of best practices for every component of your website
26. https://developers.google.com/speed/pagespeed/insights
27. Eliminate render-blocking JS and CSS Optimize images Minify HTML, CSS, JavaScript
28. Reduce server response time Leverage browser caching Avoid landing page redirects Enable compression
29. How safe is Page Speed Score?
30. blog.catchpoint.com/2011/12/27/biggest_misconception_about_google_page_speed/
31. blog.ruxit.com/pagespeed-score-matters-less-think/
35. Solution: Page Speed Score is a good indicator on your dev style … but we need more!
36. Speed Index 3
37. The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port.
38. ∫ 1 - visuallycomplete/100 0 end
39. What does this mean?
40. Visually complete (%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
41. Visually complete (%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
42. Visually complete (%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
43. Visually complete (%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
44. Visually complete (%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
45. Visually complete (%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
46. Every page is fully loaded in 10 seconds 93% linear after 1 second 100% linear after 10 seconds 20% linear after 9 seconds 7% linear after 9 seconds 80% linear after 1 second 881 5000 8610
47. The lower Speed Index: The lower the better
48. qq http://webpagetest.org
50. Define a goal Optimize Define a goal
51. Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy
52. Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy We want to avoid this
53. Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy We want to be in this area
54. 1. User gets information
 in under 1 second
55. 1. User gets important information
 in under 1 second
56. 1. ~ Speed Index < 1000
57. 2. Page Speed Score > 85
58. 3. Page Weight < 1.5 MB
59. Define a goal Optimize Optimize
60. DNS Lookup Initial connection TTFB HTML Download Life of an URL request
61. Starting here, we are able to control …
62. Starting here, we are able to control …
63. <link rel=“stylesheet” href=“main.css”> blocking!
64. <link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking!
65. <link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking! start render
66. <link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking! start render?
67. Important content first!
68. Everything else is an enhancement
69. Critical CSS
70. <style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
71. <style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
72. <style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
73. Open up your website at the desired viewport. Look at the above the fold content.
74. Open a headless browser to find the CSS for that content.
75. npm install --save-dev critical
76. http://jonassebastianohlsson.com/criticalpathcssgenerator/
77. Webfonts as an Enhancement
81. Modern browser? Supports WOFF? Font in Storage Show Font Pre-Render
82. Modern browser? Supports WOFF? Font in Storage Show Font No Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Pre-Render
83. localStorage available? Download Font Save in localStorage Show Font No Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Post-Render
91. Use Dynatrace the Ruxit way
92. @ddprrt @dynatrace @ruxit
93. StahlstadtJS @stahlstadtjs
94. @plauscherl ERZÄHL UNS WAS!