What is SI?
Speed Index (SI) measures how quickly the visible portion of a page is visually populated during load. It is computed from a video recording of the page load by measuring the average time at which visible parts of the page are displayed.
What problem does it solve?
Unlike FCP which fires on the first pixel, Speed Index captures the entire visual progression — a page that loads content incrementally scores better than one that paints everything at once after a long delay.
What is a good SI score?
How to improve SI
The key is to tackle issues related to each contributing phase.
Server response & rendering foundation
Speed Index cannot improve beyond the rate at which the browser receives HTML and can begin rendering. A slow TTFB or render-blocking stylesheets delay the first pixel and every frame after.
Page caching, CDN, and critical CSS inlining all contribute. Speed Index improvements are largely downstream of fixing TTFB and FCP first.
Above-the-fold resource loading
Images and fonts visible in the initial viewport that load slowly delay visual completeness. The browser must wait for them before above-the-fold content is considered fully painted.
Lazy-load images below the fold only. Preload above-the-fold images with fetchpriority="high". Subset and preload critical web fonts.
JavaScript execution during load
JavaScript that runs during page load and manipulates the DOM can delay rendering. Client-side rendered content appears later than server-rendered content in Speed Index measurements.
Prefer server-side rendering for above-the-fold content. Defer non-critical JavaScript. Minimise layout and paint triggered by JavaScript during the initial load sequence.
Root cause analysis, not plugin guessing. Baseline from field data or lab — wherever you are.