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.
To help understand why this is so important, let’s imagine two identical web pages (Page A and Page B) with the exact same full page load time of 5 seconds. Page A takes about 1 second to load the first byte, but doesn’t show any visual content on the page until around 3.5 seconds. Page A is given a SpeedIndex score of 5000. Page B loads the first byte within 150ms, and loads 90% of the visual content of the page within 1 second. The final 4 seconds are spent loading third party Javascript that doesn’t impact the users experience. Page B is given a SpeedIndex score of 1000, 5 times better than Page A. You can see from this example how little the full page load time tells you in comparison to SpeedIndex.
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.
Calculating SpeedIndex
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’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.
-
Image Optimization: It goes without saying that the larger your image files are, the slower they will load. Many people think there is a necessary trade off between image quality and site speed. There are, however, free tools to drastically reduce your image sizes without noticeably impacting their quality (even on hi-definition screens). Tools like TinyJPG and Optimizilla allow you to upload your images and resize them easily. You can also resize your images on the fly with a reverse proxy like Google PageSpeed (now available on Section’s Edge Compute Platform) which ensures images are optimized for performance. You also get added benefits like lazy loading, css minification, inline images, and javascript deferral.
-
Gzip Compression: You can do more than just compress your images to reduce the size of the files on your webpage. By enabling Gzip compression, you can reduce HTML, CSS, PHP, and Javascript files by as much as 30%. This will allow your users to download a much smaller file and then decompress it in the browser after the download is complete. Check out this site for how to enable Gzip compression using an .htacess file.
-
Critical Render Path Optimization: SpeedIndex cares less about how long it takes to complete the full page load and more about how quickly content appears to the user. Therefore, optimizing the render path can provide big improvements to your SpeedIndex score. There are a lot of ways to improve the critical render path (Catchpoint has a great deep dive here), but in essence you want to reduce any render-blocking scripts, defer your javascript files, and reduce the number of css files that could prevent visual content from loading quickly. Moving to HTTP2 can also optimize your critical render path optimization.
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.
