Speed Index is a Lighthouse performance metric that measures how quickly the visible content of a page fills in while it loads. It is reported in seconds, and a lower number means more of the page appeared sooner.
How Speed Index works
During a test, Lighthouse records the page loading as a series of frames and compares each frame with the finished page. It then works out how visually complete the screen was at each point and combines those figures into one number. Two pages that both finish at four seconds can have very different Speed Index scores: one that shows the header, headline and hero image at one second and fills in the rest gradually will score far better than one that stays blank until the last moment.
That makes it different from related metrics. First Contentful Paint marks the moment anything appears. Largest Contentful Paint marks when the biggest element in view has rendered. Speed Index looks at the whole progression. Lighthouse’s published guidance treats about 3.4 seconds or less as fast on its mobile test profile. At the time of writing (October 2026), Speed Index contributes to the Lighthouse performance score but is not one of Google’s Core Web Vitals.
Why it matters
People judge speed by what they see. On a mobile connection on a train out of London, a page that shows its headline and phone number quickly feels usable even if images are still loading below. A page that sits white for three seconds feels broken, and many visitors go back to the results.
Speed Index is useful as a diagnostic. A poor score alongside a decent LCP usually means the page reveals its content in an awkward order, often because fonts, sliders, cookie banners or JavaScript-built layouts hold back everything else. It shows up in PageSpeed Insights next to the other lab metrics, so it is easy to track.
It also helps when explaining performance to people who are not developers. A filmstrip showing a blank white screen for two seconds, followed by everything appearing at once, makes the problem obvious to a business owner or designer in a way a list of scores does not. That shared view makes it easier to agree on what to change first.
Common mistakes
- Testing on fast desktop broadband only. Results on a throttled mobile profile are closer to what many customers experience.
- Render-blocking resources. Large CSS files and synchronous scripts in the head delay everything.
- Hidden content waiting for JavaScript. Page builders and animation libraries that fade sections in on load make the page look empty for longer.
- Lazy-loading the hero image. Images in the first screen should load straight away.
- Chasing the score, not the experience. Removing useful content to gain a few points helps nobody.
How to act on it
Run the page through PageSpeed Insights on mobile and look at the filmstrip of frames. Identify what is holding back the first screen: a slow server response, a large stylesheet, web fonts, a slider script or a consent banner that blocks rendering. Inline the small amount of CSS needed for the first screen, defer non-essential scripts, preload the main image and font, and serve images in modern formats at the right size.
Re-test several times and compare medians, then check real-user data for LCP in Search Console to confirm the change helped actual visitors. If the causes sit deep in the theme or hosting, that is the kind of problem I work through in technical SEO.