The UX of Speed

Transcript

1. None
2. None
3. None
4. None
5. None
6. None
7. None

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

13. None

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
25. None

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/

32. None
33. None
34. None

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

49. None

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

78. None
79. None
80. None

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
84. None
85. None
86. None
87. None
88. None
89. None
90. None

91. Use Dynatrace the Ruxit way

92. @ddprrt @dynatrace @ruxit

93. StahlstadtJS @stahlstadtjs

94. @plauscherl ERZÄHL UNS WAS!