Core Web Vitals 是 Google 的速度與互動性指標，目標為 LCP 低於 2.5 秒、INP 低於 200ms、CLS 低於 0.1；2024 年 INP 取代 FID 後成為最常見的 SEO 殺手，作者建議切割長 JavaScript 任務、延後第三方腳本、用 Web Worker 移出運算，並以 SSG 靜態化與每週檢視 P75 數值持續優化。
發布 2026-06-14 · 最後更新 2026-09-27 · 作者 賴家榮 Andy Lai
Core Web Vitals 是 Google 的速度與互動性指標，2024 年 FID 被 INP 取代。沒做到位的網站，2026 年的 SEO 排名要再上去很難。這篇教您診斷與優化。
三大指標
| 指標 | 意義 | 目標 |
|---|---|---|
| LCP | 最大內容繪製（主視覺載入完成） | < 2.5s |
| INP | 互動到下一次繪製 | < 200ms |
| CLS | 累積版面位移 | < 0.1 |
LCP 優化
- 圖片用 AVIF / WebP，比 JPG 小 30–50%
- 主視覺圖加
fetchpriority="high" - 用 CDN（Cloudflare、Fastly）
- 字體預載（preload）
- 移除 render-blocking JS / CSS
- 用 SSG / 靜態化（Astro、Hugo）
INP 優化（最常見的 SEO 殺手）
INP 是 2024 年 FID 的升級版，要求互動後 200ms 內畫面回應。
- 切割長 JavaScript 任務（< 50ms）
- 用
requestIdleCallback延後非緊急工作 - 第三方腳本延後載入（GA、廣告）
- 用 Web Worker 把運算移出主執行緒
- 避免大型 React 重新渲染
CLS 優化
- 圖片標 width 與 height（避免載入時跳位）
- 字體用 font-display: optional（避免閃爍）
- 動態內容預留空間
- 廣告位置固定
診斷工具
- PageSpeed Insights：免費官方
- Chrome DevTools Performance：本機測
- Web Vitals Chrome Extension：即時顯示
- Search Console：真實用戶數據（CrUX）
實戰：把 INP 從 600ms 降到 100ms
常見原因：
- 大型 React useState 觸發整頁重渲
- 第三方腳本（GTM）阻塞主執行緒
- 圖表 / 動畫每幀計算太重
解法：
- 用 useMemo / useCallback 減少重渲
- GTM 設定延遲載入（DOMContentLoaded 後）
- 動畫用 transform / opacity（GPU 加速）
- 長運算用 Web Worker
SSG 是 Core Web Vitals 神器
用 Astro / Next.js SSG 模式，預先產出靜態 HTML：
- LCP 通常 < 1.5s
- INP 因 JS 少而極佳
- CLS 因結構固定而趨近 0
監控設定
- 裝 web-vitals.js 收集真實用戶數據
- 送到 GA4 / 自架 Grafana
- 每週看 P75 數值
- 找出表現最差的頁面類型，優先優化
常見問題
Core Web Vitals 三大指標是什麼，目標值多少？
LCP（最大內容繪製）衡量主視覺載入完成時間，目標低於 2.5 秒；INP（互動到下一次繪製）衡量互動後畫面回應速度，目標低於 200ms；CLS（累積版面位移）衡量版面跳動，目標低於 0.1。沒做到位的網站，2026 年的 SEO 排名要再上去很難。
INP 是什麼，為什麼取代 FID？
INP 是 2024 年 FID 的升級版，要求使用者互動後 200ms 內畫面要有回應，是最常見的 SEO 殺手。優化方法包括把長 JavaScript 任務切割到 50ms 以下、用 requestIdleCallback 延後非緊急工作、延後載入 GA 與廣告等第三方腳本、用 Web Worker 把運算移出主執行緒，以及避免大型 React 重新渲染。
怎麼把 INP 從 600ms 降到 100ms？
常見原因是大型 React useState 觸發整頁重渲、GTM 等第三方腳本阻塞主執行緒、圖表或動畫每幀計算太重。解法是用 useMemo 與 useCallback 減少重渲、GTM 設定在 DOMContentLoaded 後延遲載入、動畫改用 transform 與 opacity 走 GPU 加速、長運算交給 Web Worker。
有哪些工具可以診斷 Core Web Vitals？
PageSpeed Insights 是免費官方工具；Chrome DevTools Performance 可在本機測試；Web Vitals Chrome Extension 能即時顯示數值；Search Console 提供真實用戶數據（CrUX）。長期監控建議裝 web-vitals.js 收集真實數據送到 GA4 或自架 Grafana，每週看 P75 數值並優先優化表現最差的頁面類型。
為什麼 SSG 靜態化對 Core Web Vitals 特別有效？
用 Astro 或 Next.js SSG 模式預先產出靜態 HTML，LCP 通常低於 1.5 秒，INP 因為 JavaScript 少而極佳，CLS 因為結構固定而趨近 0。搭配 AVIF 或 WebP 圖片（比 JPG 小 30 到 50%）、主視覺加 fetchpriority="high"、CDN 與字體預載，三項指標都能顯著改善。