Speed Index

定義

Speed Index 是 Lighthouse 等工具的 lab metric，衡量頁面在載入過程中『視覺內容顯示』的速度。它受到 LCP、資源載入策略、圖片與 CSS/JS 阻塞影響。雖不是 CWV，但可用於診斷。

為什麼重要

• 反映逐步顯示的體感（不只看單一時間點）
• 能協助找出 render-blocking 與首屏資源問題
• 作為速度優化的輔助指標，補充 LCP 無法涵蓋的面向
• 越低越好——代表頁面內容越快被填滿
• 幫助比較不同設計方案的視覺載入速度
• 能揭示「漸進式渲染」是否有效
• Lighthouse 報告的重要分數組成

怎麼做（實作重點）

• 優化首屏資源：正確尺寸、WebP/AVIF 格式、預載入
• 減少 render-blocking CSS/JS：延後或內聯關鍵 CSS
• 改善 TTFB：CDN、邊緣快取、SSG/prerender
• 使用 skeleton 或 placeholder 讓內容「看起來」更快出現
• 優先載入首屏可見內容，延後非必要資源
• 避免大型 hero 圖片阻塞視覺進度
• 持續用 Lighthouse 監控 Speed Index 變化

範例

# 使用 Lighthouse CLI 測量效能
npx lighthouse https://example.com --only-categories=performance --output=json

# 從 JSON 輸出提取 Speed Index
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);
"