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 are Lab and Field metrics?
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.
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.
As a rule of thumb derived from Google's data, a page Speed Index of:
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.
While both Speed Index and Page Load Time pertain to website loading speed, they have distinct differences.
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.
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!
Improvements include (and are not limited to):
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.
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:
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:
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?
Lora has 7+ years of experience developing in-depth, specialized content for SaaS companies in the CEE region. She has sourced and collaborated with subject-matter experts on site speed optimization for WordPress, Core Web Vitals, and the future of web performance. "If you can't explain it to a 7-year-old, you've not researched it well enough" is Lora's guiding principle when publishing professional insight for complex technical topics.