必须将Web Vitals指标与业务上下文绑定后聚合分析，否则原始数值无法支撑决策：需在sendToAnalytics中强制注入页面、用户、环境三类维度，并对INP做缓冲聚合、LCP/CLS做归因归一化。
直接用 web-vitals 库上报原始指标值，无法支撑业务决策——你需要把 LCP、CLS、INP 和业务上下文（如页面类型、用户身份、渠道来源）绑定后聚合分析，否则大盘只会显示一堆孤立数字。
为什么不能只上报 onLCP / onCLS 的原始 value
原始指标脱离上下文就失去业务意义。比如 CLS: 0.12 看似略超阈值，但如果它集中在「用户填写表单页」且伴随「提交按钮突然下移」，那这就是高危体验缺陷；而同样数值出现在「纯图文列表页」可能只是广告位加载抖动，优先级完全不同。
- 指标本身不带维度：默认回调函数只传
metric.value和metric.id，没有页面路径、设备类型、登录状态等关键标签 - 服务端无法下钻：监控平台收到裸数值后，没法按「新用户 vs 老用户」或「iOS vs Android」切片对比
- 报警误触发：未过滤机器人流量或自动化测试行为，
onINP可能因 Puppeteer 快速点击产生大量虚假高值
必须在 sendToAnalytics 中注入业务维度
所有上报逻辑必须封装进统一的发送函数，且强制携带至少三类字段：页面标识、用户分群、环境特征。不要在每个 onLCP 回调里重复拼接。
- 页面维度：
window.location.pathname+document.querySelector('[data-page-id]')?.dataset.pageId（用于区分同路由不同 AB 实验） - 用户维度：
getUserId()（需兼容未登录场景，用 device_id 或 session_id 替代） - 环境维度：
navigator.userAgent解析出os、browser、isWebView，再加document.visibilityState === 'visible'过滤后台标签页
示例代码片段：
function sendToAnalytics(metric) {
const pageId = document.querySelector('[data-page-id]')?.dataset.pageId || 'unknown';
const userId = getUserId() || getDeviceId();
const env = parseUserAgent(navigator.userAgent);
fetch('/api/perf', {
method: 'POST',
body: JSON.stringify({
metric: metric.name,
value: metric.value,
pageId,
userId,
os: env.os,
browser: env.browser,
isForeground: document.visibilityState === 'visible'
})
});
}
注意 onINP 的上报时机和聚合逻辑
onINP 不像 onLCP 那样只触发一次——它会在页面生命周期内持续捕获交互事件，最终返回一个代表「最差交互体验」的汇总值。但业务大盘需要的不是单点极值，而是分布水位线（如 P95 INP）。
- 别在回调里直接上报：
onINP((metric) => sendToAnalytics(metric))会导致高频打点，且丢失中间过程 - 改用缓冲收集：内部维护一个数组，每 30 秒或累计 10 条后计算
Math.max(...values)和percentile(values, 95)再上报 - 过滤无效交互：跳过
metric.entries.some(e => e.name === 'pointermove')的轨迹类事件，聚焦 click/touch/key 等真实意图操作
CLP 和 LCP 的采样偏差必须主动控制
LCP 值受资源加载顺序影响极大，同一页面在弱网下可能触发不同元素作为最大内容（比如图片 fallback 成文字），导致数据波动。CLS 同理，动态插入的广告/推荐位会显著抬高分数。
- 对 LCP 元素做归一化：上报时额外带上
metric.element?.tagName和metric.element?.getAttribute('data-lcp-candidate')，便于后续识别是否因图片未加载导致标题成为 LCP - 对 CLS 按偏移源分类：用
entry.sources?.map(s => s.node?.nodeName)提取偏移源头（如IFRAME、IMG），而不是只看总和 - 排除已知干扰：硬编码过滤掉埋点 SDK 自身注入的
div[data-tracker]引起的 layout shift
真正难的不是采集指标，而是让每个数字背后都可解释、可归因、可行动。业务大盘的价值，取决于你敢不敢在 sendToAnalytics 里塞进多少真实业务逻辑，而不是依赖监控平台后期补维度。
