性能数据从哪来
位置:「监测 › 性能」。
数字来自访客浏览器里真实的页面加载,不是实验室里的跑分。访客离开首屏时,脚本把几项耗时汇总上报一次。默认就是开的,脚本上写 data-vitals="false" 可以关掉。
五项指标和阈值
| 指标 | 良好(不超过) | 较差(超过) | 说的是什么 |
|---|---|---|---|
| 最大内容绘制(LCP) | 2.5 秒 | 4 秒 | 主要内容多久显示出来 |
| 交互到下一次绘制(INP) | 200 毫秒 | 500 毫秒 | 点了之后多久有反应 |
| 累积布局偏移(CLS) | 0.1 | 0.25 | 加载过程中页面跳了多少 |
| 首次内容绘制(FCP) | 1.8 秒 | 3 秒 | 第一个像素多久出来 |
| 首字节时间(TTFB) | 800 毫秒 | 1.8 秒 | 服务器多久开始响应 |
介于两者之间的算「需改进」。
看 P75 还是中位数
卡片可以在 P95、P75、中位数和平均值之间切换。
- 中位数:一半访客比这个快,一半比这个慢。
- P75:四分之三的访客比这个快。它更接近「偏慢的那批人」的体验,也是业内通常用来判断达标的口径。
我们建议日常看 P75。平均值容易被极少数特别慢的访问拉高,参考价值有限。
找出慢在哪
- 先看各项的 P75 和「良好」占比。
- 按页面分组,找出 P75 最差的几个路径。报表里还有一张按 P75 最大内容绘制排序的「最慢页面」。
- 再按设备、国家、浏览器分组看是不是集中在某一类访客身上。比如只有某个地区慢,往往是 CDN 节点的问题。
- 「加载拆分」把一次加载分成后端响应、网络传输和前端渲染三段,能看出该找后端还是前端。
样本少的页面,分位数会上下跳,别因为一两天的波动就下结论。
打开错误监控
位置:「监测 › 错误」。
错误监控默认不开,要在脚本上加 data-errors="true",脚本会额外加载一个很小的错误采集文件:
<script defer src="https://static.pathclue.com/client.js" data-site="你的站点标识" data-errors="true"></script>
打开后能看到:错误次数、错误率(错误次数 ÷ 浏览量)、受影响的访客和会话;错误按信息分组,每组可以标成「已解决」或「已忽略」,展开能看到每一次发生的时间、页面、地区、设备,并直接打开那次会话。
挫败点击
开了全埋点之后,错误页下方还有一张「挫败点击」表:
- 怒点:同一个元素 500 毫秒内被点了 3 次以上,通常是按钮没反应。
- 错误点击:点击后 1 秒内出现了脚本错误。
页面至少有 20 次浏览才会进入这张表。它和热力图放在一起看效果最好,能直接看到用户在哪里反复点。
相关
- 监控和告警:错误率突然升高时自动通知你。
- Web Vitals 功能介绍