Speed Index

Definition

Speed Index is a Lighthouse-style lab metric measuring how quickly visible content is displayed during load. It's influenced by LCP, render-blocking resources, images, and caching/TTFB. It's not a CWV metric but is useful for diagnostics.

Why it matters

• Reflects progressive rendering speed (not just a single point in time)
• Helps diagnose render-blocking and above-the-fold issues
• Secondary optimization indicator complementing LCP
• Lower is better — means page content fills faster
• Helps compare visual loading speed of different design approaches
• Reveals whether progressive rendering is effective
• Important component of Lighthouse performance score

How to implement

• Optimize above-the-fold resources: correct sizing, WebP/AVIF format, preload
• Reduce render-blocking CSS/JS: defer or inline critical CSS
• Improve TTFB: CDN, edge caching, SSG/prerender
• Use skeleton or placeholder to make content 'appear' faster
• Prioritize loading above-the-fold content, defer non-essential resources
• Avoid large hero images blocking visual progress
• Continuously monitor Speed Index changes with Lighthouse

Examples

# Measure performance with Lighthouse CLI
npx lighthouse https://example.com --only-categories=performance --output=json

# Extract Speed Index from JSON output
node -e "
  const report = require('./report.json');
  const si = report.audits['speed-index'];
  console.log('Speed Index:', si.numericValue, 'ms');
  console.log('Score:', si.score);
"