Downloaded 19 times
![// 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");](https://image.slidesharecdn.com/speedindex-151119134949-lva1-app6891/85/Speed-Index-explained-79-320.jpg)
![// 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");](https://image.slidesharecdn.com/speedindex-151119134949-lva1-app6891/75/Speed-Index-explained-79-2048.jpg)
Uploaded byStefan Baumgartner
Speed Index, explained!
The document explains the concept of speed index, which measures how quickly content is visually displayed to users during page load. It discusses different loading scenarios and techniques to optimize speed index, including the use of progressive JPEGs and techniques for handling web fonts. The document also emphasizes the importance of measuring user experience and proposes methods for calculating speed index through client-side performance metrics.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites](https://cdn.slidesharecdn.com/ss_thumbnails/otimizacoesclientside-qcon2011-sergio-110910194248-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[German] Ab mit dem Kopf!](https://cdn.slidesharecdn.com/ss_thumbnails/wke-180912103636-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Speed Index, explained!
- 1. Speed Index, Explained! Stefan Baumgartner| @ddprrt https://speakerdeck.com/ddprrt/speed-index-explained
- 2. The page hasto load in under 3 seconds
- 4. It works onmy machine!
- 6. The Dothraki haveno word for “works on my machine”
- 7.
- 8.
- 9.
- 11.
- 12. ∫ 1 -visuallycomplete/1000 end
- 13. What does thismean?
- 19. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s1s 2s 3s 4s 5s 6s 7s 8s
- 20. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s1s 2s 3s 4s 5s 6s 7s 8s
- 21. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s1s 2s 3s 4s 5s 6s 7s 8s
- 22. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s1s 2s 3s 4s 5s 6s 7s 8s
- 23. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s1s 2s 3s 4s 5s 6s 7s 8s
- 24. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s1s 2s 3s 4s 5s 6s 7s 8s
- 25.
- 26.
- 27.
- 28.
- 29. this is notgood for the user this is
- 32.
- 33.
- 34.
- 35.
- 36. Baseline JPEG If theimage loads gradually over 1 second, it has a SpeedIndex of 500
- 37.
- 38. Progressive JPEG The imageis already ~77% complete at the beginning (it’s 23% different)
- 39. Progressive JPEG So ifit loads gradually over 1 second, it has a SpeedIndex of 113
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 47.
- 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.
- 52.
- 53.
- 56. I’m not 100%happy with Critical Path CSS
- 60. There is stillone thing however…
- 61. Speed Index shouldgive you an idea how the user feels when using your website
- 62. … so whyis everything done by a machine
- 63. … so whyis everything done by a machine
- 69. Let’s do iton the client!
- 70.
- 71. GetRects(); GetRectTimings(); Get the visiblerectangle for the things we care about. Get the timings of the resources inside
- 72.
- 73.
- 77. GetFirstPaint(); Calculate the timingwhen the browser painted first.
- 78. // IE andEdge window.performance.timing.msFirstPaint // Chropera var times = window.chrome.loadTimes(); times.firstPaintTime
- 79. // Every otherbrowser 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 fontresources and do resource timings …
- 81. CalculateSpeedIndex(); Given the visualprogress information, calculate the speed index.
- 82.
- 83. resource1 firstPaint resource3 resource4 endofPaintresponseStart blank, 1 pointper 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.
- 86.