• 核心指标：FCP、FMP、LCP、TTI
• 指标计算：FMP 需要使用 MutationObserver 模拟计算；TTI 需要使用 Performance API 协助计算；其他指标基本可以通过 Performance API 直接获取
• 注意事项：
  • 预渲染模式下，由于存在网络和 CPU 抢占情况，性能数据会偏高，指标意义不大
  • Paint 部分指标存在兼容问题，此时选用 FMP 指标代替
• 使用方式：web-vitals (opens new window)

FP/FCP

• 定义：首次渲染时间点/首次有内容（文本，图片，SVG，canvas）渲染的时间点

  FP 可视为白屏时间

• 计算方式：通过 performance.getEntriesByType('paint') 获取
• 建议指标：FCP(pct75) < 1.8s
• 注意事项：
  • safari 14.x 以下不支持，详见 caniuse (opens new window)

更多详见 https://web.dev/fcp/ (opens new window)

FMP

• 定义：首次绘制有意义内容的时间点

  FMP 一般视为首屏时间

• 计算原则：页面结构趋于稳定。
• 计算方式：MutationObserver 监听页面结构变化，得到一个分数，分数变化最剧烈的时间点，则为 FMP 。该技术值比真实值略小，误差小于 300ms
• 建议指标：FMP(pct75) < 2s
• 注意事项：
  • 非标准化指标，Lighthouse 已弃用并推荐 LCP 代替；但由于 LCP Safari 兼容性的原因，目前 FMP 在移动端上还是有一定的参考价值。

更多详见 https://developer.chrome.com/en/docs/lighthouse/performance/first-meaningful-paint/ (opens new window)

LCP

• 定义：页面可视区域内可见的最大图像或文本块完成渲染的时间点
• 计算方式：通过 PerformanceObserver 监听 LCP 指标，该指标可能会拿到多次，一般仅用第一次数据
• 建议指标：LCP(pct75) < 2.5s ；活动类业务建议在 1.5s 内

new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        console.log('LCP candidate:', entry.startTime, entry);
    }})
.observe({type: 'largest-contentful-paint', buffered: true});

• 注意事项：
  • safari 不支持：见 caniuse (opens new window)

更多详见 https://web.dev/lcp/ (opens new window)

TTI

• 定义：页面完全可交互的时间点

  完全可交互定义：1️⃣ 已显示有用内容；2️⃣ 可见元素已绑定事件；3️⃣ 事件函数可以在事件发生后的 50ms 内执行

• 计算原则：安静窗口前最后一个长任务的结束时间。安静窗口指的是没有长任务（执行时间超过 50 毫秒）且进行中的 GET 请求不超过 2 个
• 计算方式：从 FCP 开始向后搜寻一个不小于 5s 的安静窗口；找到后再向前搜索最近的长任务，取长任务的结束时间为 TTI
• 建议指标：TTI(pct75) < 5s ；活动类业务建议在 3s 内
• 注意事项：
  • 使用 SSR 这类计算，追求首屏渲染会导致 TTI 降低，实践中应该关注两者的差值，不宜过大（超过 4s）
  • 计算指标时可能会找不到长任务，此时则以 max(FCP,DOMContentLoadedEventEnd) 作为 TTI 的值
  • 兼容性上依赖于 Long Tasks API 和 Resource Timing API （均为 Performance 接口）

更多详见 https://web.dev/tti/ (opens new window)

其他

• FID：用户首次操作页面时收到的事件延迟，建议在 100ms 内。详见https://web.dev/fid/ (opens new window)
• SI：页面加载期间内容视觉显示的速度，详见https://developer.chrome.com/docs/lighthouse/performance/speed-index/ (opens new window)
• INP：整个页面生命周期下，用户交互延迟的最大值（实际为第二值，减少异常指标）。建议在 200ms 内。详见https://web.dev/inp/ (opens new window)

拓展阅读

• 字节性能指标计算 (opens new window)