Originally published at PerfBeacon.com.
Everyone wants a faster website, but not all metrics measure "speed" the same way. Speed Index is particularly interesting because it can give two websites that load in exactly the same amount of time vastly different scores.
What is it though?
Speed Index measures how quickly visible content loads. Lower scores are better.
It's different to regular performance metrics such as Time to First Byte (TTFB) and First Contentful Paint (FCP) because it tries to assign a score to a page's user experience.
As a user, you typically visit a webpage because you want to see its content. Visiting a website that loads its content slowly is generally a frustrating experience, and we're more likely to abandon a page that takes ages to show anything.
Speed Index rewards pages that provide a good user experience (that is, show visible content as soon as possible), and punishes pages that download all of their assets before displaying anything.
Got an example?
Imagine two websites.
Website A is a classic, pre-JavaScript, PHP-based website from the 2000s that shows content progressively, from top to bottom as the browser receives data. Website A takes 5 seconds to complete loading.
Website B is a React app built in 2019 that is only capable of showing content once its JavaScript bundle is downloaded and executed. Website B also takes 5 seconds to complete loading.
Website A immediately shows content, and progressively loads more images and text as the browser receives the full HTML, while Website B only shows the user a spinner for several seconds before loading the entirety of its content.
Website A's Speed Index measurement is much faster than Website B, as the user experience is much better.
How is it calculated?
Speed Index is calculated by first recording a video of the webpage loading, then comparing the distance between histograms of each individual frame to the final frame.
WebPageTest's documentation goes into detail about how it's calculated here.
Top comments (0)