性能指标与优化
性能指标把“页面很慢”拆成几个可以独立分析的问题：内容出现得慢、点击响应慢、页面布局不稳定、服务器响应慢，分别需要完全不同的优化方法。
先看核心 Web 指标
Google 当前定义的 Core Web Vitals 包括 LCP、INP 和 CLS。建议使用真实访问的第 75 百分位（P75）评估页面，并区分移动端与桌面端。
| 指标 | 体验维度 | 良好 | 需要改进 | 较差 |
|---|---|---|---|---|
| LCP | 加载性能 | ≤ 2.5 秒 | 2.5～4 秒 | > 4 秒 |
| INP | 交互响应 | ≤ 200 毫秒 | 200～500 毫秒 | > 500 毫秒 |
| CLS | 视觉稳定性 | ≤ 0.1 | 0.1～0.25 | > 0.25 |
以上区间来自 Web Vitals 官方说明。阈值适合用作统一基线，但最终仍应结合你的业务页面和用户设备分布判断。
LCP：主要内容多久出现
Largest Contentful Paint 表示视口中最大的内容元素完成渲染的时间，通常对应主图、Banner 或主要文字块。它接近用户对“页面主要内容是否已经出来”的感受。
LCP 较高时优先检查：
- 首屏大图是否过大，是否使用现代格式、响应式尺寸和预加载
- 关键资源是否被 CSS、字体或同步 Script 阻塞
- 服务端 TTFB 是否过高
- 首屏内容是否依赖客户端请求和大量 JavaScript 才能渲染
- CDN、缓存和资源域名连接是否合理
INP：交互是否及时响应
Interaction to Next Paint 衡量用户点击、触摸或键盘交互到下一次视觉更新之间的延迟。数值高时，用户会感觉按钮“点了没反应”或输入卡顿。
INP 较高时优先检查：
- 是否存在超过 50 毫秒的长任务
- 点击处理函数是否同步执行了大量计算
- Vue/React 更新是否一次触发过大的组件树渲染
- 第三方脚本是否长期占用主线程
- 是否可以拆分任务、延迟非关键工作或使用 Web Worker
CLS：页面是否意外跳动
Cumulative Layout Shift 衡量页面生命周期内意外布局移动的程度。用户准备点击按钮时元素突然移位，是典型的高 CLS 体验。
CLS 较高时优先检查：
- 图片、视频和 iframe 是否预留了宽高或比例
- 异步内容、广告和提示条是否插入到已有内容上方
- Web Font 切换是否造成文字尺寸变化
- 动画是否修改了会触发布局的属性，而不是使用
transform
FCP：第一次看到页面内容
First Contentful Paint 表示浏览器第一次绘制文字、图片、Canvas 或 SVG 内容的时间。它回答“页面什么时候不再是一片空白”。官方建议 P75 不超过 1.8 秒；超过 3 秒通常属于较差体验。
FCP 好但 LCP 差，说明页面很快给出反馈，但主要内容仍然加载较慢。可以检查首屏主资源和渲染链路。
TTFB：服务器首字节速度
Time to First Byte 表示请求开始到收到响应首字节的时间，包含网络连接、服务器处理和链路延迟。它是后续 FCP、LCP 的基础成本。多数站点可以把 0.8 秒以内作为良好参考，超过 1.8 秒应重点调查。
TTFB 较高时优先检查：
- 服务端接口和 SSR 渲染耗时
- 数据库查询与外部服务调用
- 缓存命中率、CDN 与边缘节点
- 重定向、DNS、TLS 与跨地域链路
TBT：主线程被阻塞多久
Total Blocking Time 累计页面加载期间长任务超出 50 毫秒的阻塞部分。它可以帮助发现 JavaScript 执行压力，也是没有真实交互时判断响应能力的辅助信号。
TraceVista SDK 使用 PerformanceObserver 观察 longtask，把每个长任务超过 50 毫秒的部分累加。数值越低越好。
DCL 与 Load
- DOMContentLoaded（DCL）：HTML 解析完成，延迟脚本执行结束。
- Load：页面及其依赖资源完成加载。
它们适合观察页面生命周期和历史趋势，但不直接等同于用户看到主要内容或可以交互的时间，因此不能替代 LCP 与 INP。
如何正确解读数据
- 优先看分位数和分布，不只看平均值。
- 移动端和桌面端分开判断。
- 按页面比较，避免用一个全站数值掩盖局部慢页面。
- 将性能变化与版本发布、访问量和错误变化放在一起看。
- 浏览器对 Performance API 的支持不同，缺失指标不等同于数值为零。