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 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.
Speed Index, explained!
- 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!
- 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
- 26. - =
- 27. 6% difference
- 28. 5% difference
- 29. this is not good for the user this is
- 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
- 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?
- 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!
- 71. GetRects(); GetRectTimings(); Get the visible rectangle for the things we care about. Get the timings of the resources inside
- 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.
- 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