我们打开 Chrome DevTools，跑一个 Lighthouse，
一堆Web英文缩写扑面而来：
-
LCP 红了？
-
FID 没过？
-
CLS 啥意思？
-
还有个什么 TTFB？
它们到底在测什么指标？又该怎么优化？
别急，这篇文章就是为了解决这些“字母恐惧症”。
我们将用前端视角 + 用户视角，带你逐个搞懂 Web 性能的核心指标。
它们是 Core Web Vitals（核心网页指标）的一部分，由 Google 推出，目标是：
用真实用户体验角度，衡量网页的加载速度、交互响应和视觉稳定性。
而且它们不是简单的“跑分”，是真的会影响 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 |
-
触发点：页面中第一个非白屏内容（如文本、图片、SVG）出现时
-
用户感知：页面开始加载啦
-
提前加载关键 CSS
-
减少 JS 阻塞渲染
-
使用服务器渲染，预渲染输出基础结构
-
通常是页面的主图、主标题、大模块
-
Chrome 会判断“最大可见块”，不是你决定的！
-
关键图片/标题提前加载（preload）
-
使用现代图片格式（WebP/AVIF）
-
避免慢 JS 阻塞渲染流程
-
例如：点按钮、点击搜索框、按 Tab 等
-
用户会觉得“卡”，通常是 JS 主线程被锁了
-
减少首次加载 JS 数量
-
拆分包、懒加载
-
使用 requestIdleCallback 等异步技术延迟非关键逻辑
-
页面加载时元素跳来跳去？按钮滑走？广告插入？页面先裸奔一下？这就是 CLS 高
-
Google 超讨厌这个，用户也会烦
-
图片、视频标签必须设置宽高占位
-
避免动态内容插入头部
-
使用动画过渡代替强插入
-
浏览器点击链接后，多久拿到服务器第一个响应字节
-
后端慢、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 → 别让后端拖累前端。
本文地址: https://www.jeawin.com/google-seo-chrome-lighthouse-core-web-vitals-fcp-lcp-fid-cls-ttfb.html
