Speed Index

What Is Speed Index?

Speed index is a metric that measures how quickly a webpage’s visual content displays while the webpage is loading. The lower the score, the faster the page speed, and the better the user experience. 

For example, the image below evaluates the speed index of two webpages. The slow webpage loaded 30% of its content in 2 seconds, while the fast page loaded its entire content within 2 seconds.

Since the fast page displays visual content sooner, it gets a lower and better speed index score.

The speed index is evaluated by analyzing a page’s visual progress as it loads and determining how quickly visible content appears in the viewport. However, it prioritizes important content that appears earlier in the page load process. 

This means a site will have a good speed index score if it loads vital above the fold content, such as the h1 header tag and hero image, early enough, even if it loads other content, such as ads or below the fold images, later. 

Is Speed Index a Ranking Factor?

Speed index is not a ranking factor, and it is used to assess other page speed metrics such as the first contentful paint (FCP) and the largest contentful paint (LCP).

Importance of the Speed Index

The speed index is an important metric because it measures how quickly the visible content of a webpage loads. This makes it helpful for evaluating how visitors perceive the page load speed. 

For instance, the largest contentful paint evaluates the time it takes for the largest element on the webpage to load, while the first contentful paint evaluates the time it takes for the first element on the page to load. 

In contrast, the speed index does not evaluate when a specific element loads. Instead, it measures how quickly visual content appears on the screen as the page loads.

Overall, the speed index is ideal for evaluating general page load performance rather than individual elements. A shorter speed index means users see meaningful content sooner, which reduces frustration and improves engagement, conversion rates, and overall user experience. 

How to Measure Your Speed Index

You can measure your speed index using Google’s PageSpeed Insights tool. The tool will display your speed index score and provide suggestions to help you improve it. 

To get started, head to the PageSpeed Insights tool and enter the URL you want to inspect into the available field. Once done, click Analyze. 

Next, scroll to the Performance field. You will find the speed index, as shown below. Note that this speed index is for the mobile version of the URL, and is color-coded, depending on the score:

• Green: 0 – 3.4 seconds (Your site is fast) 
• Orange: 3.4 – 5.8 seconds (Your speed is moderate)
• Red: 5.8 seconds and above (Your speed is poor and needs improvement)

You can click Desktop to check the speed index for the desktop version of the URL. This score is also color-coded:

• Green: 0 – 1.3 seconds (Your site is fast) 
• Orange: 1.3 – 2.3 seconds (Your speed is moderate)
• Red: 2.3 seconds and above (Your speed is poor and needs improvement)

Note that PageSpeed Insights reports the speed index using the Lighthouse web auditing tool. Lighthouse does not evaluate the speed index in real time. So, it does not indicate the speed index for real-time users. 

Instead, it evaluates the speed index using a simulated page load in a controlled environment. The device and system used for the evaluation are displayed below the speed index. You can hover over it to uncover additional information about it. 

How to Improve Your Speed Index

The speed index is closely related to other page load metrics, such as the first contentful paint (FCP) and largest contentful paint (LCP). These metrics have a greater impact on your page experience, and improving them typically improves your speed index. 

So, it is better to focus on improving them alongside other page speed and experience metrics rather than explicitly focusing on the speed index itself. 

1 Use a Fallback Font

Review the Performance field of the PageSpeed Insights tool for the issue: “Ensure text remains visible while the font loads.” If it exists, then you should fix it as a priority. 

This issue indicates that your page displays blank text while the external fonts are loading. This is known as a “flash of invisible text” (FOIT) and occurs when you do not specify a backup font for the page to use while the desired font loads. 

You can easily fix this by adding font-display: swap; to the custom font’s @font-face rule in your CSS code. This allows the browser to use a fallback font until the desired font is loaded. 

2 Optimize Your JavaScript Code

JavaScript can block your main thread, which can prevent the browser from rendering content or responding to user input, such as screen taps, mouse clicks, and keyboard clicks. This can have a serious effect on your first contentful paint, largest contentful paint, and speed index. 

To get started, review the insights and diagnostics field of the PageSpeed Insights tool for these issues and fix them as a priority:

• Reduce JavaScript execution time
• Minimize main-thread work 

You can resolve these issues by optimizing your JavaScript code:

• Remove unnecessary JavaScript code
• Break large JavaScript files into smaller ones
• Defer the execution of non-critical JavaScript code

You should defer the execution of non-critical JavaScript code using dynamic imports import() or the defer ou asynchrone HTML attributes. This delays the execution of the code until later in the page load process.

Overall, you should aim to keep main thread tasks below 50 milliseconds whenever possible.

3 Improve Your First and Largest Contentful Paint

The speed index is closely related to other page load metrics, such as the first contentful paint (FCP) and largest contentful paint (LCP). These metrics have more impact on your page experience and improving them will typically improve your speed index. 

To get started, return to the Performance section of the PageSpeed Insights report. It includes some actionable actions you can take to improve your page speed metrics. 

These actions are listed in the Insights and Diagnostic fields, sometimes alongside the potential time saved. 

Cliquez sur FCP et LCP to exclusively focus on insights and diagnostics exclusive to the first contentful paint and largest contentful paint. 

Ensure you review these insights and diagnostics, prioritizing those that offer the most time savings, as they will have a greater impact on your page speed.