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

你已經打造了一個快速的網站，但使用者仍然抱怨速度慢，而且你的搜尋排名也不如預期。問題出在哪？你沒有測量正確的指標。Core Web Vitals（CWV）是 Google 用來衡量真實使用者體驗的指標：最大內容繪製（LCP）、與下次繪製的互動（INP），以及累計版面位移（CLS）。如果你忽略它們，就等於放棄了效能——以及 SEO。

本指南將教你如何準確測量 CWV，並修復最常見的問題。沒有廢話，只有可執行的步驟。

什麼是 Core Web Vitals？

Core Web Vitals 是三項具體指標，用來量化使用者對載入、互動性和視覺穩定性的感受：

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

這些閾值基於 Chrome 使用者體驗報告（CrUX）的真實使用者資料。達到這些標準可提升使用者滿意度，並可能提升搜尋排名。

如何測量 Core Web Vitals

你需要實驗室資料和現場資料。實驗室工具模擬條件；現場資料反映真實使用者。

實驗室工具

• Lighthouse（在 Chrome DevTools 或 CI 中）提供帶有診斷資訊的快照。
• PageSpeed Insights 結合實驗室和現場資料來分析某個 URL。
• Web Vitals 擴充功能 在你瀏覽時於 Chrome 控制台記錄 CWV。

現場工具

• Chrome UX Report (CrUX) 顯示數百萬個網站的彙總真實使用者資料。
• web-vitals JavaScript 函式庫 讓你從自己的使用者收集 CWV 並傳送至分析工具。
• Search Console 根據 CrUX 回報你網站的 CWV 狀態。

先從現場資料找出有問題的頁面，然後使用實驗室工具進行除錯。

改善 LCP

LCP 通常最容易透過幾個針對性的修正來改善。

1. 優化圖片。 使用現代格式（WebP、AVIF），在沒有明顯品質損失的情況下壓縮，並設定明確的寬度/高度。像 Image Compressor 這類工具可以幫助減少檔案大小。
2. 預載 LCP 圖片。 在 head 中加入 <link rel="preload" as="image" href="#">。
3. 消除阻礙渲染的資源。 內嵌關鍵 CSS、延遲非關鍵 CSS/JS，並避免在 head 中使用同步指令碼。
4. 使用 CDN。 從靠近使用者的位置提供資源，以減少延遲。
5. 啟用文字壓縮。 對 HTML、CSS、JS 使用 Brotli 或 gzip。

預載 LCP 圖片的範例：

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

改善 INP

INP 衡量你的頁面回應使用者輸入的速度。長任務會阻塞主執行緒並延遲互動。

1. 拆分長任務。 使用 setTimeout 或 requestIdleCallback 讓出主執行緒。
2. 優化事件處理常式。 對滾動和調整大小等高頻事件進行去抖動或節流。
3. 減少 JavaScript。 進行程式碼分割、樹狀搖晃，並延遲載入非關鍵指令碼。
4. 使用 Web Workers 進行大量計算。
5. 避免過大的 DOM 大小。 如果可能，將 DOM 保持在 1500 個節點以下。

讓出主執行緒的範例：

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

改善 CLS

當元素意外改變位置時，就會發生版面位移。常見原因：沒有尺寸的圖片、廣告、嵌入內容，以及動態注入的內容。

1. 始終在圖片和影片上設定寬度和高度。 這讓瀏覽器可以保留空間。
2. 為廣告和嵌入內容保留空間。 使用 CSS aspect-ratio 或固定容器。
3. 避免在現有內容上方插入內容，除非是由使用者互動觸發。
4. 使用 font-display: swap 並預載字型，以避免不可見文字位移。
5. 小心動畫。 使用 transform 和 opacity，而不是會觸發版面的屬性。

監控與持續改善

效能不是一次性的修復。設定監控以捕捉回歸。

• 使用 web-vitals 函式庫將 CWV 傳送至你的分析工具：

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);

• 設定指標超過閾值時的通知。
• 在 CI 中為每個提取請求執行 Lighthouse。
• 每月檢閱 CrUX 資料以追蹤趨勢。

Core Web Vitals 比較

常見問題

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

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

我應該多久檢查一次 Core Web Vitals？

透過分析工具持續監控現場資料。每月檢閱 CrUX 和 Search Console。在每次重大程式碼變更時執行實驗室測試（Lighthouse）。

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

有些修正，例如壓縮圖片或啟用快取，可以透過外掛或主機設定完成。但更深入的優化（程式碼分割、減少 JS）通常需要開發人員參與。

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