页面性能监控

页面性能监控

接入方式

const aegis = new Aegis({
  id : 'xxxx',
  appKey: 'xxxxxxx',
  plugin: {
    webVitals: true,
  },
})

监控指标

Web Vitals核心指标

• FCP (First Contentful Paint): 首次内容绘制时间，衡量页面首次渲染任何文本、图像、非空白canvas或SVG的时间（单位：ms）
• LCP (Largest Contentful Paint): 最大内容绘制时间，衡量页面最大可见元素加载完成的时间（单位：ms）
• CLS (Cumulative Layout Shift): 累积布局偏移，衡量页面视觉稳定性，分数越低表示页面越稳定（单位：无）
• INP (Interaction to Next Paint): 交互到下一次绘制时间，衡量页面对用户交互的响应速度（单位：ms）

数据采集机制

• 触发时机：页面隐藏时自动上报（onHidden事件）

数据格式示例

{
  "type": "WEB_VITALS",
  "msg": "Web Vitals数据上报",
  "FCP": 1200,
  "LCP": 2500,
  "CLS": 0.05,
  "INP": 150
}