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 數值
- 找出表現最差的頁面類型，優先優化