杨森 把前端性能监控做到极致

1. 把前端性能监控做到极致 杨森 蚂蚁⾦金金服数据技术专家
2. 杨森 Senior Data Engineer • 蚂蚁⾦金金服数据技术专家(原前端技术专家) • W3C Web Performance Working Group 成员 • 阿⾥里里巴巴集团实时监控平台 Clue 创始⼈人 • • 曾参与业务数据分析产品、数据分析 BI ⼯工具、 智能数仓引擎等多种类型数据产品的开发与 前端架构⼯工作,有丰富的数据处理理经验 jasonslyvia@GitHub
3. • 前端性能监控两驾⻢马⻋车 • 真实⽤用户性能数据(RUM)采集⽅方案 • 准确分析性能数据及影响因素 • 性能数据助⼒力力产品优化
4. 前端性能监控是⼀一项「贵族运动」
5. 业务发展的三个阶段 富裕 ⼩小康 温饱 • 快速落地业务 业务查漏漏补缺 重视⽤用户体验 • 解决关键痛点 解决⽅方案完整 细节决定成败
6. • 前端性能监控两驾⻢马⻋车 • 真实⽤用户性能数据(RUM)采集⽅方案 • 准确分析性能数据及影响因素 • 性能数据助⼒力力产品优化
7. 前端性能监控两驾⻢马⻋车 • 合成监控(Synthetic Monitoring,SYN) performance accessibility best practices SEO… https://example.com 提交审计⽬目标 运⾏行行审计功能 查看审计结果
8. 前端性能监控两驾⻢马⻋车 查看审计结果 运⾏行行审计功能 提交审计⽬目标 使⽤用 Lighthouse 命令⾏行行⼯工具对淘宝⾸首⻚页进⾏行行合成性能测试
9. 前端性能监控两驾⻢马⻋车 Google Lighthouse 系统架构图 来源:Lighthouse Github repo
10. 前端性能监控两驾⻢马⻋车 • 合成监控(SYN)的优缺点 👍 优点 👎 缺点 实现简单,解决⽅方案成熟 合成条件配置复杂,⽆无法全部还原真实场景 能采集到更更丰富的数据,如硬件指标或瀑布图 登录等场景需要额外解决 不不影响真实⽤用户的访问性能 单次运⾏行行数据不不够稳定 可以提供⻚页⾯面加载幻灯⽚片等可视化分析途径 数据量量较⼩小,⽆无法发挥更更⼤大价值 * 以上「⽆无法」均指技术上较难实现或成本较⼤大
11. 前端性能监控两驾⻢马⻋车 • 真实⽤用户监控(Real User Monitoring,RUM) https://taobao.com 真实⽤用户访问 提取性能指标 监控平台 /beacon 数据清洗加⼯工 性能分析监控
12. 前端性能监控两驾⻢马⻋车 ⼀一条典型的前端性能⽇日志请求
13. 前端性能监控两驾⻢马⻋车 • 真实⽤用户监控(RUM)的优缺点 👍 优点 👎 缺点 ⽆无需配置模拟条件,完全还原真实场景 ⼀一定程度影响真实⽤用户的访问性能及流量量消耗 不不存在登录等需要额外解决的场景 ⽆无法采集硬件相关指标 数据样本⾜足够庞⼤大,可以减少统计误差 受传输限制⽆无法采集完整的资源加载瀑布图 性能数据可与其他数据关联产⽣生更更⼤大价值 ⽆无法可视化展示⻚页⾯面加载过程 * 以上「⽆无法」均指技术上较难实现或成本较⼤大
14. 前端性能监控⽅方案对⽐比 对⽐比项 合成监控 SYN 真实⽤用户监控 RUM 实现难度及成本 较低 较⾼高 采集数据丰富度 丰富 基础 数据样本量量 较⼩小 ⼤大(视业务体量量) 适合场景 ⽀支持团队⾃自有业务,对性能做 作为中台产品⽀支持前台业务, 定性分析,或配合 CI 做⼩小数据 对性能做定量量分析,结合业务 量量的监控分析 数据进⾏行行深度挖掘
15. • 前端性能监控两驾⻢马⻋车 • 真实⽤用户性能数据(RUM)采集⽅方案 • 准确分析性能数据及影响因素 • 性能数据助⼒力力产品优化
16. 真实⽤用户性能数据(RUM)采集⽅方案 • 使⽤用标准的API • 定义合适的指标 • 采集正确的数据 • 上报关联的维度
17. 真实⽤用户性能数据(RUM)采集⽅方案 • 使⽤用标准的API performance.timing
18. 真实⽤用户性能数据(RUM)采集⽅方案 • 使⽤用标准的API * performance.timing 已废弃 • • • * ⻅见 MDN PerformanceTiming
19. 真实⽤用户性能数据(RUM)采集⽅方案 • 使⽤用标准的API Navigation Timing Level 2 1 Server Timing Resource Timing Level 2 Paint Timing Level 2 Frame Timing Long Task API Level 1 Performance Timeline Level 2 High Resolution Time Level 2 Web Performance 相关 specs ⼀一览 User Timing Level 2 …
20. 真实⽤用户性能数据(RUM)采集⽅方案 • 使⽤用标准的API —— High Resolution Time, HRTime 1秒 = 1,000毫秒 = 1,000,000微秒 = 1,000,000,000纳秒
21. 真实⽤用户性能数据(RUM)采集⽅方案 • 使⽤用标准的API —— High Resolution Time, HRTime
22. 真实⽤用户性能数据(RUM)采集⽅方案 • 使⽤用标准的API
23. 最佳实践1: 采集性能数据时先抹平 Navigation Timing spec 差异,优先使⽤用 Performance Timeline API
24. 真实⽤用户性能数据(RUM)采集⽅方案 • 定义合适的指标 🤠:⻚页⾯面性能怎么样? 🤔:反正打开挺快的…
25. 真实⽤用户性能数据(RUM)采集⽅方案 定义合适的指标 • ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ⻚页⾯面加载时⻓长(Page Load Time, PLT) ⾸首屏加载时⻓长(Above-the-Fold Time, AFT) DOM Ready 时⻓长 DOM Complete 时⻓长 DOM Interactive 时⻓长 ⾸首字节等待时⻓长(Time to First Byte, TTFB) ⾸首次渲染时⻓长(First Paint) ⾸首次内容渲染时⻓长(First Contentful Paint) ⾸首次有效渲染时⻓长(First Meaningful Paint) ✴ ⾸首次可交互时⻓长(First Interactive) ✴ ⾸首次 CPU 空闲时⻓长(First CPU Idle) Speed Index Perceptual Speed Index Last Painted Heros Paint Phase Timing 开始渲染(Start Render) ✴ ✴ ✴ ✴ ✴ ✴ ✴ 视觉完整时间(Visually Complete) ……
26. 真实⽤用户性能数据(RUM)采集⽅方案 • ⻚页⾯面加载时⻓长 Page Load Time `load` 事件触发完成
27. 真实⽤用户性能数据(RUM)采集⽅方案 • ⻚页⾯面加载时⻓长 load 淘宝⾸首⻚页⻚页⾯面加载时⻓长
28. 真实⽤用户性能数据(RUM)采集⽅方案 • ⻚页⾯面加载时⻓长 load 淘宝⽹网⻚页⾯面加载时⻓长-4x慢放-局部
29. 真实⽤用户性能数据(RUM)采集⽅方案 • ⻚页⾯面加载时⻓长 load 淘宝⽹网⻚页⾯面加载-异常情况
30. 真实⽤用户性能数据(RUM)采集⽅方案 • ⻚页⾯面加载时⻓长 load 异常情况 正常情况
31. 真实⽤用户性能数据(RUM)采集⽅方案 • ⻚页⾯面加载时⻓长 Page Load Time `load` 事件触发完成 优点 • • • 原⽣生 API 接受度⾼高 感知明显(浏览器器 Tab 停⽌止 loading) 缺点 • • ⽆无法准确反映⻚页⾯面加载性能 易易受特殊情况影响
32. 真实⽤用户性能数据(RUM)采集⽅方案 • ⾸首次渲染/⾸首次内容渲染 First Paint & First Contentful Paint ⾸首次渲染:第⼀一个⾮非⽹网⻚页背景像素渲染 ⾸首次内容渲染:第⼀一个⽂文本、图像、背景图⽚片或⾮非⽩白⾊色 canvas/SVG 渲染 Navigation Timing Server Timing Resource Timing Paint Timing Level 2 Frame Timing Long Task API Level 1 Performance Timeline Level 2 High Resolution Time Level 2 User Timing Level 2 …
33. 真实⽤用户性能数据(RUM)采集⽅方案 • ⾸首次渲染&⾸首次内容渲染 fp&fcp First Paint: 6.713 s First Contentful Paint: 6.713 s
34. 真实⽤用户性能数据(RUM)采集⽅方案 • ⾸首次渲染&⾸首次内容渲染 fp&fcp ~ 70% 的情况下 First Paint 与 First Contentful Paint 相差 ⼩小于 100ms
35. 真实⽤用户性能数据(RUM)采集⽅方案 • ⾸首次渲染/⾸首次内容渲染 First Paint & First Contentful Paint ⾸首次渲染:第⼀一个⾮非⽹网⻚页背景像素渲染 ⾸首次内容渲染:第⼀一个⽂文本、图像、背景图⽚片或⾮非⽩白⾊色 canvas/SVG 渲染 优点 • • 原⽣生 API 衡量量内容渲染时间,更更贴近⽤用户感知 缺点 • • 像素渲染不不代表⽤用户看⻅见有效内容 ⼤大多数时候两个指标差异不不⼤大
36. 真实⽤用户性能数据(RUM)采集⽅方案 • ⾸首次有效渲染 First Meaningful Paint ⻚页⾯面结构发⽣生剧烈烈变动 (详细算法)
37. 真实⽤用户性能数据(RUM)采集⽅方案 • ⾸首次有效渲染 fmp
38. 真实⽤用户性能数据(RUM)采集⽅方案 • ⾸首次有效渲染 First Meaningful Paint DOM 结构发⽣生剧烈烈变动 (详细算法) 优点 • • 相对校准的估算出内容渲染时间 贴近⽤用户感知 缺点 • • ⽆无原⽣生 API ⽀支持 算法推导时 DOM 节点不不含权重
39. 真实⽤用户性能数据(RUM)采集⽅方案 • 开始渲染 Start Render ⾁肉眼能观察到的⻚页⾯面内容发⽣生变化的时间 优点 • 最直观、准确反映界⾯面发⽣生变化的指标 缺点 • 由于使⽤用逐帧对⽐比技术,⽆无法在 RUM 场景使⽤用
40. 真实⽤用户性能数据(RUM)采集⽅方案 • 开始渲染 SR 定义 • ⾁肉眼能观察到的内容渲染 优点 • 最直观、准确反映界⾯面发⽣生变化 的指标 缺点 • 由于使⽤用逐帧对⽐比技术,⽆无法在 RUM 场景使⽤用
41. 真实⽤用户性能数据(RUM)采集⽅方案 定义合适的指标 • ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ⾸首次可交互时⻓长(First Interactive) ⻚页⾯面加载时⻓长(Page Load Time, PLT) 性能指标类型 👍 优点 👎 缺点 🤠 典型代表 ✴ ⾸首次 CPU 空闲时⻓长(First CPU Idle) ⾸首屏加载时⻓长(Above-the-Fold Time, AFT) DOM Ready 时⻓长 ✴ Speed Indexload、dom ready、 DOM 相关 兼容性⾼高,易易采集 ⽆无法准确反映性能 ✴ Perceptual Speed Index DOM Complete 时⻓长 dom complete ✴ Last Painted Heros DOM Interactive 时⻓长 部分场景⽆无法准确反映 Spec 相关 官⽅方⽀支持,相对易易采集 fp、fcp ✴ Paint Phase Timing ⾸首字节等待时⻓长(Time to First Byte, TTFB) 性能 ✴ 开始渲染(Start Render) ⾸首次渲染时⻓长(First Paint) 兼容性⾼高,易易采集,相 部分场景存在计算误差 算法相关 fmp、speed index ✴ 视觉完整时间(Visually Complete) ⾸首次内容渲染时⻓长(First Contentful 对准确 Paint) 情况 ✴ …… ⾸首次有效渲染时⻓长(First Meaningful Paint) 视觉相关 最直观的反馈⻚页⾯面加载 ⽆无法通过 RUM ⽅方式采 性能 集 start render、visual complete
42. 最佳实践2: 根据业务特性及性能监控⽅方案选择最适合的性 能指标,必要情况下可使⽤用⾃自定义性能点位
43. 真实⽤用户性能数据(RUM)采集⽅方案 • 采集正确的数据
44. 真实⽤用户性能数据(RUM)采集⽅方案 • 采集正确的数据 - 不不同阶段之间是连续的吗?
45. 真实⽤用户性能数据(RUM)采集⽅方案 • 采集正确的数据 - 不不同阶段之间是连续的吗? • • • • 同域名 TCP 连接并发限制 浏览器器正在分配缓存空间 当前有更更⾼高优先级请求正在处理理 ……
46. 真实⽤用户性能数据(RUM)采集⽅方案 • 采集正确的数据 - 每个阶段都⼀一定会发⽣生吗?
47. 最佳实践3: 上报⻚页⾯面加载开始时间,以及后续各时间点相 对增量量,在数据端进⾏行行阶段清洗和异常处理理
48. 真实⽤用户性能数据(RUM)采集⽅方案 • 上报关联的维度 常规维度 专业维度 时间 ⻚页⾯面是否可⻅见 是否启⽤用 Service Worker ⻚页⾯面 浏览器器 ⻚页⾯面加载⽅方式 是否启⽤用 HTTP/2 或 SPDY 操作系统 地理理位置 等效⽹网络连接类型 是否启⽤用 GZIP 压 缩 …
49. • 前端性能监控两驾⻢马⻋车 • 真实⽤用户性能数据(RUM)采集⽅方案 • 准确分析性能数据及影响因素 • 性能数据助⼒力力产品优化
50. 准确分析性能数据及影响因素
51. 准确分析性能数据及影响因素 • ⻓长尾数据从何⽽而来 浏览器器 CDN ⽹网络 硬件 服务端 Web 性能 缓存
52. 准确分析性能数据及影响因素 • 意想不不到的性能影响因素 ✴ Tab 可⻅见状态 ✴ ⻚页⾯面加载⽅方式(打开、前进后退、刷新) ✴ Service Worker ✴ …
53. 准确分析性能数据及影响因素 • 数据是如何「撒谎」的 95 分位数 平均数 10% 截尾平均数
54. 最佳实践4: 分析性能指标时建议关注百分位数(percentile), 对性能的要求越⾼高,使⽤用越⼤大的百分位数
55. • 前端性能监控两驾⻢马⻋车 • 真实⽤用户性能数据(RUM)采集⽅方案 • 准确分析性能数据及影响因素 • 性能数据助⼒力力产品优化
56. 性能数据助⼒力力产品优化 蚂蚁⾦金金服体验分析产品 九⾊色⿅鹿
57. 性能数据助⼒力力产品优化 性能数据助⼒力力蚂蚁⾦金金服中 后台产品体验升级