Speed Index: what it measures, how it is calculated and how to improve it

What is Speed Index?

Speed Index measures how quickly the visible content of a page is displayed during load. Instead of marking a single moment, it looks at the whole loading sequence frame by frame and scores how much of the viewport was still incomplete over time. Lower is better: a page that shows most of its content early gets a low Speed Index even if the last pixels arrive late.

It was introduced by WebPageTest in 2012 and is one of the metrics in a Lighthouse performance audit. It is a lab metric: it needs a controlled recording of the page loading, so it is not collected from real visitors.

How Speed Index is calculated

The tool records the page loading as video frames and computes visual completeness of each frame (how close it looks to the final screen). Speed Index is the area above the visual completeness curve:

Speed Index = ∫ (1 − visual completeness(t)) dt

Worked example: same finish, different Speed Index

Two pages both finish rendering at 3.0 seconds (sample frames):

Page A: 1.5 s × 100% incomplete + 0.5 s × 40% + 1.0 s × 20% = 1,500 + 200 + 200 = 1,900 ms. Page B: 1.0 s × 100% + 2.0 s × 10% = 1,000 + 200 = 1,200 ms.

Both are "fully loaded" at the same time, but visitors to page B see nearly everything a second earlier. Speed Index captures that difference; "load time" does not.

Speed Index thresholds

Lighthouse scores Speed Index on mobile roughly as follows:

In Lighthouse 10 and later, Speed Index contributes 10% of the performance score; largest contentful paint, total blocking time and cumulative layout shift carry more weight.

Speed Index vs related metrics

Speed Index is useful for comparing builds and spotting regressions in a synthetic monitoring setup. For how real visitors experience the page, rely on field metrics such as LCP.

How to improve Speed Index

1. Render above-the-fold content first: inline critical CSS, defer non-critical CSS and JavaScript.
2. Avoid render-blocking resources in the head.
3. Show text quickly: use font-display: swap or optional so fonts do not hide text.
4. Prioritize the hero image with fetchpriority="high" and correct sizing; lazy-load images below the fold.
5. Avoid content that appears late and shifts things, such as late-injected banners.
6. Speed up the server response so rendering can start sooner.

In TapCub

Speed Index requires a video recording of the load, so TapCub, which measures real visits, does not report it. Its performance report gives the field metrics that describe the same experience for actual users: first contentful paint, largest contentful paint, layout shift, interaction latency and time to first byte, at P75, P95, median or average. Use Lighthouse or another synthetic tool for Speed Index in development, and TapCub to check that improvements show up for visitors. See good page load time and real user monitoring.

Sources

• Chrome for Developers. Speed Index (Lighthouse).
• Chrome for Developers. Lighthouse performance scoring.
• MDN Web Docs. Speed index.