What is Lighthouse Speed Index (SI) And How to Reduce It

Gone are the days when a single page speed metric could tell you how fast your website really is.

Today, site owners have a rich set of performance scores to analyze and understand what happens when visitors land on their websites. Nestled among other Lighthouse metrics, a low page Speed Index (SI) might go unnoticed but is still worth your attention.

What exactly does SI measure, though? What priority should you give the Speed Index in your optimization strategy, and how do you improve it?

Read on to find out.

 

What is Page Speed Index (SI)?

Page Speed Index (SI) is a performance metric from the Lighthouse report (also known as a lab metric) used by website testing tools such as Google PageSpeed Insights and GTmetrix.

What are Lab and Field metrics? Lab metrics (sourced in Lighthouse) are measurements taken in a controlled environment to test a website's performance. This environment replicates specific conditions, allowing for consistent testing. They are useful for identifying performance bottlenecks and for debugging issues. Field metrics (sourced in CrUX), often referred to as Real User Monitoring (RUM), capture real-world user experience data. They are collected from actual users interacting with your website or web application in diverse conditions.

Upon expanding the Performance section in Google PSI, we find that SI evaluates the speed at which the above-the-fold content of a webpage is visibly generated.

How is Page Speed Index (SI) Calculated?

SI is different from other performance metrics in the sense that it doesn’t mark a specific time in the page loading process (like First Contentful Paint (FCP) or Largest Contentful Paint (LCP), for example).

The page Speed Index, instead, is calculated with the help of a screen capture of the page loading in the browser. Depending on the viewport, Lighthouse then analyzes the visual completeness between each frame and uses the Speedline Node.js module to generate the final Speed Index score.

Put simply, SI provides a quick assessment of where your webpage stands in terms of visible load time.

Note: Speedline is the newer version of the original speed index introduced by WebpageTest.org in 2012 and is based on the same principles.
 

What is a Good Speed Index?

As a rule of thumb derived from Google's data, a page Speed Index of: 

• 0-3.4 s is considered fast

• 3.4–5.8 s is moderate

• anything over 5.8 s is evaluated as slow

Striking below the 3.4 s mark is often the goal, ensuring users perceive your page as quick and efficient.

A “slow” Speed Index score indicates that above-the-fold content is loaded much later, giving your site visitors the impression of a slower loading time.
 

Speed Index vs Page Load: Understanding the Difference

While both Speed Index and Page Load Time pertain to website loading speed, they have distinct differences.

• Speed Index calculates the visual completeness of above-the-fold content from the user’s perspective;

• Page Load Time measures the total time taken for a webpage to load completely, including all elements like images, CSS, and scripts.

 

Why is a Low Page Speed Index Important for Your Website?

A Page Speed Index score above 5.8 s indicates initial loading experience on your website is rather slow. On its own, however, SI doesn’t provide enough actionable information to determine a specific culprit you need to address.

Instead, think of SI as a collective metric that is impacted by other metrics that measure the page loading process, like LCP and FCP.

The lower your SI score is, the higher the chance is your site’s loading is free of unnecessary clutter. For your site visitors, this would mean a fast page load that allows them to start engaging with your website as early as possible.

According to a recent in-house study of over 180K+ websites, NitroPack found that visitors lose patience and abandon a website at 2.75 s.

Additionally, Google incorporates page speed, including SI, as a ranking factor in its search engine algorithm. Therefore, a low SI not only enhances user experience and reduces high exit rates but also plays a key role in SEO, potentially driving more organic traffic to your site.
 

4 Effective Strategies to Optimize Your Page Speed Index

Due to the collective nature of this metric, focusing solely on your Speed Index score won’t yield the best results. Instead, focus on improving your overall Performance score and a great place to start is the Opportunities and Diagnostics sections in your Google PSI report:

Note: That’s not to say, however, that taking your site’s Speed Index isn’t a great way to benchmark how your optimization efforts are going. Because it’s generated in a controlled environment, it’s great for troubleshooting and debugging purposes, especially when there’s no Core Web Vitals data available.

As mentioned earlier, your Speed Index score is influenced by any number of improvements as long as they prioritize the initial rendering of content and the largest above-the-fold element's appearance.

The core idea is to maximize the time the main thread is free. It is essentially the heart of a browser's operations. By minimizing its workload, the browser can expediently load all visible content, achieving faster visual completeness.

Let’s see how below!

1. Reduce JavaScript Execution Time

The main goal here is to optimize your JavaScript code so that it runs more efficiently and takes less time to execute. For your visitors, this would mean a significant decrease in delays and page unresponsiveness.

Improvements include (and are not limited to):

• Removing any redundant or unnecessary code
• Combining similar functions
• Refactoring loops by using forEach or map instead of traditional for loops where appropriate
• Minifying your JS files, making them smaller and faster to download and execute
• Implementing async or defer attributes to your script tags so they are downloaded in the background without blocking the page 
• Removing any unused libraries or plugins and finding light-weight alternatives to current libraries
• Breaking your JS into smaller chunks that can be loaded on demand
• Enabling browser caching to avoid redownloading JS files on repeat visits

Minify, defer and cache all JavaScript files automatically with NitroPack →

2. Minimize Main-thread Work

Think of the main thread as the to-do list of your browser. The shorter the list, the faster it can render your website a smooth, responsive experience for visitors.

A hefty chunk of offloading the main thread is done once you optimize your JavaScript, as shown above. Other techniques include:

• Removing unused JS by only loading the JavaScript necessary for the initial view (above the fold)

• Avoiding forced synchronous layouts by batching style changes and layout reads so they aren't done close together
• Using the contain property for your CSS to limit the area that needs re-layouting or repainting.
• Moving non-UI tasks (like data processing or complex calculations) to a Web Worker, which runs in a separate thread instead of the main one
• Choosing CSS animations over JavaScript-based ones
• Using the transform and opacity properties for animations, as they're optimized by the browser's compositor thread and don't burden the main thread.
• Ensuring images are appropriately sized and lazy loading the ones that fall below the fold
   

3. Reduce the Impact of Third-party Code

All websites use third-party scripts. These can include tracking scripts, advertisements, embedded widgets, and more.

As such, third-party code may be large, not optimized, or could be blocking the main thread, causing delays in rendering and interactivity. Not to mention some scripts can introduce vulnerabilities to your website or even malfunction.

Here’s how you can optimize them:

• Assess which third-party scripts are critical and asynchronously load the rest (so they don’t block the main thread)
• Alternatively, you can use defer and delay techniques for the non-essential scripts
• Check if some third-party resources can be hosted on your own servers locally (but sparingly)
• Consider removing scripts that are no longer needed completely
• Use Content Delivery Networks (CDNs) to speed up the delivery of scripts by serving them from a location near the user

 

4. Ensure Text Remains Visible During Webfont Load

To avoid Flash of Invisible Text (FOIT) and improve content accessibility even when you’re using custom fonts on your website, you need to manipulate how your font files are downloaded.

Consider a combination of the optimization techniques below, depending on your case:

• Use font-display: swap or font-display: optional to ensure text remains visible during font loading
• Subset fonts to only include the characters you need in the initial load, making the font file smaller and faster to load.
• Preload web fonts that are critical for your design
• Reduce the size of your font files by only including the weights and styles you need
• Cache your web fonts so return visitors won't need to download them again
• Host fonts locally for better control and reduced external requests
• Or if all of the above seems too daunting – consider opting for system fonts that load instantly or a combination of system fonts and web fonts

 

Improving Your Page Speed with NitroPack

Remember all the red warnings in the Google PSI report from before?

Ideally, you want this list as short as possible.

Realistically, though, without advanced coding skills or the help of a professional developer, you might hit a brick wall. So what’s next?

A classic scenario is to try several plugins for caching, image optimization, lazy loading, and code compression. You might even go a step further and pay for a CDN service.

The result? Tech stack bloat, plugin clashes, and an even longer warning list.

To save yourself some headaches (and money), consider opting for a complete optimization service like NitroPack. Packed into a lightweight plugin, you can leverage 35+ advanced features that optimize all your website resources on autopilot.

Now you want to see the list, right?

Set up NitroPack in 3 minutes and speed up your website automatically →