Speed Index

How Speed Index is calculated

Lighthouse takes a video recording of the page loading, then analyzes each frame to determine what percentage of the final above-the-fold content is visible. The Speed Index is the integrated area under the ”% visually complete vs time” curve.

A page that’s 50% visually complete at 1 second and 100% complete at 2 seconds has a lower (better) Speed Index than one that’s 0% complete at 2 seconds and 100% at 2.1 seconds — even if both reach full completion at similar times.

Speed Index vs other speed metrics

Metric	What it measures	Where it lives
TTFB	Server response	Lab + field
FCP	First content visible	Lab + field
LCP	Largest content visible	Lab + field (Core Web Vital)
Speed Index	Average visual completeness over time	Lab only
TBT	Main-thread blocking	Lab only
INP	Interaction responsiveness	Field only (Core Web Vital)
CLS	Layout stability	Lab + field (Core Web Vital)

Speed Index is unique because it captures the SHAPE of the loading curve, not a single moment. A page can have perfect LCP but poor Speed Index if most of the visible content takes a long time to populate.

Why Speed Index isn’t a Core Web Vital

Two reasons:

1. Hard to measure in the field — Speed Index requires frame-by-frame video analysis, which isn’t feasible at real-user-monitoring scale
2. Other metrics already capture the user experience — LCP captures “is the main content visible?”; the marginal value of Speed Index over LCP is limited

Google’s ranking uses LCP, INP, CLS. Speed Index is supplementary.

Optimization tactics

Speed Index optimization heavily overlaps with LCP and FCP optimization:

• Server-side render the critical viewport — never have visible content appear via post-load JS
• Inline critical CSS — avoid render-blocking stylesheets
• Optimize image loading order — prioritize above-fold images
• Defer non-critical JS — async/defer scripts that don’t affect initial render
• Code-split routes — only load JS needed for the current route

When to look at Speed Index

We mostly use Speed Index as a debugging aid when:

• LCP looks acceptable but the page feels slow
• Different page templates have different perceived speeds at similar LCPs
• Investigating why mobile feels worse than desktop on the same site

For headline reporting, LCP/INP/CLS are sufficient. Speed Index is the diagnostic layer underneath.

Resocial perspective

We surface Speed Index in our nightly Lighthouse audits but don’t report it as a headline metric. The actions that improve Speed Index also improve LCP, FCP, and TBT — so optimizing the Core Web Vitals usually drags Speed Index along for the ride.