Speed index is one of the metrics measured by Lighthouse, Google’s open-source auditing tool to improve webpage performance and accessibility. The metric provides a reliable way to measure the user experience of a webpage.
Speed index measures the time it takes for the visible (above-the-fold) parts of a webpage to appear to the users. It became part of the WebPageTest in April 2012. The Lighthouse-powered Audits panel in the Chrome DevTools also measures it.
Speed index can be used to compare performance against competitors or previous versions of the same website. It best utilised alongside other metrics like load time and start-render to get a better understanding of a site’s quality.
Before speed index measurements, load times were predominantly used to determine website speeds. The metric is easy to measure. However, the total load time doesn't accurately represent the end-user experience. Users are more interested in the visible parts of the website. So even if a website takes longer, the user experience may be degraded, depending on how the visible content loads. When users see that the above-the-fold content loaded (even if remaining content is still loading), the page feels faster. Developers needed a way to measure this situation. Speed index was created to represent how the end-user experiences the content loading process.
Speed index calculates the progressive loading of the visible parts of a webpage. It records a video of a page when it is loading, then uses this visual information to calculate the final metric. Below you can see a screenshot from Chrome Developer Tools Audits panel.
Milliseconds are used to measure the speed index on Chrome Developer Tools (Lighthouse Reports) whereas WebPageTest gives it in seconds. The lower the speed index number, the better the performance of the website. A good speed index is one of 1000 milliseconds or lower. At the time of writing the here are the current speed index scores for the top 100 websites.
You can calculate the speed index of a website by adding up all the IntervalScores of a website;
IntervalScore = Interval * (1.0 - (Complete/100))
The "Complete" stands for what percentage of the website has already loaded.
Let’s look at two examples to see how speed index can help determine website performance. Suppose, we are testing a website with intervals of 500 milliseconds (real audits use an interval of 100 milliseconds).
Even though Website B takes longer to download fully, it provides better user experience, reflected by the lower speed index score. The reason is that most of the content of Website B downloads faster than Website A. The total load time doesn’t capture this user experience. Speed index does.
The completeness determination process has changed over the years. Initially, pixel comparisons against the image of the fully loaded page were used to determined completeness.
However, due to the dynamic nature of web pages, pixels can shift up and down or sideways and create massive differentials. So the speed index team migrated to histograms of colours to get more accurate measurements of how much of the ATF content had been rendered.
Recently, the speed index team at Google has started to experiment with using Paint Events that Webkit (Chrome) has started to expose. This new visible progress measurement process doesn’t require video capture so is a lot less intensive.
Speed index provides a better measure of how users see content appear on a webpage. However, it doesn’t cover every aspect of the user experience. For example, it doesn’t indicate anything about the relevance of what is appearing on the page. So speed index should always be used in conjunction with other metrics to measure the overall performance of your website.