Core Web Vitals（CWV）是 Google 推出的一组用于衡量网页用户体验的关键性能指标，目前由 LCP、INP 和 CLS 三大核心指标构成。FID 已于 2024 年 3 月被 INP 正式取代，不再作为核心指标使用 。
一、核心三大指标(LCP/INP/CLS)
1. LCP（Largest Contentful Paint，最大内容绘制）
- 含义：衡量页面中最大可见内容元素（如主图、大标题、视频等）渲染完成的时间，反映用户感知的"主要内容加载完成"时刻。
- 目标：≤ 2.5 秒 。
- 优化建议：
- 使用 WebP/AVIF 格式压缩图片；
- 预加载关键资源（
<link rel="preload">）； - 启用 CDN 加速资源分发；
- 优化服务器响应时间（TTFB < 800ms）。
2. INP（Interaction to Next Paint，交互到下一次绘制）
- 含义：测量用户与页面交互（点击、按键、触摸等）后，浏览器完成下一次屏幕绘制的延迟，取代 FID 成为新的交互性核心指标。
- 目标：< 200 毫秒 。
- 优化建议：
- 拆分长任务（避免主线程阻塞 > 50ms）；
- 使用 Web Worker 处理复杂计算；
- 优化事件处理函数，避免耗时操作；
- 采用事件节流/防抖、被动事件监听器 。
⚠️ 注意：FID（首次输入延迟）仅测量首次交互的输入延迟，而 INP 覆盖所有交互并包含处理与绘制延迟，因此更全面。
3. CLS（Cumulative Layout Shift，累积布局偏移）
- 含义：衡量页面加载过程中所有意外布局偏移的总得分，反映视觉稳定性。
- 目标：≤ 0.1 。
- 优化建议：
- 为图片、视频等元素指定宽高属性；
- 避免动态插入内容（如广告、横幅）导致布局跳动；
- 使用 transform 实现动画而非修改布局属性 。
补充说明
- FID 已淘汰：虽在部分旧资料中仍被提及，但 Google 官方已明确 INP 为新一代交互性指标 89。
- 工具推荐：
- Lighthouse（Chrome DevTools 内置）
- PageSpeed Insights
- Web Vitals Chrome 扩展
如需检测当前网站的 Core Web Vitals 表现，可直接使用上述工具进行分析。
二、基础关键指标(TTFB/FCP)
这两个指标是上述核心指标的基础，直接影响首屏加载速度。
1. TTFB (Time to First Byte) - 首字节时间
- 含义： 浏览器发出请求到收到服务器第一个字节的时间。它反映了服务器的响应速度、网络延迟和 DNS 查询时间。
- 目标： < 800 毫秒（理想情况 < 600ms）。
- 如何优化：
- 使用服务端渲染 (SSR) 或静态站点生成 (SSG)。
- 开启服务器缓存（如 Redis）和 CDN 缓存。
- 优化数据库查询，减少后端处理时间。
2. FCP (First Contentful Paint) - 首次内容绘制
- 含义： 浏览器渲染出第一个内容（文本、图片、SVG 等，非白屏）的时间。它给用户"页面开始加载"的视觉反馈。
- 目标： < 1.8 秒。
- 如何优化：
- 内联关键 CSS (Critical CSS)（直接绑定在 html 上的，不用等待下载解析css文件），移除未使用的 CSS（很多项目引入了庞大的 CSS 框架（如 Bootstrap, Tailwind）或第三方库，但实际页面可能只用了其中 10% 的类名。这些"死代码"不仅浪费带宽，还增加了浏览器的解析负担。）。
- 减少 JavaScript 对主线程的阻塞（使用 async 或 defer 加载脚本）。
- 优化服务器响应时间（即优化 TTFB）。
三、其他重要性能指标
1. TTI (Time to Interactive) - 可交互时间
- 含义：衡量页面从开始加载到完全具备交互能力所需的时间。它不仅要求页面内容已渲染，还要求主线程足够空闲，能够可靠、快速地响应用户的下一步操作。
- 目标：通常建议 < 5 秒
- 为什么重要： 一个页面可能看起来已经加载完毕（FCP/LCP 已完成），但如果主线程仍被 JavaScript 长任务阻塞，用户点击按钮时可能没有任何反应。TTI 就是用来衡量这种"假死"状态的时长。
- 如何优化：
- TTI 关注的是页面何时变得完全可交互，优化核心是尽快让主线程空闲下来。
- 代码分割与懒加载：将 JavaScript 代码按路由或组件进行拆分，只加载当前页面所需的代码。
- 延迟加载非关键脚本：对分析、广告等第三方脚本使用 async 或 defer，或延迟到用户交互后再加载。
- 减少主线程工作：与优化 INP 类似，通过拆分长任务、使用 Web Worker 等方式减少主线程的负担。
2.TBT（总阻塞时间）：作为实验室指标，用于估算主线程被长任务（>50ms）阻塞的总时长，是 FID 的替代指标
指标汇总：
| 指标 | 衡量维度 | 核心定义 | 理想阈值 |
|---|---|---|---|
| LCP(Largest Contentful Paint) | 加载速度 | 最大内容绘制 | ≤ 2.5 秒 |
| INP(Interaction to Next Paint) | 交互响应 | 交互到下一次绘制 | ≤ 200 毫秒 |
| CLS(Cumulative Layout Shift) | 视觉稳定性 | 累积布局偏移 | ≤ 0.1 |
| FCP (First Contentful Paint) | 加载速度 | 首次内容绘制 | ≤ 2.5 秒 |
| TTFB (Time to First Byte) | 加载速度 | 首字节时间 | < 800 毫秒 |
| TTI (Time to Interactive) | 加载速度 | 可交互时间 | < 5秒 |
| TBT | 加载速度 | 总阻塞时间 | < 200ms |