The UX of Speed

An ode to performance -- presented at #DIV15

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. 400ms
   9% traffic
   

   View Slide

9. 1.5 seconds
   150% organic traffic
   

   View Slide

10. 2.2 seconds
    60 mio downloads / yr
    

    View Slide

11. 100ms
    1% revenue
    

    View Slide

12. 1 second
    1.6 billion USD / yr
    

    View Slide

13. View Slide

14. A website’s first content should
    not be a loading indicator, but
    the content.
    

    View Slide

15. Define metrics Define a goal Optimize
    

    View Slide

16. Define a goal Optimize
    Define metrics
    

    View Slide

17. 1 Pageweight
    

    View Slide

18. Images
    1.310
    Other
    4
    Video
    227
    HTML
    56
    Fonts
    97
    Scripts
    329
    Stylesheets
    63
    

    View Slide

19. CSS
    JS
    

    View Slide

20. CSS
    JS
    

    View Slide

21. CSS
    JS
    JPG
    

    View Slide

22. CSS
    JS
    JPG
    

    View Slide

23. 2 Page Speed Score
    

    View Slide

24. “Page Speed Score” tells you if you’ve
    followed a series of best practices for every
    component of your website
    

    View Slide

25. View Slide

26. https://developers.google.com/speed/pagespeed/insights
    

    View Slide

27. Eliminate render-blocking JS and CSS
    Optimize images
    Minify HTML, CSS, JavaScript
    

    View Slide

28. Reduce server response time
    Leverage browser caching
    Avoid landing page redirects
    Enable compression
    

    View Slide

29. How safe is Page Speed Score?
    

    View Slide

30. blog.catchpoint.com/2011/12/27/biggest_misconception_about_google_page_speed/
    

    View Slide

31. blog.ruxit.com/pagespeed-score-matters-less-think/
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. Solution: Page Speed Score is a good
    indicator on your dev style
    … but we need more!
    

    View Slide

36. Speed Index
    3
    

    View Slide

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.
    

    View Slide

38. ∫ 1 - visuallycomplete/100
    0
    end
    

    View Slide

39. What does this mean?
    

    View Slide

40. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

41. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

42. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

43. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

44. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

45. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

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
    

    View Slide

47. The lower
    Speed Index: The lower the better
    

    View Slide

48. qq
    http://webpagetest.org
    

    View Slide

49. View Slide

50. Define a goal Optimize
    Define a goal
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

54. 1. User gets information

    in under 1 second
    

    View Slide

55. 1. User gets important information

    in under 1 second
    

    View Slide

56. 1. ~ Speed Index < 1000
    

    View Slide

57. 2. Page Speed Score > 85
    

    View Slide

58. 3. Page Weight < 1.5 MB
    

    View Slide

59. Define a goal Optimize
    Optimize
    

    View Slide

60. DNS Lookup
    Initial
    connection
    TTFB
    HTML
    Download
    Life of an URL
    request
    

    View Slide

61. Starting here,
    we are able to
    control …
    

    View Slide

62. Starting here,
    we are able to
    control …
    

    View Slide

63. 
    blocking!
    

    View Slide

64. 
    blocking!
    <br/>blocking!<br/>

    View Slide

65. 
    blocking!
    <br/>blocking!<br/>start render<br/>

    View Slide

66. 
    blocking!
    <br/>blocking!<br/>start render?<br/>

    View Slide

67. Important content first!
    

    View Slide

68. Everything else
    is an enhancement
    

    View Slide

69. Critical CSS
    

    View Slide

70. <br/>…<br/>
    …
    <br/>loadCSS(‘main.css’)<br/>
    <br/>

    View Slide

71. <br/>…<br/>
    …
    <br/>loadCSS(‘main.css’)<br/>
    <br/>

    View Slide

72. <br/>…<br/>
    …
    <br/>loadCSS(‘main.css’)<br/>
    <br/>

    View Slide

73. Open up your
    website at the
    desired viewport.
    Look at the above
    the fold content.
    

    View Slide

74. Open a headless
    browser to
    find the CSS for
    that content.
    

    View Slide

75. npm install --save-dev critical
    

    View Slide

76. http://jonassebastianohlsson.com/criticalpathcssgenerator/
    

    View Slide

77. Webfonts
    as an Enhancement
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. Modern
    browser?
    Supports
    WOFF?
    Font in
    Storage
    Show
    Font
    Pre-Render
    

    View Slide

82. Modern
    browser?
    Supports
    WOFF?
    Font in
    Storage
    Show
    Font
    No Font
    http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage
    Pre-Render
    

    View Slide

83. localStorage
    available?
    Download
    Font
    Save in
    localStorage
    Show
    Font
    No Font
    http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage
    Post-Render
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. Use Dynatrace
    the Ruxit way
    

    View Slide

92. @ddprrt
    @dynatrace
    @ruxit
    

    View Slide

93. StahlstadtJS
    @stahlstadtjs
    

    View Slide

94. @plauscherl
    ERZÄHL UNS WAS!
    

    View Slide