Speed Index
Definition
A measure of how quickly visible content fills the viewport during page load, reflecting overall visual loading experience.
What is Speed Index?
Speed Index measures how quickly the visible content of a page populates during loading. Rather than tracking a single moment, it scores the entire visual progression – how much of the viewport is painted at each point during load.
A page that shows 50% of content at 1 second and 100% at 2 seconds scores better than one that shows nothing until 2 seconds then displays everything.
Why Speed Index Matters
User Perception
Speed Index reflects what users actually experience – seeing content progressively appear rather than waiting for everything at once.
Progressive Loading
It rewards designs that show important content early, even if less important content loads later.
Comprehensive Metric
Unlike metrics that track single moments, Speed Index captures the overall visual experience.
Diagnostic Tool
A poor Speed Index, combined with good individual metrics, suggests problems with how content progressively renders.
Speed Index Scores
| Rating | Speed Index |
|---|---|
| Good | Under 3.4s |
| Needs Improvement | 3.4-5.8s |
| Poor | Over 5.8s |
Note: Speed Index is measured in milliseconds but often reported in seconds.
Factors Affecting Speed Index
Render-Blocking Resources
Large CSS and JavaScript files that must complete before rendering delay the visual appearance.
Content Loading Order
Content appearing above the fold early improves Speed Index, even if below-fold content loads later.
Large Images
Unoptimised images that take time to download and render slow visual completion.
Font Loading
Text content waiting for web fonts to load leaves gaps in the visual display.
JavaScript-Rendered Content
Content that requires JavaScript execution appears later than server-rendered content.
Improving Speed Index
Prioritise Visible Content
Ensure above-the-fold content loads and renders first.
Optimise Critical Rendering Path
Minimise the resources needed for initial visual render.
Compress and Optimise Images
Smaller images download faster and fill the viewport sooner.
Use Progressive Loading
Show content as soon as it's available rather than waiting for everything.
Reduce JavaScript Dependency
Server-rendered content typically appears faster than client-rendered alternatives.