Back to Learn
Pulseperformance

Speed Index (SI)

What SI Measures

Speed Index measures how quickly content is visually displayed during page load. Rather than tracking a single moment, it captures the entire visual progression of the page by analyzing a filmstrip of screenshots taken as the page renders. A lower Speed Index means the page appears to load faster because visible content fills the viewport sooner.

How Lighthouse Scores It

Lighthouse captures a video of the page loading in a throttled environment, then computes how quickly the visual completeness progresses from 0% to 100%. The score is derived by comparing your Speed Index against real-world page load data from the HTTP Archive.

RatingMobileDesktop
Good (green)≤ 3.4 s≤ 1.3 s
Needs Improvement (orange)3.4 – 5.8 s1.3 – 2.3 s
Poor (red)> 5.8 s> 2.3 s

Speed Index carries a 10% weight in the overall Lighthouse performance score. While it is not the heaviest-weighted metric, a poor SI often signals deeper rendering issues that affect other metrics too.

How to Improve It

Speed Index improves when visible content renders earlier. Focus on these techniques:

  • Minimize main-thread work. Audit and reduce the total amount of JavaScript parsing, compilation, and execution that blocks rendering. Move non-critical scripts to defer or async and eliminate unused code with tree-shaking.

  • Reduce JavaScript execution time. Long-running scripts delay visual progress. Break monolithic bundles into smaller chunks with code splitting so the browser can paint content between script evaluations.

  • Ensure text remains visible during webfont load. Apply font-display: swap or font-display: optional to your @font-face declarations. This prevents invisible text (FOIT) while custom fonts download, letting the browser display fallback text immediately.

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;
}

  • Minimize critical request depth. Flatten your critical rendering path. Inline critical CSS, preload key resources with <link rel="preload">, and avoid chaining requests where one resource blocks another.

  • Reduce request count and transfer sizes. Compress images with modern formats like WebP or AVIF, enable Brotli or gzip on text assets, and remove unused CSS and JavaScript. Fewer bytes over the wire means faster visual completion.

  • Use server-side rendering or static generation. Delivering pre-rendered HTML gives the browser meaningful content to paint immediately, rather than waiting for client-side JavaScript to build the DOM from scratch.

How Pulse Tracks This

Pulse runs scheduled Lighthouse audits against your sites and records your Speed Index value after each run. The PageSpeed dashboard plots SI over time so you can spot regressions the moment a deployment pushes visual load times in the wrong direction.

Resources