Core Web Vitals：如何測量與改善

什麼是 Core Web Vitals？

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

LCP：最大的內容元素（圖片、文字區塊）渲染完成的時間。良好：≤2.5秒。
INP：從使用者互動到下一次繪製的時間。良好：≤200毫秒。
CLS：版面位移分數的總和。良好：≤0.1。

這些閾值是在頁面載入的第 75 百分位進行評估，意味著 75% 的造訪應達到目標。

如何測量 Core Web Vitals

您需要實驗室數據和現場數據。實驗室工具模擬條件；現場數據來自真實使用者。

實驗室工具

Chrome DevTools 中的 Lighthouse：執行效能、無障礙和 SEO 審核。它提供實驗室 CWV 分數和改進機會。
WebPageTest：進階測試，可自訂網路條件和裝置模擬。

現場工具

Chrome UX Report (CrUX)：真實使用者指標的公開資料集。可透過 PageSpeed Insights 或 BigQuery 存取。
web-vitals JavaScript 函式庫：從實際使用者收集 CWV 並傳送到您的分析工具。

使用現場數據識別真實問題，然後用實驗室工具除錯並驗證修復。

改善最大內容繪製 (LCP)

LCP 通常是主視覺圖片或主標題。優化這些元素：

優化圖片：壓縮圖片，使用 WebP 或 AVIF 等現代格式，並透過 srcset 提供響應式尺寸。
預載關鍵資源：為 LCP 圖片或字型新增 <link rel="preload">。
減少伺服器回應時間：使用快取、CDN 和高效的後端程式碼。
消除阻礙渲染的資源：延遲非關鍵 CSS/JS，內聯關鍵 CSS。

範例：預載您的 LCP 圖片：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

同時在 <img> 標籤上設定 fetchpriority="high" 以提示重要性。

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

INP 衡量對點擊、輕觸和鍵盤輸入的靈敏度。長任務會阻塞主執行緒。要改善 INP：

拆分長任務：使用 setTimeout 或 requestIdleCallback 讓出主執行緒。
優化事件處理常式：對昂貴的操作進行去抖動或節流。
減少 JavaScript：程式碼分割、tree-shaking，並延遲非關鍵腳本。
使用 Web Workers 處理 CPU 密集型工作。

範例：讓出主執行緒：

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

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

改善累積版面位移 (CLS)

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

設定寬度和高度：在圖片和影片上設定，或使用 CSS aspect-ratio。
為動態內容預留空間（廣告、嵌入內容），使用 min-height。
使用 font-display: swap 並預載字型，以避免不可見文字造成位移。
避免在現有內容上方插入內容，除非由使用者互動觸發。

範例：為廣告預留空間：

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

指標與工具比較

指標	測量內容	良好閾值	主要工具
LCP	載入效能	≤2.5秒	Lighthouse, CrUX, web-vitals
INP	互動性	≤200毫秒	Lighthouse, web-vitals
CLS	視覺穩定性	≤0.1	Lighthouse, CrUX, web-vitals

改善 CWV 的實用工作流程

測量現場數據：使用 PageSpeed Insights 或 CrUX 找出分數不佳的頁面。
在這些頁面上執行 Lighthouse 以獲得具體的改進機會。
按影響優先排序修復：通常 LCP 和 CLS 最容易改善。
實施變更並在實驗室中測試。
部署並監控現場數據以確認改善。
迭代剩餘問題。

請記住，CWV 是以使用者為中心；始終用真實使用者數據驗證。

常見問題

什麼是 Core Web Vitals，為什麼它們重要？

Core Web Vitals 是三項指標（LCP、INP、CLS），量化載入、互動性和視覺穩定性。它們重要是因為反映真實使用者體驗，並被 Google 用作排名訊號。

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

持續監控現場數據，並在重大變更後執行實驗室測試。每月審查 CrUX 數據是個好做法。

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

可以。許多改進如圖片優化、預載和版面修復可以逐步應用，無需完整重建。

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