SiteVitals

Speed Index

Two pages can finish loading at the same moment and still feel completely different. Speed Index captures that difference: how early the screen fills in, not just when it is finished.

Thresholds measured at the 75th percentile of page loads, per Google’s web.dev guidance.

How Speed Index is calculated

Lighthouse captures frames during the load (the filmstrip in our results) and scores each one by how close it looks to the final page. Plot visual completeness over time, and Speed Index is the area above that curve: the amount of time-weighted “unfinished screen” the visitor looked at.

Shape the loading curve

0 s5 s (fully loaded)100% visible

Speed Index: 1.88 s → Good (mobile scale)

The magenta area is the time the screen spent incomplete. Speed Index is that area in milliseconds, so painting most of the page early shrinks it even when the last pixel arrives at the same time.

How to improve Speed Index

  • Everything that helps FCP helps here: earlier first paint shifts the whole curve left.
  • Render the above-the-fold content in the HTML rather than building it with JavaScript afterwards.
  • Give images their dimensions so the layout is complete early even while pixels stream in.
  • Avoid entrance animations and auto-rotating carousels above the fold. The video keeps changing, so the page never looks “complete”.

Questions people ask

What is Speed Index?

Speed Index measures how quickly the visible part of a page fills in during load. Lighthouse records a video of the load, computes how visually complete each frame is, and adds up the time the page spent incomplete.

What is a good Speed Index?

In Lighthouse’s mobile scoring, 3.4 seconds scores 90 and 5.8 seconds scores 50. On desktop, 1.3 seconds scores 90.

Why is my Speed Index high when LCP is fine?

Usually because the page paints its content in several late steps, such as web fonts swapping, carousels building, or content rendered by JavaScript after load, or because an animated element keeps changing the frames.