跳到主要内容

指标

性能监控​

尽可能采集页面展示过程 以及后续用户交互中 产出的性能指标 和发生的异常事件 并上报到平台完成消费

核心 Web 指标​

  • FP（FirstPaint）

  • FCP FCP（First Contentful Paint）：白屏时间（第一个文本绘制时间）

  • Largest Contentful Paint (LCP) 最大内容绘制，应在页面首次加载后的 2.5s 内发生

  • FMP(First Meaningful Paint)

  • Speed Index：首屏时间，页面可视区域的加载速度，要关注速度是否平稳，体验更好

  • TTI（Time To Interactive）: 第一次可交互的时间

  • First Input Delay (FID) 首次输入延迟，应在 100ms 或更短

  • Cumulative Layout Shift(CLS) 累计布局偏移，页面加载完，元素的移动程度，应保持在 0.1 或更少

  • TBT（Total Block Time）总阻塞时间，是 FCP 到 TTI 间所有长任务（在主线程运行超过 50ms 的任务）的阻塞时间综合

  • FPS

这些指标大多可以用 performance API 获取

  1. Windows.performance
  2. window.performanceObserver (在浏览器性能时间轴上有新数据时会订阅通知)

推荐工具 Lighthouse & Chrome Devtools​

lighthouse score（performance）：Chrome 浏览器审查工具性能评分（也可以 npm install -g lighthouse，编程式调用）