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

您已經建立了一個快速的網站，但使用者仍抱怨速度慢。或者您的 SEO 排名在 Google 更新後下降了。Core Web Vitals（CWV）很可能是罪魁禍首。這些指標衡量真實世界中的使用者體驗，並直接影響搜尋排名和轉換率。在本指南中，您將了解什麼是 CWV、如何準確測量它們，以及改善每個指標的實用步驟。

什麼是 Core Web Vitals？

Core Web Vitals 是 Google 用來量化使用者體驗的一組三個指標：

• 最大內容繪製 (LCP)： 衡量載入效能。它標記最大的內容元素（圖片、文字區塊或影片）變為可見的時間。良好的 LCP 為 2.5 秒或更短。
• 互動到下一次繪製 (INP)： 衡量回應性。它記錄所有互動（點擊、輕觸、按鍵）的延遲，並報告最差的一個（或對於有許多互動的頁面接近最差）。良好的 INP 為 200 毫秒或更短。
• 內容版面配置位移 (CLS)： 衡量視覺穩定性。它量化頁面載入期間意外的版面配置位移。良好的 CLS 為 0.1 或更小。

這些閾值基於頁面載入的第 75 百分位數，並按行動裝置和桌上型電腦區分。因此您需要確保 75% 的使用者體驗到良好的值。

如何測量 Core Web Vitals

您可以透過兩種方式測量 CWV：實驗室（合成測試）和現場（真實使用者監控）。兩者都有價值，但 Google 用於排名的是現場資料。

現場資料：真實使用者監控 (RUM)

現場資料來自實際使用者。最佳來源是 Chrome 使用者體驗報告 (CrUX)，它為 Google Search Console 中的 Core Web Vitals 報告提供資料。您也可以使用 web-vitals 函式庫 收集自己的 RUM 資料並傳送到分析端點。

若要查看您網站的 CrUX 資料，請使用 PageSpeed Insights 或 CrUX API。這些會顯示您來源的 LCP、INP 和 CLS 分佈。

實驗室資料：合成測試

實驗室工具在受控環境中模擬頁面載入。它們非常適合除錯和 CI/CD 整合。熱門選項：

• Lighthouse： 內建於 Chrome DevTools。在 Audits 標籤或透過 CLI 執行。
• WebPageTest： 進階測試，包含影片條和瀑布圖。
• PageSpeed Insights： 結合實驗室和現場資料。

請記住：實驗室資料不包含真實世界的變異性，因此請用於診斷，而非作為排名預測指標。

改善最大內容繪製 (LCP)

LCP 通常是最具影響力的指標。最大的元素通常是主視覺圖片、標題或影片海報。若要改善 LCP：

1. 優化圖片： 壓縮圖片，使用 WebP 或 AVIF 等現代格式，並透過 srcset 提供回應式尺寸。像 圖片壓縮工具 這樣的工具可以幫助減少檔案大小而不損失品質。
2. 預載 LCP 資源： 為主視覺圖片或字型新增 <link rel="preload"> 以提早開始載入。
3. 消除封鎖渲染的資源： 內嵌關鍵 CSS、延遲非關鍵 CSS，並以非同步方式載入 JavaScript。
4. 使用 CDN： 從內容傳遞網路提供資產以減少延遲。
5. 積極快取： 使用 Cache-Control 標頭為靜態資產設定較長的快取生命週期。

預載 LCP 圖片的範例：

<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 通常來自封鎖主執行緒的長 JavaScript 任務。若要改善 INP：

• 拆分長任務： 使用 setTimeout、requestIdleCallback 或 Scheduler API 來讓出主執行緒。
• 優化事件處理常式： 對昂貴的處理常式進行去抖動或節流，並避免版面配置震盪。
• 減少 JavaScript 大小： 進行程式碼分割、樹狀搖晃，並延遲非關鍵指令碼。
• 使用 Web Worker： 將繁重計算卸載到 Worker 執行緒。
• 最小化第三方指令碼： 第三方指令碼經常導致長任務。以非同步方式載入它們並稽核其影響。

您可以使用 web-vitals 函式庫在現場測量 INP：

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // 傳送到您的分析端點
});

改善內容版面配置位移 (CLS)

CLS 發生在元素於載入期間意外移動時。常見原因：沒有尺寸的圖片、廣告、嵌入內容，以及導致 FOIT/FOUT 的網頁字型。若要改善 CLS：

• 一律在圖片和影片上設定 width 和 height 屬性。 這會保留空間。
• 為動態內容（廣告、嵌入內容）保留空間，使用 CSS min-height 或 aspect-ratio 盒子。
• 使用 font-display: swap 並預載字型，以避免不可見文字和版面配置位移。
• 避免在現有內容上方插入內容，除非是回應使用者互動。

使用 CSS aspect-ratio 保留空間的範例：

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

持續監控的工具與工作流程

改善 CWV 不是一次性的任務。設定持續監控：

• Lighthouse CI： 在您的 CI/CD 管道中執行 Lighthouse，如果分數下降則使建置失敗。
• 真實使用者監控： 使用 web-vitals 函式庫將指標傳送到您的分析平台（例如 Google Analytics 4、自訂端點）。
• Search Console： 監控 Core Web Vitals 報告是否有退步。
• 警示： 設定當現場資料超過閾值時的警示。

若要快速檢查，請使用 HTML 轉圖片 工具在不同階段擷取頁面的視覺快照，幫助您手動發現版面配置位移。

常見問題

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

良好：LCP ≤ 2.5s，INP ≤ 200ms，CLS ≤ 0.1。需要改進：LCP ≤ 4s，INP ≤ 500ms，CLS ≤ 0.25。差：超過這些值。

CrUX 資料多久更新一次？

CrUX 資料每日更新，但 28 天滾動視窗意味著變更需要時間才能反映。若要更快獲得回饋，請使用您自己的 RUM。

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

可以。許多改善是技術性的：圖片壓縮、預載、延遲指令碼和保留空間。這些通常沒有視覺影響。

準備好優化您的圖片以獲得更好的 LCP 了嗎？試試我們免費的 圖片壓縮工具，在保持品質的同時減少檔案大小。