Lighthouse自定义指标是通过User Timing API在页面中插入以user-开头的mark和measure，用于监控特定业务逻辑耗时。开发者可在性能报告中查看这些指标，结合CI/CD实现持续性能追踪，确保关键路径性能可控可优化。
在现代前端开发中，页面性能直接影响用户体验和业务指标。Lighthouse 作为 Google 推出的开源工具，不仅能对网页进行性能、可访问性、SEO 等方面的审计，还支持通过自定义指标来监控 JavaScript 执行过程中的关键性能节点。借助自定义指标，开发者可以更精准地衡量应用中特定逻辑的耗时，比如首屏内容渲染时间、某个关键 API 请求完成时间等。
什么是Lighthouse自定义指标？
Lighthouse 默认提供诸如 First Contentful Paint (FCP)、Largest Contentful Paint (LCP) 等核心 Web 指标，但这些通用指标可能无法覆盖业务层面的关键时刻。Lighthouse 支持通过 User Timing API 注入自定义测量（mark 和 measure），并在报告中展示为“自定义指标”。
这些指标不会影响 Lighthouse 的评分，但会出现在“Performance”部分，帮助你长期追踪特定行为的性能变化。
如何定义和使用自定义指标？
要让 Lighthouse 识别并展示自定义指标，需在页面加载过程中使用 performance.mark() 和 performance.measure() 创建时间标记，并以特定命名格式声明。
立即学习“Java免费学习笔记（深入）”；
按照 Lighthouse 规范，自定义指标必须以 user- 开头，例如：user-cs-start、user-cs-end。Lighthouse 会自动将配对的开始与结束标记计算为持续时间，并显示在报告中。
示例：监控首页商品列表渲染完成时间
// 标记开始
performance.mark('user-product-list-start');
// 假设这里是异步请求 + 渲染逻辑
fetch('/api/products')
.then(res => res.json())
.then(products => {
renderProductList(products);
// 标记渲染完成
performance.mark('user-product-list-end');
// 创建测量
performance.measure(
'user-product-list',
'user-product-list-start',
'user-product-list-end'
);
});
只要这些 performance 调用在页面加载早期执行（通常在 onload 前），Lighthouse 就会在审计结果中显示名为 “User Timing: product-list” 的指标，值为对应 measure 的毫秒数。
在CI/CD中集成自定义指标监控
为了持续关注性能趋势，可结合 Puppeteer 或 Chrome DevTools Protocol 在无头浏览器中运行 Lighthouse，并提取自定义指标数据。
常见做法：
- 使用 Node.js 脚本启动 Chrome 并加载目标页面
- 等待页面完全加载并触发所有 performance.measure
- 调用 Lighthouse 进行审计，输出 JSON 结果
- 从 report.audits['user-timings'] 中提取自定义指标
- 将数据上传至监控系统或对比基线阈值
这样可以在每次构建后自动检测关键路径是否变慢，及时发现性能退化。
注意事项与最佳实践
自定义指标虽灵活，但也需注意以下几点：
- 确保 mark 名称符合 user-* 命名规则，否则不会被识别
- 避免在 Service Worker 或非主文档上下文中打点，Lighthouse 主要采集主页面 performance timeline
- 尽量在真实用户场景下测试，避免 mock 数据导致测量失真
- 不要创建过多 measure，以免增加内存开销和报告复杂度
- 配合其他指标（如 TTFB、LCP）综合分析，避免孤立解读
基本上就这些。通过合理使用 Lighthouse 自定义指标，你可以把业务逻辑的关键路径纳入性能监控体系，真正做到“可观测、可量化、可优化”。
