如何通过HTML获取页面性能核心指标FCP、LCP、FID和CLS？

本文共计846个文字，预计阅读时间需要4分钟。

可以使用浏览器内置的 `PerformanceObserver API 获取 FCP、LCP、CLS 等指标，但 FID 已被弃用，建议使用 `INP`；所有指标均需在页面加载早期注册监听，否则会丢失关键事件。

用 PerformanceObserver 监听 LCP 和 CLS

这两个指标有原生的观察类型，注册后能捕获所有相关条目。注意必须设置 buffered: true，否则页面加载完成后再注册就收不到历史记录。

常见错误：只监听一次就结束，或没加 buffered 导致本地调试时看不到数据。

• LCP 对应 type: 'largest-contentful-paint'，entry.value 是毫秒值
• CLS 对应 type: 'layout-shift'，要累加所有 entry 的 value（不是取最后一次）
• CLS 条目可能在页面卸载前持续发生，建议在 visibilitychange 为 hidden 时汇总上报

FCP 不能直接监听，得靠 performance.getEntriesByName()

PerformanceObserver 不支持 paint 类型的实时监听（Chrome 120+ 才开始实验性支持），所以更稳妥的方式是：在 load 事件后主动查表。