Core Web Vitals：衡量與改善網頁效能

您的使用者期望頁面瞬間載入、立即回應且視覺穩定。Google 的 Core Web Vitals（CWV）將這些期望量化：最大內容繪製（LCP）衡量載入效能，互動至下一次繪製（INP）衡量互動性，累積版面位移（CLS）衡量視覺穩定性。CWV 分數不佳會損害使用者體驗，並可能影響搜尋排名。本指南說明如何衡量各項指標，並透過實用且開發者友善的步驟加以改善。

什麼是 Core Web Vitals？

Core Web Vitals 是三項反映真實使用者體驗的指標：

• LCP：最大內容元素（圖片、文字區塊、影片）完成渲染的時間。良好：≤2.5 秒，需改善：≤4 秒，不佳：>4 秒。
• INP：從使用者互動（點擊、輕觸、按鍵）到下一幀繪製的時間。良好：≤200 毫秒，需改善：≤500 毫秒，不佳：>500 毫秒。
• CLS：非預期視覺移動的版面位移分數總和。良好：≤0.1，需改善：≤0.25，不佳：>0.25。

這些閾值基於頁面載入的第 75 百分位數，並區分手機與桌面裝置。

如何衡量 Core Web Vitals

您需要實驗室與現場資料。實驗室工具模擬環境；現場資料來自真實使用者。

實驗室工具

• Lighthouse（位於 Chrome DevTools 或 PageSpeed Insights）：稽核 LCP、CLS 與總阻塞時間（INP 的替代指標）。
• WebPageTest：進階的膠卷式與瀑布圖分析。
• Chrome DevTools 效能面板：錄製互動以找出影響 INP 的長任務。

現場工具

• Chrome UX Report（CrUX）：公開網站的彙總真實使用者資料。
• web-vitals JavaScript 程式庫：將指標傳送至您的分析系統。
• Search Console Core Web Vitals 報告：依狀態將網址分組。

透過 npm 安裝 web-vitals 程式庫，或從 CDN 引入，然後記錄指標：

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

使用 sendBeacon 避免阻塞卸載。長期收集資料以觀察趨勢。

改善最大內容繪製（LCP）

LCP 通常是主視覺圖片或主標題。最佳化關鍵路徑：

1. 優先處理 LCP 資源：為 LCP 圖片加上 fetchpriority="high" 或預先載入。
2. 減少伺服器回應時間：使用快取、CDN 與高效的後端查詢。
3. 消除阻擋渲染的資源：延遲非關鍵 CSS/JS，內嵌關鍵 CSS。
4. 最佳化圖片：壓縮、使用現代格式（WebP/AVIF）並設定尺寸。
5. 使用 CDN 從鄰近使用者的位置提供資源。

範例：預先載入 LCP 圖片並設定 fetchpriority：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

如需圖片壓縮，試試我們的 圖片壓縮工具，在不影響視覺品質的情況下縮小檔案大小。

改善互動至下一次繪製（INP）

INP 反映回應性。長時間的 JavaScript 任務會阻塞主執行緒並延遲視覺回饋。

1. 拆分長任務：使用 setTimeout、requestIdleCallback 或 scheduler.yield() 讓出執行權給瀏覽器。
2. 最佳化事件處理常式：對輸入進行防抖，避免在點擊處理常式中執行繁重工作。
3. 減少 JavaScript：進行程式碼分割、樹搖優化，並延遲非關鍵指令碼。
4. 使用 Web Worker 處理 CPU 密集型工作。
5. 避免大型 DOM 更新：批次處理 DOM 變更，並對長列表使用虛擬化。

使用 web-vitals 程式庫在現場衡量 INP，並使用效能面板找出互動期間的長任務。

改善累積版面位移（CLS）

CLS 發生在元素非預期移動時。常見原因：圖片未設定尺寸、廣告/嵌入內容未保留空間，以及字型延遲載入。

1. 一律設定圖片的寬度與高度，或使用 CSS aspect-ratio。
2. 為動態內容保留空間（廣告、嵌入內容），使用 min-height。
3. 使用 font-display: swap 並預先載入關鍵字型，避免文字不可見與版面位移。
4. 避免在現有內容上方插入內容，除非由使用者互動觸發。

範例：為響應式圖片設定長寬比：

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Core Web Vitals 比較

改善 CWV 的實用工作流程

1. 衡量基準：執行 Lighthouse 並透過 web-vitals 收集現場資料。
2. 找出瓶頸：使用效能面板與網路瀑布圖。
3. 優先修復：專注於分數最差的指標。
4. 實施變更：最佳化圖片、延遲指令碼、設定尺寸。
5. 測試與監控：重新執行實驗室測試並長期追蹤現場資料。

請記住，CWV 是現場指標；實驗室工具協助診斷，但真實使用者資料才是真相來源。

常見問題

Core Web Vitals 目前的閾值是什麼？

良好：LCP ≤2.5 秒、INP ≤200 毫秒、CLS ≤0.1。需改善：LCP ≤4 秒、INP ≤500 毫秒、CLS ≤0.25。不佳：超過上述數值。這些評估基於頁面載入的第 75 百分位數。

我應該多久衡量一次 Core Web Vitals？

持續監控現場資料，並在重大變更後執行實驗室稽核。至少每月檢視 Search Console 的 Core Web Vitals 報告，以及在影響前端效能的部署後進行檢視。

我可以在不重新設計網站的情況下改善 Core Web Vitals 嗎？

可以。許多改善屬於技術層面：壓縮圖片、設定寬高屬性、延遲非關鍵 JavaScript，以及拆分長任務。這些變更通常能在不進行視覺重新設計的情況下帶來顯著效益。

準備好最佳化圖片以改善 LCP 了嗎？使用我們的免費 圖片壓縮工具，在保持品質的同時縮小圖片，並提升您的 Core Web Vitals 分數。