Speed Index

A metric of visual page load speed. How it's measured, thresholds, and how to improve Speed Index for Core Web Vitals.

In brief

Speed Index is a performance metric showing how quickly page content becomes visually visible during loading. Measured in seconds based on visual progress (screenshots every 100 ms).

How Speed Index is measured

Lighthouse takes screenshots every 100 ms during loading and calculates how fast the visible area fills. The fewer pixels remaining empty at each moment, the lower (better) the Speed Index.

Thresholds

Official scores:

  • Good: less than 3.4 s.
  • Needs improvement: 3.4–5.8 s.
  • Poor: more than 5.8 s.

How to improve Speed Index

Key techniques:

  • Inline critical CSS for the above-the-fold area.
  • Prioritize visible content loading (lazy-load offscreen content).
  • Image optimization — compression, WebP, width/height attributes.
  • Eliminate render-blocking resources (JS deferral).
  • Server-side rendering (SSR) — deliver ready-made HTML.
Speed Index is not a direct Core Web Vitals signal, but it closely relates to LCP and perceived user speed.

Common questions

LCP measures the largest element's render time; Speed Index shows the visual progress of the entire page. Both are important for UX.
Run a Lighthouse audit in Chrome DevTools or PageSpeed Insights. The metric is under Performance.
The metric itself is not a direct ranking factor, but slow rendering worsens user signals and may affect Core Web Vitals, which Google does consider.
Yes, on simple pages with inline styles and no images. For commercial pages it's challenging but achievable.
Direct contacts

Discuss your project?

Share your goals and website context — I will suggest a practical next step.

Speed Index — What is it?