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

你已經打造了一個現代化的網頁應用程式，但使用者抱怨它感覺很慢。搜尋排名也可能受到影響。Core Web Vitals (CWV) 是 Google 用來衡量使用者體驗的指標：最大內容繪製 (LCP)、互動到下一次繪製 (INP) 和累積版面位移 (CLS)。本指南將展示如何準確測量這些指標並有效改善它們。

什麼是 Core Web Vitals？

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

• LCP 衡量載入效能。它標記了最大的內容元素（圖片、文字區塊、影片）變為可見的時間。目標是 ≤2.5 秒。
• INP 衡量回應性。它捕捉所有互動（點擊、輕觸、按鍵）的延遲，並報告最差（或接近最差）的延遲。目標是 ≤200 毫秒。
• CLS 衡量視覺穩定性。它量化載入過程中意外的版面位移。目標是 ≤0.1。

這些指標是透過實際使用者測量（field）和實驗室測量（lab）得到的。兩者都很重要。

如何測量 Core Web Vitals

你需要 field 和 lab 資料來診斷問題。

Field 資料（真實使用者監控）

Field 資料反映跨裝置和網路的實際使用者體驗。使用以下來源：

• Chrome 使用者體驗報告 (CrUX)：數百萬個網站的真實使用者指標的公開資料集。透過 PageSpeed Insights 或 CrUX API 存取。
• Google Search Console：Core Web Vitals 報告根據 CrUX 資料顯示需要關注的 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);

Lab 資料（合成測試）

Lab 工具在受控環境中模擬載入，非常適合除錯和 CI 整合。

• Lighthouse：內建於 Chrome DevTools，可作為 CLI 使用，並整合到 PageSpeed Insights 中。它報告 lab 指標和改善機會。
• WebPageTest：具有自訂網路條件和影片條的高階測試。
• Chrome DevTools 效能面板：錄製並分析執行時期效能，包括影響 INP 的長任務。

最佳實踐：使用 lab 資料來找出修正方法，並使用 field 資料來驗證影響。

改善最大內容繪製 (LCP)

LCP 通常由主視覺圖片或大型文字區塊主導。優化這些：

1. 優化 LCP 資源：壓縮圖片（使用 WebP/AVIF），使用 srcset 提供響應式尺寸，並在 LCP 圖片關鍵時預載它。
2. 消除阻擋渲染的資源：內聯關鍵 CSS，延遲非關鍵 CSS 和 JavaScript。
3. 改善伺服器回應時間 (TTFB)：使用 CDN、啟用快取，並優化後端查詢。
4. 減少客戶端渲染：對於 SPA，考慮對初始視圖使用伺服器端渲染 (SSR) 或靜態生成。

範例：預載 LCP 圖片：

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

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

INP 衡量使用者互動與下一次繪製之間的延遲。長任務和繁重的 JavaScript 是常見的罪魁禍首。

1. 拆分長任務：使用 setTimeout、requestIdleCallback 或 scheduler API 來讓出主執行緒。
2. 優化事件處理常式：對昂貴的處理常式進行防抖或節流；避免版面抖動。
3. 減少 JavaScript 執行時間：程式碼分割、tree-shaking，並延遲非關鍵腳本。
4. 使用 Web Workers 處理 CPU 密集型工作。

範例：讓出主執行緒：

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // ... 做一些工作
  await yieldToMain();
  // ... 繼續
}

改善累積版面位移 (CLS)

CLS 發生在元素意外移動時。透過以下方式防止它：

• 始終在圖片和影片上包含 width 和 height 屬性，或使用 CSS aspect-ratio。
• 為動態內容（廣告、嵌入內容、iframe）預留空間，使用 min-height 或佔位符。
• 避免在現有內容上方插入內容，除非由使用者互動觸發。
• 使用 font-display: optional 或預載字型 以避免 FOIT/FOUT 位移。

範例：為廣告預留空間：

<div>
  <!-- 廣告載入這裡 -->
</div>

持續改善的工具與工作流程

效能不是一次性修復。將測量整合到你的工作流程中：

• 設定預算：使用 Lighthouse CI 在拉取請求中強制執行閾值。
• 監控 field 資料：使用 CrUX 或你自己的 RUM 設定儀表板。
• 優先處理修正：專注於與「良好」閾值差距最大的指標。
• 在真實裝置上測試：模擬中階行動裝置以捕捉問題。

如需快速檢查，請透過 PageSpeed Insights 執行你的頁面；它結合了 lab 和 field 資料。

常見問題

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

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

CrUX 資料多久更新一次？

CrUX 資料每天更新，但資料集反映的是滾動的 28 天視窗。Search Console 定期更新。

我可以在不改變設計的情況下改善 Core Web Vitals 嗎？

可以。許多改善是技術性的：優化圖片、延遲腳本、為動態內容預留空間，以及減少主執行緒工作。

準備好分析你網站的效能了嗎？使用我們的 Nginx 日誌分析器 來找出影響 TTFB 和 LCP 的緩慢伺服器回應。