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.

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

November 19, 2015
Tweet

Transcript

  1. 3.
  2. 5.
  3. 10.
  4. 14.
  5. 15.
  6. 16.
  7. 17.
  8. 18.
  9. 19.

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  10. 20.

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  11. 21.

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  12. 22.

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  13. 23.

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  14. 24.

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  15. 26.

    - =

  16. 30.
  17. 31.
  18. 35.
  19. 38.
  20. 41.
  21. 43.

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

    Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Pre-Render
  22. 44.

    localStorage available? Download Font Save in localStorage Show Font No

    Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Post-Render
  23. 46.
  24. 54.
  25. 55.
  26. 57.
  27. 58.
  28. 59.
  29. 61.

    Speed Index should give you an idea how the user

    feels when using your website
  30. 64.
  31. 65.
  32. 66.
  33. 67.
  34. 68.
  35. 71.

    GetRects(); GetRectTimings(); Get the visible rectangle for the things we

    care about. Get the timings of the resources inside
  36. 74.
  37. 75.
  38. 76.
  39. 78.
  40. 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");
  41. 84.

    var now = ruxitApi.now(); var actionId = ruxitApi.enterAction( 'Speed Index',

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