背景

前端性能优化如果只看本地 Lighthouse，经常和真实线上体验有偏差。

最小落地

  1. 采集 LCP/INP/CLS
  2. 上报到日志或指标平台
  3. 按页面和地区分桶观察
import { onLCP, onCLS, onINP } from 'web-vitals'

onLCP(metric => report(metric))
onCLS(metric => report(metric))
onINP(metric => report(metric))

总结

性能优化要闭环：采集真实数据 -> 定位问题 -> 验证回归。

没有真实用户数据，优化很容易变成自我感动。