我們打開(kāi) Chrome DevTools，跑一個(gè) Lighthouse，
一堆Web英文縮寫(xiě)撲面而來(lái)：
LCP 紅了？
FID 沒(méi)過(guò)？
CLS 啥意思？
還有個(gè)什么 TTFB？
它們到底在測(cè)什么指標(biāo)？又該怎么優(yōu)化？
別急，這篇文章就是為了解決這些“字母恐懼癥”。
我們將用前端視角 + 用戶(hù)視角，帶你逐個(gè)搞懂 Web 性能的核心指標(biāo)。
它們是 Core Web Vitals（核心網(wǎng)頁(yè)指標(biāo)）的一部分，由 Google 推出，目標(biāo)是：
用真實(shí)用戶(hù)體驗(yàn)角度，衡量網(wǎng)頁(yè)的加載速度、交互響應(yīng)和視覺(jué)穩(wěn)定性。
而且它們不是簡(jiǎn)單的“跑分”，是真的會(huì)影響 Google SEO 排名和產(chǎn)品體驗(yàn)的關(guān)鍵指標(biāo)。
指標(biāo) | 含義 | 用戶(hù)感知 | 推薦值 |
|---|---|---|---|
FCP (First Contentful Paint) | 首次繪制內(nèi)容 | 頁(yè)面開(kāi)始有東西了 | < 1.8s |
LCP (Largest Contentful Paint) | 最大內(nèi)容繪制完成 | 主要內(nèi)容加載完成 | < 2.5s |
FID (First Input Delay) | 首次交互延遲 | 點(diǎn)了頁(yè)面多久有反應(yīng) | < 100ms |
CLS (Cumulative Layout Shift) | 累積布局偏移 | 頁(yè)面是不是亂跳 | < 0.1 |
TTFB (Time to First Byte) | 首字節(jié)時(shí)間 | 后端響應(yīng)速度 | < 0.5s |
觸發(fā)點(diǎn)：頁(yè)面中第一個(gè)非白屏內(nèi)容（如文本、圖片、SVG）出現(xiàn)時(shí)
用戶(hù)感知：頁(yè)面開(kāi)始加載啦
提前加載關(guān)鍵 CSS
減少 JS 阻塞渲染
使用服務(wù)器渲染，預(yù)渲染輸出基礎(chǔ)結(jié)構(gòu)
通常是頁(yè)面的主圖、主標(biāo)題、大模塊
Chrome 會(huì)判斷“最大可見(jiàn)塊”，不是你決定的！
關(guān)鍵圖片/標(biāo)題提前加載（preload）
使用現(xiàn)代圖片格式（WebP/AVIF）
避免慢 JS 阻塞渲染流程
例如：點(diǎn)按鈕、點(diǎn)擊搜索框、按 Tab 等
用戶(hù)會(huì)覺(jué)得“卡”，通常是 JS 主線程被鎖了
減少首次加載 JS 數(shù)量
拆分包、懶加載
使用 requestIdleCallback 等異步技術(shù)延遲非關(guān)鍵邏輯
頁(yè)面加載時(shí)元素跳來(lái)跳去？按鈕滑走？廣告插入？頁(yè)面先裸奔一下？這就是 CLS 高
Google 超討厭這個(gè)，用戶(hù)也會(huì)煩
圖片、視頻標(biāo)簽必須設(shè)置寬高占位
避免動(dòng)態(tài)內(nèi)容插入頭部
使用動(dòng)畫(huà)過(guò)渡代替強(qiáng)插入
瀏覽器點(diǎn)擊鏈接后，多久拿到服務(wù)器第一個(gè)響應(yīng)字節(jié)
后端慢、DNS 慢、CDN 沒(méi)命中，都會(huì)拉高這個(gè)指標(biāo)
開(kāi)啟緩存
使用 CDN 靠近用戶(hù)
后端響應(yīng)路徑盡可能精簡(jiǎn)
使用 Chrome DevTools → Performance → Lighthouse
使用 Chrome 插件：Web Vitals、Core Web Vitals Reporter
引入 web-vitals JS 庫(kù)，上報(bào)到埋點(diǎn)系統(tǒng)
import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);
性能不只是“加載速度”，而是從打開(kāi)頁(yè)面到點(diǎn)下按鈕的 完整體驗(yàn)過(guò)程。
通過(guò)這五個(gè)指標(biāo)，你可以更有目的地優(yōu)化每一步：
FCP → 讓用戶(hù)知道“頁(yè)面來(lái)了”
LCP → 讓用戶(hù)覺(jué)得“主內(nèi)容出來(lái)了”
FID → 讓用戶(hù)一操作就有反應(yīng)
CLS → 別讓用戶(hù)追著按鈕跑
TTFB → 別讓后端拖累前端。
本文地址: http://www.fushitang.cn/google-seo-chrome-lighthouse-core-web-vitals-fcp-lcp-fid-cls-ttfb.html
