Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Speed Index, explained!

862 vues

Publié le

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.

Publié dans : Logiciels
  • Soyez le premier à commenter

Speed Index, explained!

  1. 1. Speed Index, Explained! Stefan Baumgartner | @ddprrt https://speakerdeck.com/ddprrt/speed-index-explained
  2. 2. The page has to load in under 3 seconds
  3. 3. It works on my machine!
  4. 4. The Dothraki have no word for “works on my machine”
  5. 5. Use metrics!
  6. 6. loading document.readyState loading DOMContentLoaded window.onload
  7. 7. window.performance.timing
  8. 8. Speed Index
  9. 9. ∫ 1 - visuallycomplete/1000 end
  10. 10. What does this mean?
  11. 11. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  12. 12. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  13. 13. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  14. 14. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  15. 15. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  16. 16. Visuallycomplete(%) 0 25 50 75 100 Time in Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  17. 17. So, how’s difference calculated?
  18. 18. - =
  19. 19. 6% difference
  20. 20. 5% difference
  21. 21. this is not good for the user this is
  22. 22. Baseline JPEG 10%
  23. 23. Baseline JPEG 10% 50%
  24. 24. Baseline JPEG 10% 50% 100%
  25. 25. Gotcha!
  26. 26. Baseline JPEG If the image loads gradually over 1 second, it has a SpeedIndex of 500
  27. 27. Progressive JPEG 10% 50% 100%
  28. 28. Progressive JPEG The image is already ~77% complete at the beginning (it’s 23% different)
  29. 29. Progressive JPEG So if it loads gradually over 1 second, it has a SpeedIndex of 113
  30. 30. Some tricks …
  31. 31. Webfonts
  32. 32. Modern browser? Supports WOFF? Font in Storage Show Font Pre-Render
  33. 33. Modern browser? Supports WOFF? Font in Storage Show Font No Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Pre-Render
  34. 34. localStorage available? Download Font Save in localStorage Show Font No Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Post-Render
  35. 35. Critical Path CSS
  36. 36. <link rel=“stylesheet” href=“main.css”> blocking!
  37. 37. <link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking!
  38. 38. <link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking! start render
  39. 39. <link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking! start render?
  40. 40. <style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
  41. 41. <style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
  42. 42. <style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
  43. 43. I’m not 100% happy with Critical Path CSS
  44. 44. There is still one thing however…
  45. 45. Speed Index should give you an idea how the user feels when using your website
  46. 46. … so why is everything done by a machine
  47. 47. … so why is everything done by a machine
  48. 48. Let’s do it on the client!
  49. 49. GetRects(); GetRectTimings(); GetFirstPaint(); GetFontTime(); CalculateVisualProgress(); CalculateSpeedIndex();
  50. 50. GetRects(); GetRectTimings(); Get the visible rectangle for the things we care about. Get the timings of the resources inside
  51. 51. window.performance.timing
  52. 52. window.performance.timing getEntriesByType(‘resource’)
  53. 53. GetFirstPaint(); Calculate the timing when the browser painted first.
  54. 54. // IE and Edge window.performance.timing.msFirstPaint // Chropera var times = window.chrome.loadTimes(); times.firstPaintTime
  55. 55. // 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");
  56. 56. GetFontTime(); Check all font resources and do resource timings …
  57. 57. CalculateSpeedIndex(); Given the visual progress information, calculate the speed index.
  58. 58. resource1 firstPaint resource3 resource4 endofPaintresponseStart document font
  59. 59. resource1 firstPaint resource3 resource4 endofPaintresponseStart blank, 1 point per ms! gradually document font
  60. 60. var now = ruxitApi.now(); var actionId = ruxitApi.enterAction( 'Speed Index', 'speedIndex', now - RUMSpeedIndex(), null); ruxitApi.leaveAction(actionId, now); Tell your monitor solution
  61. 61. https://github.com/ddprrt/RUM-SpeedIndex
  62. 62. @ddprrt @dynatrace @ruxit

×