{"id":4154866,"date":"2022-03-10T09:24:32","date_gmt":"2022-03-10T08:24:32","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=lp_resources&p=4154866"},"modified":"2022-12-27T13:01:57","modified_gmt":"2022-12-27T12:01:57","slug":"improve-speed-index","status":"publish","type":"lp_resources","link":"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-speed-index\/","title":{"rendered":"How to Improve Speed Index (SI) on WordPress"},"content":{"rendered":"

Do you know how many seconds it takes for your website to load onto your visitor\u2019s screen? The answer points toward the Speed Index (SI), a performance metric impacted by anything that deals with above-the-fold.<\/p>

The Speed Index (SI) contributes to your overall performance score on the Lighthouse report. Maintaining a good Speed Index leads to a great user experience: it means that the content located in the viewport is delivered quickly. <\/p>

To improve your performance score, there are six metrics to optimize, and the Speed Index holds up 10% of this global grade computed by Lighthouse. <\/p>

What is a good<\/em> Speed Index? How to measure it? Which tools are the most reliable? It can be overwhelming to run a performance audit for your website! <\/p>

Follow our step-by-step guide to control your Speed Index KPI and conduct an effective performance optimization process. We will explain the Speed Index metric in detail, the free tools you can use to measure your performance, and some technical tips to apply to get a good Speed Index grade (under 3,4 s).<\/p>

What\u2019s Speed Index in Lighthouse?<\/h2>

Speed Index is a Lighthouse performance metric that shows how quickly the content of a page is loaded and visible for the user. <\/p>

The Speed \u200b\u200bIndex indicates the loading time of the visible part above the fold of a web page (in the viewport). It measures the entire loading process of what users see before scrolling. <\/p>

In fact, Lighthouse takes a video of the loading process and calculates the difference between all the frames. Then, Lighthouse uses the Speedline Node.JS module to compute the final SI score. (You can find more information on this module on Github<\/a>).<\/p>

The Speed Index is the result of a calculation: it\u2019s the average rendering speed of a web page and its visual progress, also called visual completion<\/strong>. <\/p>

It\u2019s a meaningful lab metric for measuring loading time that directly affects how users perceive a website\u2019s performance<\/strong>. <\/p>

Let\u2019s illustrate this visual completion with two scenarios: page A is optimized, while page B is not: <\/p>

\"Explaining
Explaining SI and the visual completion- Source: fasterize<\/a><\/figcaption><\/figure>
\ud83d\udcd6 <\/strong>A low Speed Index score means that your page renders the visible content pretty fast, giving your visitors the perception of a faster loading page.

\ud83d\udcd6 <\/strong>SI metric is user-centric: it tracks visual progression.<\/td><\/tr><\/tbody><\/table><\/figure>

What\u2019s the Impact of Speed Index on Performance?<\/h2>

Speed Index is a load performance metric that shows how quickly elements of a page become visible in the viewport. How fast does your website seem to your visitors? <\/strong>That\u2019s exactly the question you\u2019re trying to answer when measuring your web performance! <\/p>

Speed Index is represented on the image below, almost at the end of the visual completion process: <\/p>

\"Explaining
Explaining the Loading Process \u2013 Source: <\/em>dev.to<\/em><\/a> <\/figcaption><\/figure>

Now, let\u2019s see how the Speed Index compares to the 5 other KPIs measured by Lighthouse.<\/p>

Speed Index Weight on the Lighthouse Score<\/h3>

In the Lighthouse v8 Performance score, SI\u2019s weight has been reduced from 15% to 10%. <\/p>

\"Lighthouse
Lighthouse Scoring Calculator v8 (Including SI)  \u2013 Web.dev<\/a><\/figcaption><\/figure>

How is the Speed Index Calculated by Lighthouse? <\/h3>

Web.Dev explains that your Speed Index score is a \u201ccomparison of your page\u2019s speed index and the speed indices of real websites\u201d<\/a>.<\/p>

The V8 Lighthouse version computes six metrics to generate your final performance score. It includes the Core Web Vitals<\/a>, the Total Time to Interactive, the Total Blocking Time, and finally, the Speed Index<\/strong>:<\/p>

KPI<\/strong><\/td>Weight<\/strong><\/td>What\u2019s a good score? (green zone)<\/strong><\/td><\/tr>
First Contentful Paint<\/a><\/td>10%<\/td>0-2 s<\/td><\/tr>
Speed Index <\/strong><\/td>10%<\/strong><\/td>0-3,4 s<\/strong><\/td><\/tr>
Largest Contentful Paint<\/a><\/td>25%<\/td>0-2,5 s<\/td><\/tr>
Time to Interactive<\/a><\/td>10%<\/td>0-3,8 s <\/td><\/tr>
Total Blocking Time<\/a><\/td>30%<\/td>< 200 ms<\/td><\/tr>
Cumulative Layout Shift<\/a><\/td>15%<\/td>0 \u2013 0,1<\/td><\/tr><\/tbody><\/table><\/figure>

Speed Index is an important lab metric because it defines whether your page is perceived as fast or slow. <\/strong><\/p>

\ud83d\udcd6  <\/strong>Speed Index Formula: Interval time * (1 \u2013 visual completeness \/ 100)<\/td><\/tr><\/tbody><\/table><\/figure>

Before we give you some technical recommendations to improve your Speed Index if needed, we should determine what is a good SI score according to Lighthouse. <\/p>

And that leads us into the next section: the Speed Index threshold.  <\/p>

What\u2019s a Good Speed Index Score?<\/h3>

A good Speed Index score should be under 3,4 seconds. <\/p>

\"SI
SI thresholds \u2013 Source: Web.dev<\/figcaption><\/figure><\/div>

Speed Index vs First Contentful Paint <\/h3>

If you are familiar with the recent Core Web Vitals update, the Speed Index metric may look similar to the First Contentful Paint (FCP) KPI.  Let me explain the main difference and why both metrics are important. <\/p>

First Contentful Paint is also a visual metric that measures the time until the browser first<\/strong> renders any content. Speed Index describes the rate at which the full content appears above the fold<\/strong>. <\/p>

\"FCP
FCP vs SI KPIs \u2013 Source: Fasterize<\/a><\/figcaption><\/figure>

So whatever speeds up your FCP will improve your Speed Index metric (and it\u2019s better for a user to see something instead of the scary white screen.)<\/p>

Speed Index vs Cumulative Layout Shift<\/h3>

Whatever stabilizes the content above the fold, and improves interactivity will also help maintain a good Speed Index. To measure the visual stability, Google uses the Cumulative Layout Shift (CLS)<\/a> from the Page Experience signals. CLS measures the sudden changes on a page that are unwanted by a user such as pop-ups or intrusive ads that ruin the user experience:<\/p>

\"Illustrating
Illustrating CLS \u2013 Source: lonely<\/a><\/figcaption><\/figure>

Therefore, a good CLS score means good visual stability and can affect your SI positively. <\/p>

Maintaining a good SI is great for performance but also for marketing. Let\u2019s see how. <\/p>

Four Marketing Benefits to Keep a Great Speed Index <\/h3>

1. Lower your bounce rate<\/h4>

Well, imagine that you are trying to access a website, but instead of seeing any content right away, you are staring at a blank screen. What do you do? You leave. <\/p>

This scenario (that we all want to avoid) is called \u201ca bounce\u201d. Someone visits your website and leaves immediately without interacting further with your site. <\/p>

\ud83d\udcd6  <\/strong>Maintaining a good FCP and SI score will significantly reduce your bounce rate because the user will perceive your website as a fast one. <\/td><\/tr><\/tbody><\/table><\/figure>

2. Increase your \u201ctime to spend on page\u201d KPI<\/h4>

If you lower your Speed Index, then the users visiting your site will be willing to stay more on your site and visit more pages. <\/p>

3. Increase conversion rates <\/h4>

When a user spends time on your site thanks to a good speed, you have another benefit: they are more likely to buy. You are answering their needs: find the answer or the product they want as quickly as possible. <\/p>

4. Boost your SEO<\/h4>

If your visitors enjoy the experience of being on your website, Google will like it too and will reward you with a better position in the search engine results. <\/p>

How to Measure Speed Index<\/h2>

Lighthouse is an open-source tool that helps developers to measure Speed Index and other performance metrics. The automated tool creates in-depth reports about speed, performance, accessibility, UX, and SEO. <\/p>

\ud83d\ude80 <\/strong>Do you need help to measure your SI and to perform your website\u2019s audit? Follow our complete guide that explains how to improve your Lighthouse performance score on WordPress<\/a>. <\/td><\/tr><\/tbody><\/table><\/figure>

Which Tools to Measure Speed Index?<\/h3>

To measure Speed Index and your overall performance score, you can use Google PageSpeed Insights and GTmetrix, two popular tools powered by the Lighthouse technology. <\/p>