Speed Index measures how quickly the visible area of a page is populated with content. It captures the visual progression of page load — a lower score means content appears faster and more evenly.

What is a good Speed Index score?

Under 3.4 seconds is 'good,' between 3.4s and 5.8s 'needs improvement,' and over 5.8s is 'poor.' Speed Index carries about 10% weight in Lighthouse's performance score.

How is Speed Index different from FCP and LCP?

FCP measures when the first pixel of content appears. LCP measures when the largest element renders. Speed Index measures the overall visual completeness over time — you can have a fast FCP but slow Speed Index if the page renders in a sudden jump rather than progressively.

What causes a high Speed Index?

Render-blocking resources, large unoptimized hero images, web font FOIT (Flash of Invisible Text), heavy JavaScript that delays rendering, and single-frame rendering instead of progressive painting.

Can server-side rendering improve Speed Index?

Yes. SSR sends fully-rendered HTML so the browser can paint content immediately, rather than waiting for JavaScript to build the page. This usually gives a much lower Speed Index compared to client-side rendering.

Fix Speed Index: Make Your Page Look Fast

Speed Index captures how your page looks while it's loading — not just single moments, but the entire visual journey. A page that progressively reveals content scores better than one that stays blank and then pops in all at once.

Why Speed Index Matters

Captures perceived speed — users feel faster loading when content appears gradually
10% of Lighthouse score — a significant contributor
Reflects real user experience — even if FCP is fast, a choppy load feels slow

Speed Index	Rating	Visual Experience
≤ 3.4s	Good	Content fills in smoothly
3.4–5.8s	Needs Improvement	Noticeable blank areas during load
> 5.8s	Poor	Staring at a blank screen

How Speed Index Works

Lighthouse records a video of your page loading and calculates how much of the viewport is visually complete at each 100ms interval. The formula integrates the "visual incompleteness" over time — so a page that's 80% complete at 1 second scores much better than one that jumps from 0% to 100% at 3 seconds.

How to Fix High Speed Index

1. Prioritize Above-the-Fold Content

The content visible without scrolling determines your Speed Index. Make sure it loads first:

<!-- Preload hero image -->
<link rel="preload" as="image" href="/images/hero.webp"
      fetchpriority="high">

<!-- Inline critical CSS for above-the-fold -->
<style>
  .hero { background: #1a1a2e; min-height: 100vh; }
  .hero-title { font-size: 3rem; color: white; }
</style>

2. Avoid Flash of Invisible Text (FOIT)

When web fonts load slowly, the browser may hide text entirely until the font arrives:

@font-face {
  font-family: "Heading";
  src: url("/fonts/heading.woff2") format("woff2");
  font-display: swap; /* Show fallback immediately */
}

With swap, users see system-font text right away, then it smoothly swaps to the custom font.

3. Use Progressive Image Loading

Instead of one large image that takes seconds to appear, use a low-quality placeholder:

// Next.js — built-in blur placeholder
import Image from "next/image";

<Image
  src="/images/hero.webp"
  alt="Hero"
  width={1200}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZ..."
  priority
/>

4. Server-Side Render Critical Content

Client-side rendering means the browser downloads JS, parses it, executes it, then renders — all while showing a blank page:

CSR: [blank] [blank] [blank] [100%] → High Speed Index
SSR: [30%]   [60%]   [90%]   [100%] → Low Speed Index

Use SSR or SSG for content-heavy pages to send rendered HTML immediately.

5. Reduce Render-Blocking Resources

Every render-blocking CSS or JS file is time the browser spends not painting:

<!-- Non-critical CSS — load async -->
<link rel="preload" href="/styles/animations.css"
      as="style" onload="this.rel='stylesheet'">

<!-- Critical CSS — inline it -->
<style>/* above-the-fold styles */</style>

6. Optimize Loading Order

Load visible content in priority order:

HTML — send minimal, server-rendered markup
Critical CSS — inline in <head>
Hero image — preload with fetchpriority="high"
Web fonts — preload with font-display: swap
Below-the-fold content — lazy load everything else

<head>
  <style>/* critical CSS */</style>
  <link rel="preload" href="/images/hero.webp" as="image" fetchpriority="high">
  <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
  <link rel="preload" href="/styles/full.css" as="style"
        onload="this.rel='stylesheet'">
</head>

Measuring Speed Index

Lighthouse CLI

npx lighthouse https://yoursite.com \
  --only-categories=performance \
  --output=json | jq '.audits["speed-index"]'

WebPageTest

WebPageTest captures filmstrip views that visually show how your Speed Index breaks down frame by frame.

Quick Wins Checklist

Inline critical CSS for above-the-fold content
Add font-display: swap to custom fonts
Preload hero image with fetchpriority="high"
Use SSR/SSG instead of pure client-side rendering
Lazy load below-the-fold images and components
Compress and optimize hero images (WebP, proper sizing)
Remove or defer render-blocking scripts

Why Speed Index Matters

Captures perceived speed — users feel faster loading when content appears gradually
10% of Lighthouse score — a significant contributor
Reflects real user experience — even if FCP is fast, a choppy load feels slow

Speed Index	Rating	Visual Experience
≤ 3.4s	Good	Content fills in smoothly
3.4–5.8s	Needs Improvement	Noticeable blank areas during load
> 5.8s	Poor	Staring at a blank screen

How Speed Index Works

How to Fix High Speed Index

1. Prioritize Above-the-Fold Content

The content visible without scrolling determines your Speed Index. Make sure it loads first:

<!-- Preload hero image -->
<link rel="preload" as="image" href="/images/hero.webp"
      fetchpriority="high">

<!-- Inline critical CSS for above-the-fold -->
<style>
  .hero { background: #1a1a2e; min-height: 100vh; }
  .hero-title { font-size: 3rem; color: white; }
</style>

2. Avoid Flash of Invisible Text (FOIT)

When web fonts load slowly, the browser may hide text entirely until the font arrives:

@font-face {
  font-family: "Heading";
  src: url("/fonts/heading.woff2") format("woff2");
  font-display: swap; /* Show fallback immediately */
}

With swap, users see system-font text right away, then it smoothly swaps to the custom font.

3. Use Progressive Image Loading

Instead of one large image that takes seconds to appear, use a low-quality placeholder:

// Next.js — built-in blur placeholder
import Image from "next/image";

<Image
  src="/images/hero.webp"
  alt="Hero"
  width={1200}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZ..."
  priority
/>

4. Server-Side Render Critical Content

Client-side rendering means the browser downloads JS, parses it, executes it, then renders — all while showing a blank page:

CSR: [blank] [blank] [blank] [100%] → High Speed Index
SSR: [30%]   [60%]   [90%]   [100%] → Low Speed Index

Use SSR or SSG for content-heavy pages to send rendered HTML immediately.

5. Reduce Render-Blocking Resources

Every render-blocking CSS or JS file is time the browser spends not painting:

<!-- Non-critical CSS — load async -->
<link rel="preload" href="/styles/animations.css"
      as="style" onload="this.rel='stylesheet'">

<!-- Critical CSS — inline it -->
<style>/* above-the-fold styles */</style>

6. Optimize Loading Order

Load visible content in priority order:

HTML — send minimal, server-rendered markup
Critical CSS — inline in <head>
Hero image — preload with fetchpriority="high"
Web fonts — preload with font-display: swap
Below-the-fold content — lazy load everything else

<head>
  <style>/* critical CSS */</style>
  <link rel="preload" href="/images/hero.webp" as="image" fetchpriority="high">
  <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
  <link rel="preload" href="/styles/full.css" as="style"
        onload="this.rel='stylesheet'">
</head>

Measuring Speed Index

Lighthouse CLI

npx lighthouse https://yoursite.com \
  --only-categories=performance \
  --output=json | jq '.audits["speed-index"]'

WebPageTest

WebPageTest captures filmstrip views that visually show how your Speed Index breaks down frame by frame.

Quick Wins Checklist

Inline critical CSS for above-the-fold content
Add font-display: swap to custom fonts
Preload hero image with fetchpriority="high"
Use SSR/SSG instead of pure client-side rendering
Lazy load below-the-fold images and components
Compress and optimize hero images (WebP, proper sizing)
Remove or defer render-blocking scripts

Why Speed Index Matters

How Speed Index Works

How to Fix High Speed Index

1. Prioritize Above-the-Fold Content

2. Avoid Flash of Invisible Text (FOIT)

3. Use Progressive Image Loading

4. Server-Side Render Critical Content

5. Reduce Render-Blocking Resources

6. Optimize Loading Order

Measuring Speed Index

Lighthouse CLI

WebPageTest

Quick Wins Checklist

Ready to stop wasting ad spend?

Share this article

Related Articles

Optimize Font Loading: Eliminate Invisible Text

Page Speed Glossary: Every Metric Explained

What Google's Algorithm Updates Mean for Page Speed

Page Speed Benchmarks by Industry (2026 Edition)

Share this article

Related Articles

Optimize Font Loading: Eliminate Invisible Text

Page Speed Glossary: Every Metric Explained

What Google's Algorithm Updates Mean for Page Speed

Page Speed Benchmarks by Industry (2026 Edition)

Why Speed Index Matters

How Speed Index Works

How to Fix High Speed Index

1. Prioritize Above-the-Fold Content

2. Avoid Flash of Invisible Text (FOIT)

3. Use Progressive Image Loading

4. Server-Side Render Critical Content

5. Reduce Render-Blocking Resources

6. Optimize Loading Order

Measuring Speed Index

Lighthouse CLI

WebPageTest

Quick Wins Checklist

Ready to stop wasting ad spend?

Share this article

Related Articles

Optimize Font Loading: Eliminate Invisible Text

Page Speed Glossary: Every Metric Explained

What Google's Algorithm Updates Mean for Page Speed

Page Speed Benchmarks by Industry (2026 Edition)

Share this article

Related Articles

Optimize Font Loading: Eliminate Invisible Text

Page Speed Glossary: Every Metric Explained

What Google's Algorithm Updates Mean for Page Speed

Page Speed Benchmarks by Industry (2026 Edition)