监控 Core Web Vitals
需要 v3.1.0
跟踪直接从访问者浏览器收集的真实用户性能指标。Umami 捕获 Core Web Vitals 和其他性能信号，以便您识别缓慢的页面并发现回归问题。
步骤 1：启用性能跟踪
将 data-performance 属性添加到您的跟踪脚本中：
<script
defer
src="https://your-umami.example.com/script.js"
data-website-id="your-website-id"
data-performance="true"
></script>Umami 开始从真实访问者收集以下指标：
| 指标 | 测量内容 | 良好阈值 |
|---|---|---|
| LCP (最大内容绘制) | 直到主要内容可见所需的时间 | ≤ 2.5s |
| INP (下一次绘制的交互) | 对用户交互的响应能力 | ≤ 200ms |
| CLS (累积布局偏移) | 视觉稳定性（意外的布局偏移） | ≤ 0.1 |
| FCP (首次内容绘制) | 直到首次可见内容出现的时间 | ≤ 1.8s |
| TTFB (首字节时间) | 服务器响应时间 | ≤ 0.8s |
步骤 2：查看性能数据
导航到您的网站并打开 性能 屏幕。您将看到：
- 指标卡片 显示每个指标的第 75 百分位 (p75) 值。p75 意味着 75% 的访问者体验到此值或更好。
- 分数指示器 基于 Google 的阈值：绿色（良好）、黄色（需要改进）、红色（差）。
- 页面细分 显示单个页面 URL 的性能。
- 环境细分 显示按浏览器、操作系统和设备类型划分的性能。
步骤 3：识别缓慢的页面
使用页面细分查找哪些页面的指标最差：
- 按 LCP 排序以查找加载缓慢的页面。
- 按 CLS 排序以查找存在布局偏移问题的页面（通常由没有尺寸的图片或动态内容注入引起）。
- 按 INP 排序以查找交互迟缓的页面（通常由繁重的 JavaScript 引起）。
步骤 4：诊断并修复问题
每个指标的常见原因和修复方法：
LCP (最大内容绘制)
- 原因：大型未优化图片、服务器响应缓慢、渲染阻塞资源。
- 修复：压缩图片、使用现代格式（WebP/AVIF）、为折叠下方的图片添加
loading="lazy"、预加载 LCP 元素。
INP (下一次绘制的交互)
- 原因：长时间运行的 JavaScript、大型 DOM 大小、昂贵的事件处理程序。
- 修复：拆分长任务、使用
requestAnimationFrame进行视觉更新、降低 DOM 复杂度。
CLS (累积布局偏移)
- 原因：没有尺寸的图片/广告、动态注入的内容、导致 FOIT/FOUT 的 Web 字体。
- 修复：始终为图片设置
width和height、为动态内容预留空间、使用font-display: swap。
步骤 5：跟踪改进
进行更改后，使用日期范围选择器比较修复前后的性能。性能数据是真实用户数据，因此它反映的是实际访问者体验，而不是合成实验室测试。
关注 p75 值：如果第 75 百分位有所改善，您就已经为大多数用户带来了有意义的影响。