Core Web Vitals：如何測量與改善

為何 Core Web Vitals 對你的網站很重要

你可能看過報告說你的網站很慢，但不知道從何開始。Core Web Vitals 是 Google 用來衡量真實使用者體驗的指標：最大內容繪製 (Largest Contentful Paint, LCP)、互動到下一次繪製 (Interaction to Next Paint, INP)，以及累積版面位移 (Cumulative Layout Shift, CLS)。它們會影響搜尋排名，更重要的是影響使用者對你網站的感受。LCP 過慢會讓訪客感到煩躁，INP 過高會讓頁面感覺沒有回應，而 CLS 不佳會導致意外點擊。本指南將說明如何測量這些指標，並透過實際步驟來改善它們。

了解三項 Core Web Vitals

在優化之前，先了解每個指標衡量什麼以及它的閾值。

這些閾值基於現場資料（真實使用者），而非實驗室測試。目標是讓至少 75% 的頁面載入達到「良好」範圍。

如何測量 Core Web Vitals

你需要實驗室資料和現場資料。實驗室資料有助於除錯；現場資料反映真實使用者體驗。

實驗室工具

• Chrome DevTools 中的 Lighthouse：執行稽核以獲得效能分數和具體改善機會。
• WebPageTest：進階測試，提供影片條和瀑布圖。
• Chrome UX Report (CrUX)：來自真實使用者的現場資料，可透過 PageSpeed Insights 或 CrUX API 取得。

現場工具

• PageSpeed Insights：顯示某個 URL 的實驗室和現場資料。
• Google Search Console：Core Web Vitals 報告會依狀態將 URL 分組。
• web-vitals JavaScript 函式庫：在你自己的分析中收集真實使用者指標。

若要為你的網站加入監測，請引入 web-vitals 函式庫並將指標傳送到你的分析端點：

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);

這能讓你獲得持續的現場資料串流，以追蹤改善情況。

改善最大內容繪製 (LCP)

LCP 通常是最重大的挑戰。最大的元素通常是主視覺圖片或大型文字區塊。優化它的載入路徑。

1. 找出 LCP 元素：使用 Lighthouse 或 DevTools 效能面板。
2. 優先載入它：在圖片上使用 fetchpriority="high"，或用 <link rel="preload"> 預載。
3. 優化圖片：壓縮、使用現代格式（WebP/AVIF），並透過 srcset 提供回應式尺寸。
4. 減少伺服器回應時間：使用快取、CDN，並優化後端查詢。
5. 消除阻擋渲染的資源：內聯關鍵 CSS，延遲非關鍵 JS。

範例：預載主視覺圖片並設定提取優先級：

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

始終設定寬度和高度以避免版面位移。

改善互動到下一次繪製 (INP)

INP 衡量回應性。長任務會阻塞主執行緒，延遲視覺回饋。要改善 INP：

• 拆分長任務：使用 setTimeout 或 scheduler.yield 讓出主執行緒。
• 優化事件處理常式：對輸入進行防抖，避免繁重的同步工作。
• 減少 JavaScript：程式碼分割、tree-shaking，並延遲非關鍵腳本。
• 使用 Web Worker 處理 CPU 密集型任務。
• 避免大型 DOM 更新：批次處理 DOM 變更並使用 requestAnimationFrame。

範例：在長迴圈中讓出主執行緒：

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

這能在繁重處理期間保持頁面回應。

改善累積版面位移 (CLS)

CLS 發生在元素意外移動時。常見原因：沒有尺寸的圖片、廣告、嵌入內容和網頁字型。

• 始終在圖片和影片上包含寬度和高度。
• 為動態內容預留空間（廣告、嵌入內容），使用 CSS min-height 或長寬比盒子。
• 使用 font-display: swap 並預載字型，以避免不可見文字和版面位移。
• 避免在現有內容上方插入內容，除非是回應使用者互動。

範例：使用 aspect-ratio 預留空間：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

這能防止影片載入時的位移。

監控與迭代

效能不是一次性的修復。設定持續監控真實使用者指標。使用儀表板隨時間追蹤 LCP、INP 和 CLS。每次變更後，用實驗室工具驗證，並在幾天後檢查現場資料。優先修復影響最多使用者的問題。

常見問題

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

LCP：良好 ≤2.5 秒，需要改進 2.5–4.0 秒，不佳 >4.0 秒。INP：良好 ≤200 毫秒，需要改進 200–500 毫秒，不佳 >500 毫秒。CLS：良好 ≤0.1，需要改進 0.1–0.25，不佳 >0.25。

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

持續監控現場資料，並在每次重大變更後執行實驗室測試。每週檢查 Search Console 以了解趨勢。

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

可以。許多改善措施，例如圖片優化、預載和 CSS 調整，都可以逐步套用，無需完整重建。

需要快速壓縮圖片以改善 LCP？試試我們的免費 圖片壓縮工具，在不損失品質的情況下減少檔案大小。