Web 性能优化二：一文理解 Web 性能核心指标：FCP、LCP、FID、CLS、TTFB

你打开 Chrome DevTools，跑了个 Lighthouse，

一堆英文缩写扑面而来：

• LCP 红了？

• FID 没过？

• CLS 看不懂？

• 还有个啥 TTFB？

它们到底在测啥？又该怎么优化？

别急，这篇文章就是为了解决这些“字母恐惧症”。

我们将用前端视角 + 用户视角，带你逐个搞懂 Web 性能的核心指标。

一、这些指标是干嘛的？

它们是 Web Vitals（网页核心指标）的一部分，由 Google 推出，目标是：

用真实用户体验角度，衡量网页的加载速度、交互响应和视觉稳定性。

而且它们不是“跑分用的”，是真的会影响 SEO 排名和产品体验的关键指标。

二、五个核心指标速览表

指标	含义	用户感知	推荐值
FCP (First Contentful Paint)	首次绘制内容	页面开始有东西了	< 1.8s
LCP (Largest Contentful Paint)	最大内容绘制完成	主要内容加载完成	< 2.5s
FID (First Input Delay)	首次交互延迟	点了页面多久有反应	< 100ms
CLS (Cumulative Layout Shift)	累积布局偏移	页面是不是乱跳	< 0.1
TTFB (Time to First Byte)	首字节时间	后端响应速度	< 0.5s

三、每个指标详解 + 优化思路

1. FCP：页面“开始有内容了”

• 触发点：页面中第一个非白屏内容（如文本、图片、SVG）出现时

• 用户感知：页面没挂，开始加载啦

优化方向：

• 提前加载关键 CSS

• 减少 JS 阻塞渲染

• 使用服务器渲染/预渲染输出基础结构

2. LCP：页面“最重要的内容”加载完成

• 通常是页面的主图、主标题、大模块

• Chrome 会判断“最大可见块”，不是你决定的！

优化方向：

• 关键图片/标题提前加载（preload）

• 使用现代图片格式（WebP/AVIF）

• 避免慢 JS 阻塞渲染流程

3. FID：用户首次交互的“响应速度”

• 例如：点按钮、点击搜索框、按 Tab 等

• 用户会觉得“卡”，通常是 JS 主线程被锁了

优化方向：

• 减少首次加载 JS 数量

• 拆分包、懒加载

• 使用 requestIdleCallback 等异步技术延迟非关键逻辑

4. CLS：页面“跳不跳”

• 页面加载时元素跳来跳去？按钮滑走？广告插入？这就是 CLS 高

• Google 超讨厌这个，用户也会烦

优化方向：

• 图片、视频标签必须设置宽高占位

• 避免动态内容插入头部

• 使用动画过渡代替强插入

5. TTFB：服务端到底慢不慢

• 浏览器点击链接后，多久拿到服务器第一个响应字节

• 后端慢、DNS 慢、CDN 没命中，都会拉高这个指标

优化方向：

• 开启缓存

• 使用 CDN 靠近用户

• 后端响应路径尽可能精简

四、如何采集这些指标？

开发阶段

• 使用 Chrome DevTools → Performance → Lighthouse

• 使用 Chrome 插件：Web Vitals、Core Web Vitals Reporter

上线阶段（真实用户）

• 引入 web-vitals JS 库，上报到埋点系统

• import { getLCP, getFID, getCLS } from 'web-vitals';
  getLCP(console.log);
  getFID(console.log);
  getCLS(console.log);

  总结

  性能不只是“加载速度”，而是从打开页面到点下按钮的 完整体验过程。

  通过这五个指标，你可以更有目的地优化每一步：

• FCP → 让用户知道“页面来了”

• LCP → 让用户觉得“主内容出来了”

• FID → 让用户一操作就有反应

• CLS → 别让用户追着按钮跑

• TTFB → 别让后端拖累前端飞