How to measure Speed Index using Navigation Timing Api?

Question

I want to measure the speed index of a website using Navigation Timing Api but not understanding what all properties represent for the calculation of the speed index in the Navigation Timing API

Answer 1

Speed Index isn't a single metric that shows in things like the Navigation Timing API so you can't get it just by querying that.

This Navigation Timing API provides access to a list of metrics of how the page is loaded:

However, Speed Index is not a point in time measure, but a calculation which uses screenshots of the page loading to measure the visual progress of how the page is loaded, but calculating how much the pixels change throughout the load of a page. So a page that loads 90% of it's content quickly, and then loads the last 10% later, will get a better Speed Index score than one that loads 100% in the same amount of time, but leaves it all to the end.

This makes Speed Index quite intensive to calculate. While that's fine for tools like WebPageTest or Lighthouse, it's not great for measuring in the field, and there is no browser API to obtain the Speed Index because of this as far as I know. Simpler metrics like LCP are usually better for field measurements (though not yet supported in all browsers).