Core Web Vitals：測量與改善以提升網站效能

你的網站載入了，但使用者仍然跳出。緩慢的互動讓訪客感到挫折，而搜尋引擎也注意到了。Core Web Vitals 是 Google 用來衡量真實使用者體驗的指標：最大內容繪製 (LCP)、互動至下次繪製 (INP) 和累計版面配置位移 (CLS)。在本指南中，我們將說明如何準確測量這些指標，並透過實用的程式碼層級技術來改善它們。

什麼是 Core Web Vitals？

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

• LCP 衡量載入效能。它標記最大的內容元素（圖片、文字區塊、影片）變為可見的時間。目標為 ≤ 2.5 秒。
• INP 衡量互動性。它追蹤所有互動（點擊、輕觸、按鍵）的延遲，並回報最差的一次。目標為 ≤ 200 毫秒。
• CLS 衡量視覺穩定性。它為載入期間非預期的版面配置位移評分。目標為 ≤ 0.1。

這些指標是 Google 頁面體驗信號的一部分，但更重要的是，它們反映了真實使用者的挫折感。改善它們對 SEO 和轉換率都有好處。

如何測量 Core Web Vitals

你需要實驗室資料和實際資料。實驗室工具模擬條件；實際資料來自真實使用者。

實驗室工具

• Lighthouse（在 Chrome DevTools 或 CI 中）提供快照以及改善機會。
• PageSpeed Insights 結合來自 Chrome 使用者體驗報告 (CrUX) 的實驗室和實際資料。
• WebPageTest 提供進階指令碼和膠捲檢視。

實際資料工具

• Chrome UX Report (CrUX) 顯示你的來源的彙總真實使用者資料。
• web-vitals 程式庫 讓你從實際使用者收集指標並傳送到你的分析工具。
• Search Console 報告你網站的 Core Web Vitals 狀態。

先檢查關鍵頁面的 PageSpeed Insights。然後設定 web-vitals 程式庫的實際使用者監控，以隨時間追蹤效能。

改善 LCP

LCP 通常是最具影響力的待修正指標。最大的元素通常是主視覺圖片或大型文字區塊。

1. 最佳化關鍵路徑

• 透過快取、CDN 和高效的後端程式碼減少伺服器回應時間 (TTFB)。
• 消除阻擋渲染的資源：內嵌關鍵 CSS，延遲非關鍵 CSS 和 JavaScript。
• 預載 LCP 圖片：<link rel="preload" as="image" href="#">。

2. 最佳化圖片

• 使用 WebP 或 AVIF 等現代格式。
• 使用 srcset 和 sizes 提供回應式圖片。
• 壓縮圖片而不造成明顯的品質損失。如需快速壓縮，試試我們的 Image Compressor。

3. 改善伺服器回應

• 使用 CDN 在全球快取靜態資源。
• 啟用 Brotli 或 gzip 壓縮。
• 最佳化資料庫查詢並使用伺服器端快取。

範例：為 LCP 圖片預載並設定 fetchpriority：

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

改善 INP

INP 衡量你的頁面回應使用者輸入的速度。高 INP 表示互動遲緩。

1. 拆分長任務

• 使用 setTimeout、requestIdleCallback 或 scheduler.yield 讓出主執行緒。
• 避免長時間執行的 JavaScript 函式；將它們拆分成較小的區塊。

2. 最佳化事件處理常式

• 對頻繁事件（scroll、resize、input）進行去抖動或節流。
• 對觸控和滾輪事件使用被動事件監聽器。
• 盡量減少處理常式內的 DOM 更新。

3. 減少 JavaScript 執行

• 對非關鍵 JavaScript 進行程式碼分割和延遲載入。
• 移除未使用的依賴項和 polyfill。
• 對繁重運算使用 web worker。

範例：在長任務中讓出主執行緒：

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

改善 CLS

CLS 衡量非預期的版面配置位移。常見原因：沒有尺寸的圖片、廣告、嵌入內容和動態注入的內容。

1. 一律設定尺寸

• 在圖片和影片上包含 width 和 height 屬性。
• 對回應式容器使用 CSS aspect-ratio。

2. 為動態內容保留空間

• 為廣告和嵌入內容使用預留位置或骨架螢幕。
• 避免在現有內容上方插入內容，除非是回應使用者互動。

3. 最佳化字型載入

• 使用 font-display: swap 避免文字不可見，但要注意可能的版面配置位移。
• 預載關鍵字型以減少交換延遲。

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

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

工具與工作流程

將效能檢查整合到你的開發工作流程中：

• 在 CI（例如 GitHub Actions）中執行 Lighthouse 以捕捉回歸。
• 使用 web-vitals 程式庫將實際資料傳送到你的分析工具。
• 監控 CrUX 和 Search Console 以了解真實使用者趨勢。
• 在真實裝置上測試，尤其是中階手機。

記住：效能是一項功能。像對待其他品質指標一樣對待它。

常見問題

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

LCP：良好 ≤ 2.5 秒，需要改善 ≤ 4.0 秒。INP：良好 ≤ 200 毫秒，需要改善 ≤ 500 毫秒。CLS：良好 ≤ 0.1，需要改善 ≤ 0.25。這些閾值基於真實使用者資料。

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

透過 CrUX 和你自己的 RUM 等工具持續監控實際資料。在每次重大程式碼變更時執行實驗室測試，關鍵頁面至少每月一次。

沒有開發人員也能改善 Core Web Vitals 嗎？

部分修正如圖片壓縮和快取可以透過外掛程式或 CDN 設定完成。然而，更深入的最佳化（程式碼分割、關鍵 CSS）通常需要開發人員參與。

準備好最佳化你的圖片以獲得更好的 LCP 了嗎？試試我們免費的 Image Compressor，在不損失品質的情況下縮減檔案大小。