What Is the Speed Index Metric?
Learn how Speed Index scores visual page-load progress and why it differs from single-point metrics like FCP.
Expected Interview Answer
Speed Index measures how quickly the visible content of a page is painted during load by scoring the visual completeness of the viewport at every recorded frame and averaging how fast that completeness percentage rose over time, producing a single number where lower is faster.
The measurement tool, typically Lighthouse or WebPageTest, captures a filmstrip of frames while the page loads, computes a visual-completeness percentage for each frame by comparing it to the final rendered state, and then calculates Speed Index as the time-weighted average of the incomplete area under that visual-progress curve — mathematically, integrating (1 minus visual completeness) over time. A page that paints most of its content early scores well even if a few final pixels settle in late, whereas a page that stays visually empty for a long time and then paints everything at once in a single burst scores poorly, because the area above the visual-completeness curve stays large for longer. This makes Speed Index fundamentally different from single-timestamp metrics like FCP or LCP: it rewards a smooth, progressive rendering experience across the whole viewport rather than just the first or largest element. Because it depends on frame-by-frame visual comparison, Speed Index is a lab-only metric and is especially sensitive to above-the-fold layout choices, since content below the fold does not factor into the visual-completeness calculation.
- Captures the overall visual loading experience, not just one milestone timestamp
- Rewards progressive, above-the-fold rendering over one late visual burst
- Useful for diagnosing perceived slowness that single-point metrics miss
- Directly comparable across page redesigns as a single visual-progress score
AI Mentor Explanation
Speed Index is like judging how a scoreboard fills in across an over, not just noting the moment the final digit appears. If the runs, overs, and wickets populate steadily as the over unfolds, the board feels complete quickly even before the very last update. If instead the board stays blank until the last ball and then fills in all at once, it feels slow the whole time despite finishing at the same final moment. That reward-for-steady-progressive-filling calculation is exactly what Speed Index measures for a webpage.
Step-by-Step Explanation
Step 1
Capture a load filmstrip
The testing tool records frame-by-frame screenshots of the viewport throughout page load.
Step 2
Score visual completeness per frame
Each frame is compared to the final rendered state to compute a completeness percentage.
Step 3
Plot the visual-progress curve
Completeness percentage over time forms a progress curve from 0% to 100%.
Step 4
Integrate the incomplete area
Speed Index is the time-weighted average of the area still incomplete under that curve — lower means faster.
What Interviewer Expects
- Understanding that Speed Index measures visual progress over time, not a single timestamp
- Ability to explain the filmstrip/visual-completeness scoring approach
- Knowledge that Speed Index is above-the-fold and viewport-scoped
- Awareness that it is a lab-only metric measured via Lighthouse or WebPageTest
Common Mistakes
- Confusing Speed Index with a single-point metric like FCP or LCP
- Assuming a lower final load time always means a lower Speed Index
- Forgetting that Speed Index only considers the visible viewport, not the full page
- Not recognizing that progressive rendering improves Speed Index even if total load time is unchanged
Best Answer (HR Friendly)
“Speed Index measures how quickly a page visually fills in as it loads, not just when it finally finishes. A page that shows content gradually and steadily scores better than one that stays blank and then dumps everything on screen at once, even if both technically finish loading at the same time.”
Code Example
const lighthouse = require('lighthouse')
const chromeLauncher = require('chrome-launcher')
async function measureSpeedIndex(url) {
const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] })
const options = { port: chrome.port, onlyCategories: ['performance'] }
const result = await lighthouse(url, options)
const speedIndex = result.lhr.audits['speed-index'].numericValue
console.log('Speed Index:', speedIndex, 'ms')
await chrome.kill()
}Follow-up Questions
- How does Speed Index differ from Largest Contentful Paint?
- Why does progressive rendering improve Speed Index even without changing total load time?
- What layout or CSS decisions most affect Speed Index?
- Why is Speed Index considered a lab-only rather than a field metric?
MCQ Practice
1. What does Speed Index actually measure?
Speed Index integrates visual completeness over time rather than a single timestamp.
2. Which page would score a WORSE (higher) Speed Index, all else equal?
A late, all-at-once render keeps the incomplete visual area large for longer, worsening the score.
3. Is Speed Index measurable as a field Core Web Vital?
Its filmstrip-based calculation requires lab tooling like Lighthouse or WebPageTest.
Flash Cards
What is Speed Index? — A score for how quickly visible content fills in visually during page load, lower is better.
How is it calculated? — Time-weighted integration of the incomplete visual area under a frame-by-frame completeness curve.
What scope does it cover? — Only the above-the-fold viewport, not the full page.
Is it a Core Web Vital? — No — it is a lab-only metric from tools like Lighthouse or WebPageTest.