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

你已經打造了快速的網站，但使用者仍抱怨速度慢。或者，你的 SEO 排名在 Google 更新後下滑。罪魁禍首可能是 Core Web Vitals——Google 用來衡量使用者體驗的指標。在本指南中，你將了解它們是什麼、如何衡量，以及改善每一項的具體步驟。

什麼是 Core Web Vitals？

Core Web Vitals 是三項量化使用者體驗關鍵面向的指標：

• Largest Contentful Paint (LCP)：最大的內容元素（圖片、影片或文字區塊）變為可見所需的時間。良好：≤2.5 秒。
• Interaction to Next Paint (INP)：衡量回應性——從使用者互動（點擊、輕觸、按鍵）到下一幀繪製的時間。良好：≤200 毫秒。
• Cumulative Layout Shift (CLS)：量化載入期間非預期的版面位移。良好：≤0.1。

這些指標是 Google 頁面體驗信號的一部分，直接影響 SEO 與使用者滿意度。

如何衡量 Core Web Vitals

你需要實驗室數據與現場數據。實驗室數據（合成測試）有助於除錯；現場數據（真實使用者監控）反映實際體驗。

實驗室工具

• Chrome DevTools 中的 Lighthouse：執行稽核並取得分數與改善機會。
• WebPageTest：提供影片條與瀑布圖的進階測試。
• PageSpeed Insights：結合實驗室數據與來自 CrUX 的現場數據。

現場工具

• Chrome User Experience Report (CrUX)：真實使用者指標的公開資料集。
• web-vitals JavaScript 函式庫：透過分析工具從真實使用者收集指標。
• Search Console：Core Web Vitals 報告顯示需要關注的網址群組。

以下說明如何使用 web-vitals 函式庫將指標傳送至你的分析工具：

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 若可用，使用 navigator.sendBeacon
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

改善 LCP

LCP 通常是最具影響力的指標。要改善它：

1. 最佳化 LCP 元素：識別它（通常是主視覺圖片或標題），並確保它快速載入。
2. 預載關鍵資源：對圖片、字型與樣式表使用 <link rel="preload">。
3. 使用現代圖片格式：提供 WebP 或 AVIF 並包含備援格式。
4. 謹慎實作延遲載入：不要對 LCP 圖片使用延遲載入；優先載入它。
5. 減少伺服器回應時間：使用 CDN、快取並最佳化後端。
6. 消除阻擋渲染的資源：延遲非關鍵的 CSS 與 JavaScript。

範例：預載你的主視覺圖片：

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

改善 INP

INP 衡量回應性。高 INP 通常來自阻擋主執行緒的長任務。

1. 拆分長任務：使用 setTimeout、requestIdleCallback 或 scheduler.yield() 讓出主執行緒。
2. 最佳化事件處理常式：對昂貴操作進行去抖動或節流。
3. 減少 JavaScript 執行：程式碼分割、tree-shaking，並延遲非關鍵腳本。
4. 避免大型 DOM 更新：批次處理 DOM 變更並明智地使用虛擬 DOM。
5. 使用 Web Workers 處理 CPU 密集型工作。

範例：使用 scheduler.yield() 讓出（在支援的環境中）：

async function handleClick() {
  // 執行一些工作
  await scheduler.yield();
  // 讓出後繼續
}

改善 CLS

CLS 关乎視覺穩定性。防止非預期的位移：

1. 一律在圖片與影片上包含 width 與 height 屬性。
2. 為廣告與嵌入內容預留空間：使用 CSS aspect-ratio 或固定尺寸。
3. 避免在現有內容上方插入內容，除非由使用者互動觸發。
4. 使用 CSS transform 進行動畫，而非觸發版面的屬性。
5. 預載字型並使用 font-display: swap 以避免不可見文字造成的位移。

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

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

Core Web Vitals 比較

工具與工作流程

將 Core Web Vitals 監控整合到你的開發工作流程中：

• 在 CI 中執行 Lighthouse 以捕捉回歸問題。
• 使用 RUM（真實使用者監控）追蹤現場數據。
• 設定效能預算與警示。
• 定期稽核第三方腳本——它們經常影響 INP 與 LCP。

若要在上傳到網站前快速最佳化圖片，試試我們的 Image Compressor，在不損失品質的情況下縮小檔案大小。

常見問題

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

LCP 良好 ≤2.5 秒，需要改善 ≤4 秒；INP 良好 ≤200 毫秒，需要改善 ≤500 毫秒；CLS 良好 ≤0.1，需要改善 ≤0.25。

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

透過現場數據持續衡量，並在每次重大程式碼變更時透過實驗室工具衡量。設定回歸警示。

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

可以——許多修正如圖片最佳化、預載與延遲腳本都可以逐步套用。