这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
01开篇:为什么我们要聊前端监控
什么是前端监控
前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费
为什么需要前端监控
当我们的网页有了前端监控的能力
- 打开慢--页面某个关键资源渲染太慢
- 交互卡顿--页面同步计算任务太重,阻塞渲染
- 资源加载失败--客户端网络状态差,或上游服务节点异常
- 页面白屏--页面脚本执行失败,关键资源加载失败,请求失败等
前端监控通过对页面数据的采集和上报,来帮助开发者更快速的对质量差的页面进行分析与归因
案例:监控页面质量为什么那么重要
- 缤趣(图片社交分享网站)将感知等待时间减少了40%,这将搜索引擎流量和注册量增加了15%
- COOK(冷冻速食订购网站)将页面平均加载时间减少了850毫秒,从而将转化次数提高了7%,将跳出率降低了7%,并将每个会话的页面增加了10%
研究还表明,性能不佳会对业务目标产生负面影响,例如BBC发现他们的网站加载时间每增加一秒,他们就会失去10%的用户
前端监控到底监控了什么
性能指标
重要指标
可交互性
-
卡顿监控
通常由业务逻辑引起,关联用户行为可定位问题
-
请求性能
长期关注,异动分析,以此为基准衡量服务端性能
服务稳定性
-
请求成功率
主要关注页面级别和接口级别两个维度,需要具备衡量基准
加载速度
-
首屏性能
智能归因,根据timing各阶段耗时,明确得出可优化的阶段,指导优化
可用性
-
渲染错误/白屏
关联异常类数据,包括JS错误,静态资源错误,请求错误等等
-
请求错误
长期关注错误率的变更,衡量产品质量,短期关注波动,关联线上问题
-
JS错误
sourcemap反解&&issue管理
-
静态资源错误
拨测归因,着重展示能定位到问题的静态资源,降低噪音
业务数据
-
PV/UV
用户分析,留存,转化
-
自定义事件/打点
异常事件
用户行为
02概述:前端监控之常用性能指标
web性能标准的诞生
早期网页是纯静态的,但随着Web爆发式发展,页面交互越来越复杂,开发者开始思考如何提高Web性能,改善用户体验
因此2010年8月,W3C成立了Web性能工作组，由来自Google和Microsoft工程师担任主席，目标是制定衡量Web应用性能的方法和API
随后，Web性能工作组开始制定一系列Web性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征
传统的性能指标
主要依赖Navigation Timing或者Navigation Timing 2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时,以加载速度来衡量性能
以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节,但是他们很难反映出用户所真正关心的是什么,如果你仅仅是把加载速度优化的更快,你很快就会发现网站的用户体验依然很差
这就是创建用户为中心的性能指标的原因,他们专注于用户视角下的浏览体验
| 用户体验 | 指标 |
|---|---|
| 发生了吗 | FP(First Paint),FCP(First Contentful Paint) |
| 内容有用吗 | FMP(First Meaningful Paint),SI(Speed Index) |
| 内容可用吗 | TTI(Time to Interactive) |
| 令人愉悦吗 | FID(First Input Delay) |
- FP:首次渲染的时间点,FP时间点之前,用户看到的都是没有任何内容的白色屏幕
- FCP:首次有内容渲染的时间点
- FMP:首次绘制有意义内容的时间点
- TTI：测量页面从开始加载到主要子资源完成渲染，并能够快速，可靠的响应用户输入所需的时间
TTI反应页面可用性的重要指标,TTI值越小，代表用户可以更早的操作页面，用户体验就更好
- SI:衡量页面可视区域加载速度,帮助检测页面的加载体验差异
- FID:测量从用户第一次与页面交互(比如当他们单击链接,点按按钮等等)直到浏览器对交互做出响应,实际能够开始处理事件时处理程序所经过的时间
衡量用户体验过程的性能指标
| 用户体验 | 指标 |
|---|---|
| 发生了吗 | FP(First Paint),FCP(First Contentful Paint) |
| 内容有用吗 | FMP(First Meaningful Paint),SI(Speed Index),LCP(Largest Contentful Paint) |
| 内容可用吗 | TTI(Time to Interactive),TBT(Total Blocking Time) |
| 令人愉悦吗 | FID(First Input Delay),CLS(Cumulative Layout Shift) |
-
LCP:最大的内容在可视区域内变得可见的时间点
最大的元素,例如一篇文章中的一大段文字或产品页面上的一张图片,大概就是让你理解页面内容的最有用的元素
LCP优点：
- 容易理解
- 给出与FMP相似的结果
- 容易计算和上报
-
TBT:量化主线程在空闲之前的繁忙程度,有助于理解在加载期间,页面无法响应用户输入的时间有多久
长任务:如果一个任务在主线程上运行超过50毫秒,那么他就是长任务,超过50ms后的任务耗时,都算作任务的阻塞时间
一个页面的TBT,是从FCP到TTI之间所有长任务的阻塞时间的总和
-
CLS:量化了在页面加载期间,视口中元素的移动程度
当我们点击按钮时,突然出现了一块内容,无论是以一种意外增加点击几率的方式加载广告,还是在加载图片时文本向下移动,内容的意外移动都会让人非常不舒服
