Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Speed Index, explained

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.

Stefan Baumgartner

November 19, 2015
Tweet

More Decks by Stefan Baumgartner

Other Decks in Programming

Transcript

  1. Visually complete (%) 0 25 50 75 100 Time in

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

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

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

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

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  7. - =

  8. Modern browser? Supports WOFF? Font in Storage Show Font No

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

    Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Post-Render
  10. Speed Index should give you an idea how the user

    feels when using your website
  11. GetRects(); GetRectTimings(); Get the visible rectangle for the things we

    care about. Get the timings of the resources inside
  12. // 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");
  13. var now = ruxitApi.now(); var actionId = ruxitApi.enterAction( 'Speed Index',

    'speedIndex', now - RUMSpeedIndex(), null); ruxitApi.leaveAction(actionId, now); Tell your monitor solution