网页性能和用户体验的关键指标
一、关键指标
1. FCP (First Contentful Paint) - 首次内容绘制
- 定义：从页面开始加载到页面主要内容（如文本、图片、非空白 canvas 等）首次被渲染的时间。
- 意义：用户看到页面开始“动起来”的时间，标志着加载过程的开始。
- 良好阈值：< 1.8 秒
2. LCP (Largest Contentful Paint) - 最大内容绘制
- 定义：记录视窗内最大内容元素（如大图、主标题、hero section）渲染完成的时间。
- 意义：衡量加载体验的核心指标，代表用户感知页面主要内容加载完成的时间。
- 良好阈值：< 2.5 秒
3. CLS (Cumulative Layout Shift) - 累积布局偏移
- 定义：衡量页面在加载过程中视觉稳定性的指标，计算所有意外布局偏移的总和。
- 公式：
CLS = 所有布局偏移分数的总和（偏移分数 = 影响范围 × 距离）
- 意义：防止元素“跳动”（如图片加载后突然下移内容），提升用户体验。
- 良好阈值：< 0.1
4. TTI (Time to Interactive) - 可交互时间
- 定义：页面从开始加载到完全可交互的时间点，即主线程空闲，能快速响应用户输入（如点击、输入）。
- 意义：衡量页面何时真正“可用”。
- 良好阈值：< 3.8 秒
5. FID (First Input Delay) - 首次输入延迟 ❌
- 定义：用户首次与页面交互（如点击按钮、链接）到页面实际开始处理该事件之间的时间延迟。
- 意义：衡量页面对用户输入的响应速度（受主线程阻塞影响）。
- 良好阈值：< 100 毫秒
- 注意：FID 已被 INP (Interaction to Next Paint) 逐步取代，作为新的响应性指标。
6. TBT (Total Blocking Time) - 总阻塞时间
- 定义：从 FCP 到 TTI 之间，所有长任务（Long Tasks > 50ms）的阻塞时间总和（每个长任务的阻塞时间 = 任务时长 - 50ms）。
- 意义：量化主线程被阻塞的程度，间接反映页面卡顿情况。
- 良好阈值：< 200 毫秒
7. FMP (First Meaningful Paint) - 首次有意义绘制 ❌
- 定义：页面主要内容首次渲染完成的时间点。
- 说明：FMP 是一个较早的指标，但由于算法复杂、可变性大，Google 已不再推荐使用，被 LCP 取代。
- 现状：已弃用，建议关注 LCP。
二、 📊 总结对比表
| 指标 | 中文名 | 衡量重点 | 良好阈值 | 状态 |
|---|
| FCP | 首次内容绘制 | 内容开始出现 | < 1.8s | 推荐 |
| LCP | 最大内容绘制 | 主要内容加载完成 | < 2.5s | 推荐 ✅ |
| CLS | 累积布局偏移 | 视觉稳定性 | < 0.1 | 推荐 ✅ |
| TTI | 可交互时间 | 页面完全可用 | < 3.8s | 推荐 |
| FID | 首次输入延迟 | 响应性（旧） | < 100ms | 被 INP 取代 |
| TBT | 总阻塞时间 | 主线程阻塞 | < 200ms | 推荐（实验室指标） |
| FMP | 首次有意义绘制 | 内容加载（旧） | - | 已弃用 ❌ |
三、 📌 四大核心指标
- LCP（加载性能）
- FID / INP（响应性）
- CLS（视觉稳定性）
- SEO 表现
四、 ✅ 性能监控工具
1. React Developer Tools
- 简介：React开发者工具，用于检查React组件树，并提供组件层级的渲染时间和更新频率等信息。
- 功能亮点：
- 组件层级结构查看
- 显示组件的“render”次数
- 提供Profiler工具来记录和分析组件的渲染性能
2. Chrome DevTools的Performance面板
- 分析记录的数据
- Overview部分：包括FPS(帧每秒)、CPU使用情况、NET(网络请求)以及堆栈信息。这有助于了解页面的整体性能状况。
- 火焰图(Flame Chart) ：展示了主线程上的所有活动，允许你查看每个函数调用所花费的时间。这对于识别性能瓶颈特别有用。
- Bottom-Up视图：按照消耗时间从低到高排列所有的函数调用，便于发现最耗时的任务。
- Call Tree视图：显示了按照调用顺序组织的性能数据，有助于理解哪些函数导致了较高的开销。
- Event Log：列出了所有记录的事件，包括脚本执行、样式计算、布局、绘制等，帮助深入分析页面行为。
- 其他功能
- Screenshots：如果启用，可以在概览图中看到页面加载过程中的视觉变化。
- Network：显示网络请求的时间线，有助于分析资源加载性能。
- Throttling：模拟不同的网络条件和设备性能，以测试页面在不同环境下的表现。
