Speed Index, explained

In the land of web performance metrics, Speed Index is one of the most promising and robust ones around. Taking the visual progress on the user's screen into account instead of merely relying on navigation timings, it promises to give real feedback on the user experience of your website.

But is it really the silver bullet? What's the catch? Can we even "cheat" on getting a better score? In this talk, we will get to the bottom of Speed Index:

– We will learn how Speed Index is calculated and what you need to measure your own site's Speed Index
– We will see which pain points Speed Index tackles, and what you can do to optimize your site to get a better score
– We learn where the downsides of this metric are and if it should be of any concern to you
– Last, but not least, we will check how we can overcome those downsides with additional, non-disruptive monitoring to get an even better view of your site's performance.

Transcript

1. Speed Index,
   Explained!
   Stefan Baumgartner | @ddprrt https://speakerdeck.com/ddprrt/speed-index-explained
   

   View Slide

2. The page has to load in under
   3 seconds
   

   View Slide

3. View Slide

4. It works on my machine!
   

   View Slide

5. View Slide

6. The Dothraki have no word
   for “works on my machine”
   

   View Slide

7. Use metrics!
   

   View Slide

8. loading
   document.readyState
   loading
   DOMContentLoaded
   window.onload
   

   View Slide

9. window.performance.timing
   

   View Slide

10. View Slide

11. Speed Index
    

    View Slide

12. ∫ 1 - visuallycomplete/100
    0
    end
    

    View Slide

13. What does this mean?
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. So, how’s difference
    calculated?
    

    View Slide

26. -
    =
    

    View Slide

27. 6% difference
    

    View Slide

28. 5% difference
    

    View Slide

29. this is not good
    for the user
    this is
    

    View Slide

30. View Slide

31. View Slide

32. Baseline JPEG
    10%
    

    View Slide

33. Baseline JPEG
    10% 50%
    

    View Slide

34. Baseline JPEG
    10% 50% 100%
    

    View Slide

35. Gotcha!
    

    View Slide

36. Baseline JPEG
    If the image loads gradually over 1 second,
    it has a SpeedIndex of 500
    

    View Slide

37. Progressive JPEG
    10% 50% 100%
    

    View Slide

38. Progressive JPEG
    The image is already ~77% complete at the
    beginning (it’s 23% different)
    

    View Slide

39. Progressive JPEG
    So if it loads gradually over 1 second,
    it has a SpeedIndex of 113
    

    View Slide

40. Some tricks …
    

    View Slide

41. Webfonts
    

    View Slide

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

    View Slide

43. 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

44. 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

45. Critical Path CSS
    

    View Slide

46. View Slide

47. 
    blocking!
    

    View Slide

48. 
    blocking!
    <br/>blocking!<br/>

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. View Slide

55. View Slide

56. I’m not 100% happy with Critical Path CSS
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. There is still one thing however…
    

    View Slide

61. Speed Index should give you an
    idea how the user feels when
    using your website
    

    View Slide

62. … so why is everything
    done by a machine
    

    View Slide

63. … so why is everything
    done by a machine
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. Let’s do it on the client!
    

    View Slide

70. GetRects();
    GetRectTimings();
    GetFirstPaint();
    GetFontTime();
    CalculateVisualProgress();
    CalculateSpeedIndex();
    

    View Slide

71. GetRects();
    GetRectTimings();
    Get the visible rectangle for the things
    we care about.
    Get the timings of the resources inside
    

    View Slide

72. window.performance.timing
    

    View Slide

73. window.performance.timing
    getEntriesByType(‘resource’)
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. GetFirstPaint();
    Calculate the timing when the browser
    painted first.
    

    View Slide

78. // IE and Edge
    window.performance.timing.msFirstPaint
    // Chropera
    var times = window.chrome.loadTimes();
    times.firstPaintTime
    

    View Slide

79. // Every other browser
    var headURLs = {};
    var headElements =
    doc.getElementsByTagName('head')[0].children;
    for (var i = 0; i < headElements.length; i++) {
    //get stylesheets and non-async scripts
    ...
    }
    // compare with resource timing
    var requests =
    win.performance.getEntriesByType("resource");
    

    View Slide

80. GetFontTime();
    Check all font resources and do
    resource timings …
    

    View Slide

81. CalculateSpeedIndex();
    Given the visual progress information,
    calculate the speed index.
    

    View Slide

82. resource1
    firstPaint
    resource3
    resource4
    endofPaint
    responseStart
    document
    font
    

    View Slide

83. resource1
    firstPaint
    resource3
    resource4
    endofPaint
    responseStart
    blank, 1 point per ms! gradually
    document
    font
    

    View Slide

84. var now = ruxitApi.now();
    var actionId =
    ruxitApi.enterAction(
    'Speed Index',
    'speedIndex',
    now - RUMSpeedIndex(),
    null);
    ruxitApi.leaveAction(actionId, now);
    Tell your monitor solution
    

    View Slide

85. https://github.com/ddprrt/RUM-SpeedIndex
    

    View Slide

86. @ddprrt
    @dynatrace
    @ruxit
    

    View Slide