What Is Speed Index? The Metric That Measures the Whole Filling, Not One Moment

  • vuetelemetry
  • Guides
  • 7 min read

Speed Index is the only one of the five Lighthouse performance metrics that measures a curve rather than an instant. That is why a page can post a good LCP and still score badly here, and why the fix is different.

Every other headline loading metric names a moment. First Contentful Paint is the instant something first appears. Largest Contentful Paint is the instant the biggest element lands. Speed Index is not a moment at all: it measures how quickly the visible part of the page fills in over the whole load.

That difference is the reason it exists, and it is also why it is the metric people find hardest to place.

How Lighthouse actually measures it

A large canvas laid flat on the floor, a long-handled brush spreading dark red paint across it, open paint tins beside it and a person in white trousers and white trainers standing at the edge. The canvas fills in gradually, which is exactly what Speed Index measures: not the moment something appears, but how the surface fills over time.
A large canvas laid flat on the floor, a long-handled brush spreading dark red paint across it, open paint tins beside it and a person in white trousers and white trainers standing at the edge. The canvas fills in gradually, which is exactly what Speed Index measures: not the moment something appears, but how the surface fills over time.

Lighthouse computes it by recording a video of the page loading, then comparing successive frames to work out how visually complete the page is at each point in time. The calculation is done by the Speedline Node module, and the approach is inherited from the original Speed Index introduced by WebPageTest.

Because it integrates over the whole load, a lower number means the page reached visual completeness sooner **on average**, not that any single element arrived faster.

Two pages can finish at the same instant and score very differently. One draws its content progressively, so the surface is largely filled early. The other holds a blank screen and then paints everything in one late block. Same finish line, very different Speed Index, and a genuinely different experience for whoever is watching.

What counts as good, and what it weighs

It carries **10 percent** of the Lighthouse performance score, the same weight as [First Contentful Paint](/articles/what-is-first-contentful-paint-fcp) and a third of what [Total Blocking Time](/articles/what-is-total-blocking-time) carries. The published thresholds differ by device profile, which is why the same page scores differently on mobile and desktop:

  • Mobile: 0 to 3.4 s fast, 3.4 to 5.8 s moderate, over 5.8 s slow
  • Desktop: 0 to 1.3 s fast, 1.3 to 2.3 s moderate, over 2.3 s slow
  • Weight in the Lighthouse performance score: 10 percent

It is not a Core Web Vital

One thing worth stating plainly: **Speed Index is not a Core Web Vital**. It is one of the five metrics in the Lighthouse performance section, and it does not feed the Core Web Vitals assessment that Google reports from field data. If your goal is the Core Web Vitals pass, this is not the number to chase; if your goal is the Lighthouse score or the perceived speed of the load, it is.

That distinction matters because effort spent here shows up in one place and not the other. Our note on [improving Core Web Vitals](/articles/improve-core-web-vitals) covers the field-data side.

Good LCP, bad Speed Index: the usual shape

When Speed Index is bad while [LCP](/articles/what-is-largest-contentful-paint-lcp) looks acceptable, the usual cause is a load that reveals nothing until late. Render-blocking resources in the head, fonts that hide text until they arrive, and content that waits on a client-side fetch all produce the same shape: a blank canvas for most of the load, then everything at once.

The fixes follow from that shape rather than from the metric name. Serve something meaningful in the first response instead of an empty shell, let text render in a fallback font while the web font loads, and move whatever is not needed for the first view out of the critical path. Each of those raises visual completeness earlier in the curve, which is precisely what the measurement rewards.

The fixes follow from that shape rather than from the metric name. Serve something meaningful in the first response instead of an empty shell, let text render in a fallback font while the web font loads, and move whatever is not needed for the first view out of the critical path. Each of those raises visual completeness earlier in the curve, which is precisely what the measurement rewards.

- vuetelemetry

The lab caveat

The honest caveat is the one that applies to every lab metric. This is a scripted load on simulated hardware, and it can differ from what your visitors experience on their own devices and connections. Treat it as a repeatable signal about the shape of your load, not as a report of what real users saw. You can see how the number turns into points with our [Lighthouse score calculator](/lighthouse-score-calculator).

FAQ

What is Speed Index?

It measures how quickly content is visually displayed during page load. Unlike First Contentful Paint or Largest Contentful Paint, which each name a single instant, Speed Index describes the whole filling of the visible area over time. A lower value means the page looked complete sooner on average across the load.

How does Lighthouse calculate Speed Index?

Lighthouse records a video of the page loading and compares successive frames to establish how visually complete the page is at each point. The computation is performed by the Speedline Node module, and the method is inherited from the original Speed Index introduced by WebPageTest.

What is a good Speed Index?

On the mobile profile, under 3.4 seconds is rated fast, 3.4 to 5.8 seconds moderate, and above 5.8 seconds slow. On desktop the bands are tighter: under 1.3 seconds fast, 1.3 to 2.3 seconds moderate, above 2.3 seconds slow. The same page can therefore sit in different bands depending on the profile used.

Is Speed Index a Core Web Vital?

No. It is one of the five metrics in the Lighthouse performance section and carries 10 percent of that score, but it is not part of the Core Web Vitals assessment Google reports from field data. Work on it improves the Lighthouse score and the perceived smoothness of the load, not the Core Web Vitals verdict.

Why is my Speed Index bad when my LCP is fine?

Because they measure different things. LCP records the instant the largest element arrives, which can be acceptable even if the screen stayed blank until just before. Speed Index penalises exactly that shape, since it averages visual completeness across the whole load. A page that fills progressively beats one that appears all at once, even when both finish together.

Related stack