Core Web Vitals：衡量與改善以提升網頁效能

你已經建立了一個現代化的網頁應用程式，但使用者抱怨它感覺很慢。搜尋排名下降。你檢查了程式碼——沒有明顯的問題。問題可能出在 Core Web Vitals (CWV)，這是 Google 用來衡量使用者體驗的指標。本指南將展示如何實際衡量並改善它們。

什麼是 Core Web Vitals？

Core Web Vitals 是三個量化真實世界使用者體驗的指標：

• Largest Contentful Paint (LCP)：主要內容載入所需的時間。目標為 ≤2.5 秒。
• First Input Delay (FID)：從第一次使用者互動到回應的時間。目標為 ≤100 毫秒。
• Cumulative Layout Shift (CLS)：視覺穩定性——元素意外移動的程度。目標為 ≤0.1。

這些指標是 Google 頁面體驗信號的一部分，並直接影響 SEO。但更重要的是，它們反映了真實使用者的挫折感。

如何衡量 Core Web Vitals

你需要實驗室數據和現場數據。實驗室數據有助於除錯；現場數據反映實際使用者。

實驗室工具

• Lighthouse（在 Chrome DevTools 或線上）——快速審核，提供分數和改進機會。
• WebPageTest——進階瀑布圖分析和影片條。
• Chrome DevTools Performance 面板——深入分析執行時期。

現場工具

• Chrome User Experience Report (CrUX)——真實使用者指標的公開資料集。
• PageSpeed Insights——結合實驗室和現場數據。
• Search Console Core Web Vitals 報告——按狀態分組 URL。
• web-vitals JavaScript 函式庫——收集你自己的現場數據。

從 PageSpeed Insights 開始取得基準值。然後使用 web-vitals 函式庫在你的網站上進行檢測，並將指標發送到你的分析工具。

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

改善 LCP

LCP 通常是最主要的問題。優化關鍵渲染路徑：

1. 識別 LCP 元素——通常是主視覺圖片、標題或影片海報。
2. 優化圖片——壓縮、使用現代格式 (WebP/AVIF)，並設定明確的尺寸。
3. 預載 LCP 資源——對圖片或字型使用 <link rel="preload">。
4. 減少伺服器回應時間——使用快取、CDN 和高效的後端。
5. 消除阻擋渲染的資源——延遲非關鍵的 CSS/JS。

對於圖片，像 Image Compressor 這樣的工具可以幫助你在不損失品質的情況下縮小檔案。

改善 FID

FID 衡量輸入回應性。長時間的 JavaScript 任務會阻塞主執行緒。

• 拆分長任務——使用 setTimeout 或 requestIdleCallback 來讓出控制權。
• 程式碼分割——只載入必要的 JS。
• 優化事件處理常式——對昂貴的操作進行去抖動或節流。
• 使用 Web Workers 處理 CPU 密集型工作。

// 範例：讓出主執行緒
function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function processItems(items) {
  for (const item of items) {
    // 處理項目
    await yieldToMain();
  }
}

改善 CLS

佈局位移會困擾使用者。透過預留空間來防止：

• 設定圖片和影片的寬度/高度——或使用 CSS aspect-ratio。
• 不要在現有內容上方注入內容——除非是回應使用者互動。
• 使用 transform 動畫，而不是會觸發佈局的屬性。
• 預載字型並使用 font-display: swap 以避免文字不可見。

指標與工具比較

實用工作流程

1. 衡量——對關鍵頁面執行 PageSpeed Insights。記錄現場數據（如果有）和實驗室分數。
2. 優先處理——專注於表現不佳且影響最多使用者的指標。
3. 修復——應用上述技巧，從最大的收益開始（例如圖片優化）。
4. 驗證——重新執行實驗室測試，並透過 web-vitals 監控現場數據。
5. 迭代——效能是持續的；設定預算並監控回歸。

記住：現場數據是基準真相。實驗室工具有助於除錯，但可能無法反映真實使用者條件。

常見問題

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

在生產環境中使用 web-vitals 函式庫持續監控。在主要發布前執行實驗室審核，並定期（例如每月）對關鍵頁面進行審核。

改善 Core Web Vitals 真的會影響 SEO 嗎？

是的，頁面體驗是一個排名信號，但內容相關性仍然是首要的。良好的 CWV 改善使用者體驗，間接有助於 SEO。

實驗室數據和現場數據有什麼區別？

實驗室數據是在受控環境中模擬條件下收集的；現場數據來自各種裝置和網路上的真實使用者。兩者都要使用：實驗室用於除錯，現場用於真相。

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