Speed Index Explained - Another Way to Measure Web Performance

Given that users' perceptions of time are ever changing, how do we know what "fast" means in terms of web performance? When we talk about speed, there are actually dozens of metrics to consider. For instances, start render, first paint and first meaningful paint are all terms used to describe how fast a page loads, but they all technically measure different things. Over the past half-decade, all of the factors that influence a web user's perceived performance and actual performance have been collapsed under the concept of speed index.

What is speed index?

Simply put, speed index is how many milliseconds it takes for the visible parts of a webpage to be displayed. Although that description sounds broad, developers have come up with specific formulas that attempt to measure the user's perceived experience. The speed index metric was created and added to WebPageTest back in 2012. It is expressed as a numeric score with a lower score being considered ideal. You'll find that a webpage's speed index differs on various view port sizes.

Although it has limitations, the speed index metric can provide a point of comparison with competitors, and it can be helpful in determining the effectiveness of optimization efforts. However, other metrics traditionally used to measure speed, like start render and load time, are not necessarily obsolete as they can tell you exactly where your website lags behind.

You may see the term "speed index" used in different contexts; for example, Google Lighthouse has a metric called "Perceptual Speed Index," which is slightly different. This article will focus specifically on how WebPageTest measures speed index, but all of the tips below can help improve your website's overall performance.

Why do we need speed index?

Perception is indeed everything, but it's extremely subjective. Fortunately, developers have gotten creative about measuring subjective experiences. Speed index isn't a timing metric; instead, it's a scoring system that evaluates several different speed metrics. The lower your speed index score, the faster your website is actually performing. The holistic nature of the speed index metric gives you a general overview of your website's perceived performance; however, it's not necessarily helpful for diagnosing problems, which is why other metrics are still relevant.

Two surefire methods for boosting your speed index score are:

1. Optimizing content efficiency
2. Optimizing the critical rendering path

Many applications today depend on dozens, or even hundreds, of resources and each one adds to the overall load time (see how the growth of web page size has evolved over the years). Altering how those resources are received can have a sizable impact on how quickly visitors start seeing content on your page.

How much does speed matter?

Everyone knows there is a strong correlation between how long it takes a website to load and bounce rate. Many developers also know that progressive rendering, or loading content sequentially rather than all at once, entices visitors to keep waiting for the rest of a page to finish loading. While it all sounds intuitive today, not everyone knows that there is actually research to quantify just how much these factors matter. According to British SEO firm Hobo-Web:

• Ancestory.com saw a 7 percent rise in conversions from improving the render time of their webpages by 68 percent, reducing page bloat by 46 percent and reducing load time by 64 percent.
• AliExpress reduced their webpage's load time by 36 percent and saw a 10.5 percent increase in orders as well as a 27 percent increase in conversion rates for new visitors.
• The Telegraph saw an 11 percent drop in page views for a 4 second delay resulting from artificial latency.
• A mere 0.3 second reduction in latency across their funnel brought Trainline an extra £8 million in annual revenue!

How is speed index calculated?

When you run a website through WebPageTest, the tool takes snapshots of the screen as your content loads. Each captured frame is scored for visual completeness above the fold, and each score is calculated using the following formula:

Interval time * (1 - visual completeness/100)

Time is represented in intervals of 500 millisecond, and visual completeness is the percentage of total above-the-fold content that has been loaded. Each frame is scored until all content is visible, and then all of the scores are added up to give you a speed index. Take a look at the following example:

This theoretical website takes 3,500 milliseconds to load all of its content. If you apply the simplified formula to each of the six intervals, you get 500, 450, 350, 300, 200, 100, and 0 respectively. Add it all up, and you get a speed index of 1900. Below are the calculations for each 500 ms time internal:

1. 500 * (1-0/100) = 500
2. 500 * (1-10/100) = 450
3. 500 * (1-30/100) = 350
4. 500 * (1-40/100) = 300
5. 500 * (1-60/100) = 200
6. 500 * (1-80/100) = 100
7. 500 * (1-100/100) = 0

While you always want your speed index score to be as low as possible, anything below 1,000 is generally considered optimal, so the website in the above example could probably benefit from some optimization. Nonetheless, most real-life websites have much higher scores. NCC Group analyzed the homepages of the top 50 retailers in the UK and found that the average speed index score was between 3,000 - 8,500.

How to improve your speed index: Progressive rendering

Progressive rendering isn't a singular practice; it's a collection of techniques that you can choose from to tailor your website to your visitors' needs. Below are some measures you can take to improve your website's progressive rendering path:

1. Use lazy loading images

Content that loads as the user scrolls down is called lazy loading. This technique saves bandwidth, and it's ideal if the webpage's call to action is at the very top since many users may not scroll down below the fold anyway. If implemented incorrectly, lazy loading can actually slow down your overall performance. Therefore, you should use a trusted solution and ensure you test the performance both before and after implementation.

2. Add placeholders

Placeholders don't speed up image load times, but they help users remain patient by indicating that an image is on the way. They are a must if you have a webpage with tons of images. A placeholder can be an empty space or a block of solid color matching the dimensions of the image. Picture icons are another type of placeholder as are low-res versions of the image.

3. Embrace progressive images

Speaking of which, progressive images allows images to render in increments starting with low resolution approximations and then progressing to a complete picture. Setting up this process is slightly different depending on the image format. Check out this complete guide on progressive JPGs to learn more about the benefits of loading images progressively.

How to improve your speed index: Optimize content efficiency

Think of optimizing content efficiency like packing a suitcase. If you try to shove things in haphazardly, you might not be able to fit everything you want, but taking time to organize your belongings can help you make space for more essentials. Here are some tips for improving content efficiency.

1. Eliminate unnecessary downloads

Take an inventory of your website's assets. Is there anything you can do without? It may sound like common sense, but it bears repeating: Don't include unnecessary resources. If you're working with a team, you may need to convince others that something isn't necessary, which is why it's a good idea to periodically assess the value of all your assets.

Sometimes, resources that are meant to engage users can slow down your whole operation, which actually results in users turning away. Before you add any such resource, you should come up with ways to measure its effectiveness. For example, if you have a photo carousel or a third party widget that displays related content at the top of your homepage, you should track how often visitors click on those features to determine if they are really worth the overhead.

2. Compress your data

Compressing your website's assets is an easy and efficient way to save space, reduce load time, and improve the overall speed of your site. Whether you're using a tried and true method such as Gzip or a newer compression algorithm such as Brotli, compressing your data is a must.

3. Create a caching hierarchy

Take advantage of caching as much as possible. You should come up with a caching strategy based on your own needs, but here are some general guidelines to follow:

• Conduct auditing to determine the optimal cache lifetime for each resource.
• Make sure your server specifies a cache validator.
• Implement cache busting.
• Use intermediary caches such as content delivery networks.

4. Optimize your images

You have plenty of options for optimizing your images. For example:

• Favor vector formats since they are resolution and scale independent.
• Use lossless or lossy compression to reduce the overall size of your images
• Consider your priorities and choose the most appropriate image format for each individual asset.
• Don't be afraid to experiment with image quality settings as you can sometimes make your website significantly faster by lowering image resolutions just a little bit.
• Resize images on your server so that the display size matches the original size of the image or use srcset sizing attributes.
• If possible, invest in an automated image compression tool that will keep your image assets optimized at all times.

5. Optimize your fonts

Webfonts can help create a unique user experience that appropriately represents your brand. Here's how to optimize your font assets to be fast and scalable to any screen:

• Limit the number of fonts you use, and use as few variants as possible.
• Subset your fonts so that you only load the characters you need.
• Provide every font in every format including WOFF2, WOFF, EOT and TTF. Remember to apply Gzip compression to EOT and TTF formats since they're not compressed by default.
• Since fonts are static and rarely require updates, you can optimize your caching strategy by specifying revalidation tokens.

Speed index limitations

The speed index metric has a few limitations that you should keep in mind. If you're testing a dynamic website, or a single page application that uses Ajax, your score will be artificially inflated because the page doesn't refresh after loading. Automatically rotating carousels, on the other hand, can lower your score because they keep changing after the page load is completed.

Summary

Web performance metrics can never be analyzed in a vacuum. Although speed index takes into account multiple factors, things like render start and document complete are not yet obsolete. Users will inevitably become more, not less, impatient as technology improves, so web developers must always strive to stay two steps ahead of the latest technological trends in order to be able to provide a better user experience for all.