Out of all of the metrics reported by Lighthouse, Speed Index is probably the most difficult to understand – both its mechanism and how to improve it.
With a name like Speed Index, you’d expect it to be a straightforward measure of some aspect page load; however, this isn’t the case. Here are the definitions from the highest authority sites in this area.
Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. It is the average time at which visible parts of the page are displayed.
MDN
True, but so generic that it’s not very useful. Google actually uses this as the snippet answer for this search.
Speed Index measures how quickly content is visually displayed during page load.
web.dev
Equally vague.
Today we are looking at the Speed Index on your Lighthouse report in terms of the Google definition, how to improve it, and why you should care about it.
What Is A Lighthouse Score?
Lighthouse is the de facto tool for measuring the overall performance of a particular webpage. It’s a free developer tool available in the Chrome browser.
A Lighthouse report contains five categories: Performance, Best Practices, Accessibility, PWA, and SEO. We are currently focusing on Performance – specifically on mobile. In all but the rarest cases, the mobile score will be worse than the desktop score since it is running tests in a very resource-constrained environment.
Each category is given a score between 0 and 100, which is a weighted metric of several individual metrics (including Speed Index). The higher your score is, the better your web page performs – resulting in a better search engine ranking. Each of the composite metrics contributes a different amount to the overall score; in other words, not all metrics are equally important. Speed Index currently holds a weight of 10% on the overall Lighthouse score, making it one of the lower-importance metrics.
Lighthouse is always evolving and running on different versions. The weight of each metric can change during these updates, so it’s always beneficial to know what version of Lighthouse you’re using.
Your Lighthouse report can pinpoint your page’s weaknesses that are hurting its user experience. Improving these can improve your ranking on SERPs and overall traffic to your website.
Lighthouse then gives you suggestions for improvement, but these suggestions are often not useful.
What is the Speed Index?
The Speed Index is how long it takes to draw the majority of the above the fold content for a given web page. The Speed Index score for that page (in seconds) is the timestamp from page load when most of the initially visible content has been rendered in its final location..
Since content must be in its final location on the page, other factors like Cumulative Layout Shift, also heavily impact this score.
Measuring Speed Index
Speed Index is measured slightly differently than most metrics, as it uses the majority of the loading time of a visible area of the web page rather than just one particular action.
The method is actually fairly complicated and uses the speedline package by Paul Irish internally.
The Speed Index measures how long it takes for the page to get from its first state (the blank page) to its final state (the rendered visual page) to draw the majority of the visual content. Other components of the screen loading in the background will still affect the Speed Index, which is why you need to load the assets seen in the viewport first.
Above is a loading example from TechCrunch – you can see the page renders multiple times during load causing most of the elements to repeatedly shift position. The Speed Index is the time when the final frame renders since the previous frames caused a redraw of the visible parts.
The Speed Index is centered around usability as it only measures the loading time of the web page that is visible to the user. This is similar to how the user will gauge the loading speed as well.
Score Benchmarks Of Speed Index
Once the Speed Index metric has been calculated in seconds, Lighthouse will then compare it to several other websites from the HTTP Archive. Here is what a typical Speed Index measurement means:
| Loading Speed | Color Coded Rating | Speed Index Score |
| 0 to 4.3 seconds | Green – Fast | Between 90 and 100 |
| 4.4 to 5.8 seconds | Amber – Moderate | Between 50 and 90 |
| 5.9 seconds and over | Red – Slow | Between 49 and 0 |
In Lighthouse v6 and 7, Speed Index had a weight of 15%; however, now in v8 and 9, it only holds 10% weight in your overall score.
Improving Your Speed Index
So how can you improve it? First, improve other metrics that have an overall greater contribution to the score and your SI will likely improve as well.
When looking at your Lighthouse audit, there are suggestions under the diagnostics section that are fairly generic and apply to most metrics:
- Minimize main-thread work.
- Ensure text remains visible during web-font loading.
- Reduce Javascript execution.
Some of these are more doable in practice than others.
1. Minimizing Main-Thread Work
Within the rendering process, there is a single main thread that renders the page based on the HTML, CSS and Javascript. There are many techniques available for offloading this thread but performance bottlenecks are most often due to overloading the main thread.
Make sure the main thread renders the above the fold content first. Oftentimes, render-blocking resources cause the main thread to do things that don’t affect the initially-visible content.
For instance, JS files that set up event listeners don’t need to be downloaded or executed until after the visible content is drawn. To prioritize the HTML and CSS first, the most effective thing to do is remove any Javascript tasks that you don’t need. You can accomplish this by using the async and defer tags on JS files whenever possible, or loading all JS at the end of the page after most of the DOM has already been parsed.
Another important consideration is the CSS. With frameworks and themes, modern pages tend to load a *lot* of CSS – most of which is unused on any given page. Many people advocate inlining the CSS used above the fold and then asynchronously loading the remaining CSS afterwards.
We’ve found that the amount of above the fold CSS is usually not much less than the entire CSS used by the page, so just inlining all used page CSS is actually better. This approach saves a render cycle when the final CSS is loaded, as well as precious network bandwidth.
2. Don’t Show Any Invisible Text
How can you show invisible text? What we mean by this option is do not wait for the fonts to load on the page. Fonts have one of the biggest impacts on page load speed, particularly on mobile.
The suggested best practice to avoid this issue is to add ‘font-display: swap;’ into your CSS. This will swap out fonts once they are downloaded, cutting back on loading time and improving your Speed Index. Keep in mind, however, that this will likely affect the Cumulative Layout Shift (CLS), another important metric that will affect your page’s usability.
We suggest – if at all possible – to use the ‘optional’ font-display option. ‘Optional’ prevents fonts from causing a layout shift when they finish downloading. Layout shifts heavily impact your SI (and, of course, Cumulative Layout Shift). Users will see system fonts unless they are cached in the browser, which is often acceptable on content pages like blog articles. When the user (hopefully) navigates to another page on your site, the font file(s) will already be cached and displayed as designed.
3. Reduce Javascript Execution Time
Lighthouse often suggests cutting down the amount of Javascript on your page as a way to improve almost all metrics including Speed Index (SI). In practice, this is often not feasible. What are you going to do, not use Google Analytics? If you’re using a page builder, you may not even have the option as the majority of the Javascript is injected automatically.
There are a few things that you can do:
- Minify your Javascript files – This makes them as small as possible for downloading.
- Make sure you use a transfer encoding like gzip or Brotli – Text compresses really well so you save a lot of bandwidth.
- Use correct cache settings – Often the javascript files are the same for all pages on your site. Correct caching ensures your users don’t have to re-download the same files. A CDN is a great way to accomplish this.
- Use ‘async’ whenever possible. The async option means that the Javascript files are no longer render blocking. Note that care must be taken to ensure that the JS functions correctly using this option since it can execute at any time. Poorly-coded JS often doesn’t account for the corner cases that can arise using ‘async’.
- Don’t use Javascript to draw content and never, ever use document.write(). Javascript should be used to add functionality to the page when a user takes an action, not to do things like animation. CSS is a far better option for page animation.
A common example of what NOT to do, is using a page slider, especially above the fold. Sliders are not only bad UI, but they can seriously impact the Speed Index score.
The Importance Of Improving Your Speed Index
Have you ever searched for an answer to a question, only to find yourself on a slow loading web page? Did you stick it out and wait for the page to load, or did you exit it and find another, quicker loading page?
If you have ever done the latter, then you are part of the reason why the Speed Index rating is so important. We are getting less and less patient with slow loading pages – and with so many search engine results at our disposal, why would we wait around for one to finish loading?
A slow loading speed is going to increase your bounce rates and therefore negatively impact your traffic and repeat viewers.
Search engines also consider many metrics when determining your rating for their SERPs, and if your Lighthouse report is showing a lower score, you’re likely to be ranked further down the results page. So, optimizing your Lighthouse report will enhance your SEO as well.
NOTE: Speed Index is web vital but not a core web vital. This means that search engines – particularly Google – likely aren’t using Speed Index directly, but instead are focusing on the core metrics that Speed Index contributes to.
Summary
While not the first metric to focus on, Speed Index is a good indicator of how fast the content within the viewport loads. This user-centric metric shows you how quickly the content that the user can see immediately loads, rather than the content that needs to be scrolled to.
To improve your Speed Index, utilize the content of your web page so that only the most important pieces are being loaded first, remove any unnecessary code, optimize your Javascript, and avoid any invisible text. Easy, right?
Mailing Address