Speed Index (SI) measures how quickly content becomes visually complete above-the-fold during page load. Unlike milestone metrics that mark specific moments, SI calculates a weighted average of visual progress using frame-by-frame screenshot analysis. A lower score means users perceive your site as loading faster, which improves engagement and supports your overall Lighthouse Performance score.
What is Speed Index?
Speed Index is a synthetic performance metric that quantifies how rapidly visible page content renders. It belongs to the Performance section of Lighthouse reports and contributes to the overall score calculation.
The metric depends on viewport size, meaning your score changes based on the device screen dimensions being tested. Lighthouse captures a video of the page loading in the browser and uses the Speedline Node.js module to compute the score. Because it requires expensive screenshot processing, Speed Index is only available through lab-based synthetic testing tools like Lighthouse, GTmetrix, or DebugBear. It cannot be measured using Real User Monitoring (RUM) or field data.
Why Speed Index matters
- Measures perceived performance. SI reflects what users actually experience visually rather than abstract technical timings.
- Unified optimization benchmark. It aggregates the impact of other metrics, giving you one number to track whether your speed improvements work.
- Lighthouse scoring weight. [Speed Index accounts for 10% of the total Lighthouse Performance Score] (GTmetrix).
- Supports Core Web Vitals. While [SI is not a Core Web Vital and does not directly impact Google rankings] (DebugBear), optimizing it typically improves Largest Contentful Paint (LCP), which is a ranking factor.
- Correlates with key milestones. SI is closely tied to First Contentful Paint (FCP) and LCP, making it a reliable health check for your critical rendering path.
How Speed Index works
- Capture. The testing tool records a video or filmstrip of the viewport during the entire load process.
- Analyze. Each frame gets compared to the final rendered frame to determine its visual completeness percentage.
- Calculate. The algorithm sums the product of each frame's duration and its incompleteness. [If a user sees an empty page for one second, that adds one full second to the Speed Index. If they see a page that is 90% complete for two seconds, that increases the Speed Index by 10% of two seconds, or 200 milliseconds] (DebugBear).
Lighthouse then compares your raw time against data from the HTTP Archive to generate the final score.
Speed Index vs. other metrics
| Metric | What it measures | Key difference from SI |
|---|---|---|
| First Contentful Paint (FCP) | When first content appears | Time before FCP counts fully toward SI, so SI can never be lower than FCP |
| Largest Contentful Paint (LCP) | When the largest element renders | LCP tracks a single element; SI analyzes the entire above-the-fold viewport |
| Visually Complete | When no more visual changes occur | Visually Complete is a milestone where all prior time counts fully; SI weights partial progress |
Best practices
Optimize server response time. Reduce Time to First Byte (TTFB) so the browser receives HTML faster and rendering starts sooner.
Eliminate render-blocking resources. Remove or defer CSS and JavaScript that prevent paint. Load scripts asynchronously using the async or defer attributes.
Minimize main-thread work. Reduce JavaScript parsing and execution so the browser has resources available to render visible content.
Prioritize above-the-fold images. Add fetchpriority="high" to critical images and avoid sequential request chains for your LCP image.
Optimize web font loading. Use the font-display: swap CSS property to ensure text remains visible using system fonts while custom fonts load.
Remove unused JavaScript. Eliminate dead code that consumes execution time without contributing to visual completeness.
Common mistakes
Mistake: Attempting to measure Speed Index using Real User Monitoring (RUM). Fix: Use synthetic lab tools only. [Browser APIs do not provide access to rendering screenshots, and processing this data would cause performance issues for visitors] (DebugBear).
Mistake: Treating SI like a milestone metric. Fix: Remember it is a calculated statistical average, not a point-in-time event like FCP or Visually Complete.
Mistake: Testing at only one viewport size. Fix: Scores vary by device dimensions. Test mobile and desktop separately since thresholds differ significantly.
Mistake: Chasing SI improvements in isolation. Fix: Unless you have a specific visual completeness problem, focus on the overall Lighthouse Performance score using the Diagnostics section to identify the highest-impact opportunities.
Examples
Calculation scenario: A page loads five frames. The first frame is 0% complete for 253 milliseconds, contributing 253ms to SI. The next frame reaches 43% completeness for 150ms, contributing 85.5ms (57% incomplete × 150ms). The sum continues until visually complete, yielding a final Speed Index of 342.3ms for this sequence.
E-commerce product page: A site displays a hero image and product title above-the-fold. By preloading the hero image with fetchpriority="high" and inlining critical CSS, the page reaches 95% visual completeness within one second, keeping SI under the mobile threshold despite heavy JavaScript loading below the fold.
FAQ
What is a good Speed Index score? [On mobile, 3.4 seconds or below earns a green (fast) rating, 3.4 to 5.8 seconds is moderate, and over 5.8 seconds is slow] (Chrome Developers). [Desktop requires under 1.3 seconds for green, 1.3 to 2.3 for moderate, and over 2.3 for red] (Chrome Developers). GTmetrix uses stricter thresholds: [1311 milliseconds or less is good, 1311 to 1711ms is acceptable, 1711 to 2300ms is longer than recommended, and over 2300ms is much longer] (GTmetrix).
How does Speed Index differ from Largest Contentful Paint? LCP identifies when the single largest content element becomes visible. Speed Index evaluates the entire above-the-fold viewport using frame-by-frame visual analysis to calculate an average completion time.
Can I measure Speed Index for real users? No. The metric requires computationally expensive screenshot comparison that is only feasible in controlled lab environments. Field data from real devices cannot capture or process the necessary visual frames.
Does Speed Index affect SEO rankings? Speed Index is not one of Google's Core Web Vitals and does not directly influence search rankings. However, the optimizations that improve SI typically also improve LCP, which is a Core Web Vital that does affect rankings.
Which tools report Speed Index? Lighthouse (available in PageSpeed Insights and Chrome DevTools), GTmetrix, and DebugBear all report SI. These tools use the Speedline library for calculation.
Why is my Speed Index higher than my First Contentful Paint? Time elapsed before any content appears (FCP) contributes fully to the SI calculation at 100% incompleteness. Once FCP occurs, subsequent time contributes only partially based on how much of the page remains visually incomplete.
