Speed Index.

Performance Core Web Vitals & Page Load

How quickly content is visually populated — lower is better

What does this check test?

Speed Index measures how quickly the contents of a page are visually populated during load. It captures a video of the page loading and computes the visual progression at each frame — a page that shows content progressively will score better than one that remains blank until everything appears at once. Speed Index is expressed in milliseconds, with lower values being better. Google considers Speed Index 'good' at 3.4 seconds or less. Unlike FCP or LCP which measure single moments, Speed Index captures the entire visual loading experience.

Why does it matter?

Speed Index captures the holistic visual loading experience that individual metrics like FCP and LCP miss. Two pages with identical FCP and LCP can have very different Speed Index scores if one progressively reveals content while the other stays blank between those events. A low Speed Index means users see useful content appearing steadily, which feels faster even if the total load time is similar. Speed Index contributes 10% to the Lighthouse performance score.

Who is affected?

Content-rich pages like news articles, product listings, and dashboards are most affected by Speed Index because they have many visual elements that load over time. Pages that rely on client-side rendering to populate content tend to have worse Speed Index scores compared to server-rendered pages. Media-heavy pages where images and video dominate the viewport are also heavily impacted.

Where does this apply?

Speed Index is a synthetic metric computed by visual analysis during page load in lab tools like Lighthouse and WebPageTest. It depends on all the same factors as FCP and LCP (server response time, render-blocking resources, image loading) but also on the order and timing of how individual elements appear. Large above-the-fold areas that load last contribute disproportionately to a poor Speed Index score.

How to fix it

Prioritize above-the-fold content by inlining critical CSS and deferring below-the-fold styles. Use server-side rendering or static generation to send initial content in the HTML response rather than building it with JavaScript. Prioritize critical above-the-fold resources:

html

<head>
  <style>/* inlined critical CSS */</style>
  <link rel="preload" href="/hero.webp" as="image" />
</head>
<body>
  <img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600" />
  <img src="/below-fold.webp" alt="..." loading="lazy" />
</body>

Avoid large client-side data fetches before rendering content; instead, embed initial data in the HTML or use streaming SSR. Set explicit dimensions on all media elements to allow the browser to allocate space and paint surrounding content while images load. Minimize web font loading impact with `font-display: swap`.

References

AppVet checks Speed Index automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks