One of the trickiest parts of understanding how fast your website loads for users is knowing which metric to use. The natural inclination would be to measure how long it takes the entire page to load. Others would argue that you should instead look at how long before something appears visually on the page. Or should we instead focus on Time to First Byte because Google cares about it enough to factor it into your Search Engine Results Page?
I would argue that all of these metrics may have specific use cases where they reign supreme, but the most important metric that people should be caring about is also the least understood: SpeedIndex. Never heard of it? SpeedIndex was originally developed by WebPageTest.org in 2012 and has grown in use over the years but still remains a relatively obscure metric.
So what is SpeedIndex and what does it do that the other metrics don’t?
Measuring What Matters
What makes SpeedIndex special is that it attempts to measure what actually matters to you - the experience your visitor has with your site. Rather than count the seconds between two events that may correlate with a good or bad experience, SpeedIndex actually examines the the progress of how the visible page loads and derives a score for how quickly the content appeared.
A real-world example of this can be seen below: Beauty sites Julep.com and Birchbox.com both have “load times” of around 6 seconds under synthetic conditions from WebPageTest. However, Birchbox has a fully loaded time of 13.7 seconds and Julep has a fully loaded time of 9.0 seconds. In addition, Julep’s start render time is faster and their content loads more quickly. As a result, Julep’s SpeedIndex is around 6,000 while Birchbox’s is around 13,000. You can see the visual representation of these differences below. Clearly, by looking at only the “load time” shown by WebPageTest, you would not get the full picture of how these competitor sites are performing.
Unlike most metrics, SpeedIndex isn’t simply a timing measurement between the initiation and completion of a process. It instead measures how long it takes to reach visual completeness of the page by analyzing a film strip of the page load. This sounds complicated because it is! A more in depth explanation of how SpeedIndex is calculated is covered at WebPageTest.org but we will walk through the basics here.
SpeedIndex is measured by taking snapshots of the page while loading, and identifying how complete the visual content on the page is for each snapshot. For example, 0% would be recorded for a blank screen and 100% for a complete page above the fold. Once a score for each snapshot is taken, the following formula is calculated:
(time between snapshots)*(1 – visual complete % / 100)
This calculation would be repeated until the page is finished loading. For a page that loads in 3 seconds with 500ms intervals between snapshots, the resulting data could look something like this:
500 * ((1-0)/100) = 500
500 * ((1-0)/100) = 500
500 * ((1-.25)/100) = 375
500 * ((1-.60)/100) = 200
500 * ((1-.75)/100) = 125
500 * ((1-1)/100) = 0
To arrive at the final SpeedIndex score, you would add up the scores for each snapshot:
500 + 500 + 375 + 200 + 125 + 0 = 1700
By breaking down how the score is calculated, you can see that by completing more of the page earlier during the loading process, your resulting SpeedIndex score will be lower. That’s why site owners should optimize to lower their SpeedIndex scores as much as possible.
It’s also important to not think of SpeedIndex in terms of time. While the time it takes to load the visual content of a page is a crucial element in deriving a score, SpeedIndex is more abstract and should be used within a context of optimizing your site for a better user experience.
How to Use SpeedIndex
SpeedIndex is best employed as an optimization tool to focus on improving the experience of your visitors. By taking steps to reduce the SpeedIndex time, you can be confident that you will be improving the experience of your site’s visitors rather than spending time on something that will have little to no business impact. SpeedIndex is highly effective at focusing your optimization efforts on problems that actually impact your business. Let’s quickly walk through the best ways to get your SpeedIndex number, and some easy wins to start bringing your score down.
Getting your SpeedIndex score:
Because SpeedIndex is relatively complicated to calculate, it’s not included in every site monitoring tool. It is also highly subject to the methodology of the tool being used, so it is best to test within a controlled environment. Fortunately there are many free synthetic monitoring tools out there that will easily provide you a SpeedIndex score for any web page. (WebPageTest.org, Pingdom, and section.io’s Synth to name a few).
The benefit of synthetic testing as opposed to Real User Monitoring for optimizing your SpeedIndex score is that you can avoid the messy outlier data that can cloud your results. Think of synthetic testing as running an experiment in a lab rather than collecting data in the wild. It is far easier to isolate problems and measure your progress in fixing them while measuring results in a controlled environment.
Quick SpeedIndex Wins:
Truly optimizing your site can involve a lot of long term projects that may include infrastructure considerations such as your hosting provider, code base, and caching strategy. These are all very important, but there are some things you can do immediately to help bring down your SpeedIndex score and start improving the experience of your visitors. Let’s start by looking at some content optimizations that require little effort but can make a huge difference.
SpeedIndex Problems to Consider
While SpeedIndex is a fantastic metric, it is not without it’s drawbacks. Some sites may not be a good fit for what it is trying to measure. For example, single page apps and dynamic sites are likely to have superficially lower scores since they don’t need to refresh the page once it’s loaded. Sites that have a hero with rotating images may be penalized as content continues to change after the page loads.
While it might not be a universally applicable metric, when it comes to site speed optimization, SpeedIndex remains the most crucial metric to pay attention to as it is the most likely to impact your customer’s experience and ultimately your business.