What is Speed Index? (Lighthouse Metric Explained)
Speed Index is a Lighthouse performance metric that measures how quickly the visible contents of a page are progressively filled in during load. Unlike LCP, which measures a single point in time, Speed Index measures the average time at which visible parts of the page are displayed — giving a picture of how fast the entire above-the-fold area becomes visible.
What Speed Index Measures
Speed Index is calculated by capturing a video of the page loading and measuring how complete the visible area is at each frame. A low Speed Index means content appears quickly and progressively; a high Speed Index means large portions of the page remain empty or white for a long time, even if the final render is complete. It is scored using the same scale as LCP in Lighthouse (weighted 10% of the performance score).
What is a Good Speed Index Score?
What Causes Poor Speed Index Scores?
- ✗Render-blocking scripts and stylesheets that keep the page blank until they execute
- ✗Large above-the-fold images that take a long time to download before they can be displayed
- ✗Client-side rendering (CSR) — the page is blank until JavaScript executes and renders content
- ✗No critical CSS inlining — the full stylesheet must download before any styled content renders
- ✗Font loading delays (FOIT — Flash of Invisible Text) that keep text invisible during load
How to Fix Speed Index
- ✓Eliminate render-blocking resources — defer non-critical scripts, inline critical CSS
- ✓Preload above-the-fold images using <link rel="preload" as="image">
- ✓Use server-side rendering (SSR) or static generation to send HTML content immediately
- ✓Inline critical CSS for above-the-fold content and load full stylesheets asynchronously
- ✓Use font-display: swap or font-display: optional to show fallback text immediately
Check Your Speed Index Score
Check your Speed Index at speedexporter.com — the free audit includes your exact Speed Index value and all associated opportunities sorted by estimated time savings.
Run a free Lighthouse audit →Frequently Asked Questions
What is a good Speed Index score?
Lighthouse considers Speed Index "good" at 3.4 seconds or under. Between 3.4 and 5.8 seconds needs improvement. Above 5.8 seconds is poor.
What is the difference between Speed Index and LCP?
LCP measures when the single largest element renders. Speed Index measures how quickly the entire above-the-fold area fills in. Speed Index rewards progressive rendering; a page that shows 50% of content quickly scores better than one that shows nothing until 100% is ready.
How much does Speed Index affect my Lighthouse score?
Speed Index contributes 10% to the Lighthouse Performance score. LCP contributes 25%, TBT 30%, FCP 10%, and CLS 25%. TBT and LCP have the biggest impact on your overall score.