速度指数（Speed Index）：衡量什么、怎么算、怎么改进

什么是速度指数（Speed Index）？

速度指数（Speed Index）衡量页面加载时可见内容显示得有多快。它不是只标记一个时间点，而是逐帧看整个加载过程，计算视口内容在多长时间里还没显示完整。越低越好：大部分内容很早就显示出来的页面，即使最后几个像素到得晚，速度指数也低。

它由 WebPageTest 在 2012 年提出，是 Lighthouse 性能审查的指标之一。它是实验室指标：需要在受控环境里录下页面加载过程，不从真实访客那里采集。

速度指数怎么算

工具把页面加载录成视频帧，计算每一帧的视觉完整度（和最终画面有多接近）。速度指数是视觉完整度曲线上方的面积：

速度指数 = ∫ (1 − 视觉完整度(t)) dt

计算示例：同时加载完，速度指数却不同

两个页面都在 3.0 秒时渲染完（示例帧）：

页面 A：1.5 秒 × 完全未显示 + 0.5 秒 × 40% + 1.0 秒 × 20% = 1,500 + 200 + 200 = 1,900 毫秒。 页面 B：1.0 秒 × 完全未显示 + 2.0 秒 × 10% = 1,000 + 200 = 1,200 毫秒。

两个页面同一时间「完全加载」，但页面 B 的访客早一秒就看到了几乎全部内容。速度指数能反映这个差别，「加载时间」反映不了。

速度指数阈值

Lighthouse 对移动端速度指数的评级大致如下：

Lighthouse 10 及以后，速度指数占性能得分的 10%；最大内容绘制、总阻塞时间和累积布局偏移的权重更大。

速度指数和相关指标

速度指数适合在合成监控里对比不同版本、发现性能回退。真实访客的体验要看 LCP 等现场指标。

怎么改进速度指数

1. 先渲染首屏内容： 内联关键 CSS，延后非关键的 CSS 和 JavaScript。
2. 避免 head 里有阻塞渲染的资源。
3. 尽快显示文字： 用 font-display: swap 或 optional，别让字体把文字藏起来。
4. 优先加载首图： 用 fetchpriority="high" 并设好尺寸，首屏以下的图片懒加载。
5. 避免晚出现又挤动版面的内容，比如后插入的横幅。
6. 加快服务器响应，让渲染更早开始。

在 TapCub 里

速度指数需要录制加载视频，TapCub 测量的是真实访问，所以不报告它。性能报表给出的是描述同样体验的现场指标：首次内容绘制、最大内容绘制、布局偏移、交互延迟和首字节时间，可以看 P75、P95、中位数或平均值。开发时用 Lighthouse 或其他合成工具看速度指数，再用 TapCub 确认改进是否体现在访客身上。见页面加载多快算好和真实用户监控。

参考资料

• Chrome for Developers. Speed Index (Lighthouse).
• Chrome for Developers. Lighthouse performance scoring.
• MDN Web Docs. Speed index.