The UX of Speed

The UX of Speed

An ode to performance -- presented at #DIV15

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

October 09, 2015
Tweet

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!