我们打开 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