1. 背景

在如今的数字时代，网站和应用程序的性能对用户体验至关重要。用户希望快速加载的页面和流畅的交互，而web前端性能监控是确保这一目标实现的关键。了解关键指标有哪些，对优化web前端性能而言至关重要。

2. 业界方案

2.1 腾讯

参考：腾讯前端团队是如何做web性能监控的？

• Google开发者提出的指标；
• Lighthouse、PageSpeed等性能检测工具；
• performance收集用户真实数据；
• 收费类sdk集成到前端收集用户真实数据；

2.2 蚂蚁金服

参考：蚂蚁金服如何把前端性能监控做到极致?

• 合成监控（Synthetic Monitoring，SYN），用的Lighthouse
• 真实用户监控（Real User Monitoring，RUM），使用performance
• 定义的指标跟Google指标类似

2.3 字节跳动

参考：应用性能前端监控，字节跳动这些年经验都在这了

• Web Vitals 定义了 LCP、FID、CLS 指标

基于长期以来的体验指标优化积累，最新的核心体验指标主要专注于加载、交互、视觉稳定，加载的速度决定用户是否可以尽早访问到视觉上的图像，可交互的速度则决定用户心理上是否可以尽快感觉页面上的元素可以操作，而视觉稳定性则负责衡量页面的视觉抖动对用户造成的负面影响。

2.4 美团

参考：美团性能分析框架和性能监控平台

• 主文档加载速度，利用 Navigation Timing API 取得；
• 静态资源加载速度，利用 Resource Timing API 取得；
• 首次渲染速度，IE 下用 msFirstPaint 取得，Chrome 下利用 loadTimes 取得，我们的 Chrome 浏览器用户占比超过 70%；
• 文档生成速度，则是在后端应用内打点来获得；

3. 相关观念

3.1 RAIL模型

参考：使用 RAIL 模型衡量性能

RAIL 的含义是 Response响应、Animation动画、Idle空闲、Load加载，分别代表着 web 应用生命周期的四个不同方面。

RAIL 是一种以用户为中心的性能模型，提供考虑性能的结构。该模型会将用户体验细分为关键操作（例如点按、滚动、加载），并帮助开发者为每项操作定义性能目标。

3.2 性能指标

参考：核心网页指标

Google 开发者针对用户体验，提出的几个性能指标：

• LCP (Largest Contentful Paint) ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。
• INP (Interaction to Next Paint)：衡量互动。为了提供良好的用户体验，网页的 INP 应不超过 200 毫秒。
• CLS (Cumulative Layout Shift) ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。

文中还介绍说明了一些 其他指标。

• FID (First Input Delay) ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
• FCP (First Contentful Paint)首次内容绘制，指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。
• TTFB (Time To First Byte)，是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了 TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。

3.3 真实用户监控

真实用户监控是一种被动监控技术，是一种应用服务，被监控的 web 应用通过 sdk 等方式接入该服务，将真实的用户访问、交互等性能指标数据收集上报、通过数据清洗加工后形成性能分析报表。例如 FrontJs、oneapm、Datadog 等。
(遗憾的是这几种sdk基本上都是收费的)

web-vitals也算是真实用户监控的一种。

优点：

• 是真实用户访问情况。
• 可以观察历史性能趋势。
• 有一些额外的功能：报表推送、监控告警等等。

缺点：

• 有侵入性，会一定程度上响应 web 性能。

3.4 performance

参考： MDN Web Docs 社区 Performance

在讲如何监控之前，先来看看浏览器提供的 performance api，这也是性能监控数据的主要来源。
performance 提供高精度的时间戳，精度可达纳秒级别，且不会随操作系统时间设置的影响。
目前市场上的支持情况：主流浏览器都支持，大可放心使用。

真实用户监控上报的注意事项： 参考文档 如何进行 web 性能监控？

• 耗时统计使用 performance.now()，而不是 Date()，因为Date会依赖系统时间，修改了系统时间后，统计数据就不对了；更多的是performance从定义开始就是高精度
• 数据上报使用navigator.sendBeacon，不要用Ajax等其他库，sendBeacon不会阻塞页面或者其他；

4. 性能监控工具介绍

工具	适用方式	分析
PageSpeed Insights 网页速度测量工具 PSI	PSI 可在网页上使用； 也可作为API使用；	并不是通过打点、监控上报的方式，作为页面性能分析工具很强大；
搜索控制台 Google Search Console	非常适合用来识别需要改进的特定页面。与 PageSpeed Insights 不同，搜索控制台的报告包括历史性能数据。	（针对您拥有并已验证所有权的网站使用搜索控制台）没有尝试
CrUX 仪表板	跟PSI类似；同时可以结合一些工具去做数据上报到Google后台。	报告包含更多维度，数据可以按设备和连接类型进行细分。维度包括2G/3G等
Web 指标 Chrome 扩展程序	直接Chrome启动扩展程序观测；	可以进行在本机简单的性能分析；无法查看其他用户和历史数据；
Lighthouse灯塔 推荐	扩展程序；命令行工具，可集成到持续集成系统	有不少基于这个的收费服务，做监控的; 报告很强大，能产生很多优化建议；
WebPageTest 网页性能测试工具	网页上输入网址测试；	官网排队等待太慢了
Pingdom	不仅提供合成监控，也提供真实用户监控。	优点：无侵入性；简单快捷。 缺点：不是真实的用户访问情况，只是模拟的；没法考虑到登录的情况，对于需要登录的页面就无法监控到。
web-vitals （js库）推荐	直接在前端项目里加载直接收集指标数据；上报的后端有多种方式；	简单的代码开发进行收集上报；在单页面应用上有局限性；

5. 推荐采用方案

针对不同服务带来的不同场景，可参考自身需求选择对应工具，这里推荐如下做法：

• 使用web-vitals （js库）在前端采集真实用户监控，收集 LCP、INP、CLS；
• 针对性的对关键页面，通过Lighthouse插件手动生成性能报告；

采集指标数据可以还包含以下数据，便于我们更好的分析页面和用户行为的关系：

• navigator.userAgent 用户浏览器信息
• navigator.platform 设备
• location: origin, pathname, hash, href 地址栏信息
• user用户唯一标识
• client ip 客户端IP