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

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

2. The page has to load in under
3 seconds

4. It works on my machine!

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

7. Use metrics!

8. loading
document.readyState
loading
DOMContentLoaded
window.onload

9. window.performance.timing

11. Speed Index

12. ∫ 1 - visuallycomplete/1000
end

13. What does this mean?

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

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

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

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

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

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

25. So, how’s difference
calculated?

26. -
=

27. 6% difference

28. 5% difference

29. this is not good
for the user
this is

32. Baseline JPEG
10%

33. Baseline JPEG
10% 50%

34. Baseline JPEG
10% 50% 100%

35. Gotcha!

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

37. Progressive JPEG
10% 50% 100%

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

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

40. Some tricks …

41. Webfonts

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

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

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

45. Critical Path CSS

47. <link rel=“stylesheet” href=“main.css”> blocking!

48. <link rel=“stylesheet” href=“main.css”> blocking!
<script src=“main.js”> blocking!

49. <link rel=“stylesheet” href=“main.css”> blocking!
<script src=“main.js”> blocking!
start render

50. <link rel=“stylesheet” href=“main.css”> blocking!
<script src=“main.js”> blocking!
start render?

51. <style>
…
</style>
…
<script>
loadCSS(‘main.css’)
</script>
<script src=“main.js”>

52. <style>
…
</style>
…
<script>
loadCSS(‘main.css’)
</script>
<script src=“main.js”>

53. <style>
…
</style>
…
<script>
loadCSS(‘main.css’)
</script>
<script src=“main.js”>

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

60. There is still one thing however…

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

62. … so why is everything
done by a machine

63. … so why is everything
done by a machine

69. Let’s do it on the client!

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

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

72. window.performance.timing

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

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

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

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");

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

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

82. resource1
firstPaint
resource3
resource4
endofPaintresponseStart
document
font

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

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

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

86. @ddprrt
@dynatrace
@ruxit