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

你已經建立了一個快速的網站，但使用者仍然抱怨速度慢。或者你的 SEO 排名在 Google 更新後下降了。罪魁禍首可能是 Core Web Vitals——Google 用來衡量使用者體驗的指標。在本指南中，你將了解它們是什麼、如何準確衡量它們，以及改善每一項的實用步驟。

什麼是 Core Web Vitals？

Core Web Vitals 是三個具體指標，用於量化使用者體驗的關鍵面向：

• 最大內容繪製 (LCP)： 衡量載入效能。它標記最大的內容元素（圖片、影片或文字區塊）變為可見的時間。目標是 LCP 低於 2.5 秒。
• 首次輸入延遲 (FID)： 衡量互動性。它記錄從使用者首次互動（例如點擊連結）到瀏覽器回應的時間。目標是 FID 低於 100 毫秒。
• 累積版面位移 (CLS)： 衡量視覺穩定性。它量化載入期間意外的版面位移。目標是 CLS 低於 0.1。

這些指標是 Google 頁面體驗信號的一部分，直接影響 SEO。但更重要的是，它們反映了真實使用者的挫折感——載入緩慢、點擊無回應和內容跳動。

如何衡量 Core Web Vitals

你無法改善你沒有衡量的東西。有兩種主要方法：實驗室資料（合成測試）和現場資料（真實使用者監控）。使用兩者以獲得完整畫面。

實驗室工具

• Lighthouse： 內建於 Chrome DevTools（F12 → Lighthouse 標籤）。它審核效能並提供 LCP、FID（作為 TBT）和 CLS 的分數。在無痕模式下執行以避免擴充功能扭曲結果。
• WebPageTest： 用於詳細瀑布圖分析和從多個位置測試的進階工具。
• PageSpeed Insights： 結合實驗室和現場資料。如果可用，它會顯示真實世界的 CrUX 資料。

現場工具

• Chrome 使用者體驗報告 (CrUX)： 數百萬個網站的真實使用者指標的公開資料集。透過 PageSpeed Insights 或 BigQuery 存取。
• Google Search Console： Core Web Vitals 報告根據現場資料顯示需要關注的 URL 群組。
• web-vitals JavaScript 函式庫： 加入你的網站以收集自己的現場資料並傳送到分析平台。

// 範例：使用 web-vitals 函式庫
import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  // 替換為你的分析端點
  console.log(metric.name, metric.value);
}

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

改善最大內容繪製 (LCP)

LCP 通常是最具挑戰性的指標。它受伺服器回應時間、資源載入和用戶端渲染的影響。請遵循以下步驟：

1. 優化伺服器回應： 使用快取（CDN、伺服器端快取）、升級主機，並減少後端處理時間。
2. 優先處理關鍵資源： 預載 LCP 圖片或字型。對關鍵資產使用 <link rel="preload">。
3. 壓縮圖片： 提供現代格式（WebP、AVIF）並在不損失品質的情況下壓縮圖片。像 Image Compressor 這樣的工具可以幫助你。
4. 消除阻礙渲染的資源： 延遲非關鍵 CSS 和 JavaScript。內聯關鍵 CSS。
5. 使用 CDN： 在全球分散內容以減少延遲。

改善首次輸入延遲 (FID)

FID 衡量回應性。高 FID 表示當使用者嘗試互動時主執行緒忙碌。要改善：

• 拆分長任務： 使用 setTimeout 或 requestIdleCallback 將 JavaScript 分成較小的區塊。
• 最小化主執行緒工作： 移除未使用的 JavaScript、延遲非關鍵腳本，並使用程式碼分割。
• 優化事件處理常式： 避免在事件監聽器中進行繁重的同步工作。
• 使用 Web Workers： 將昂貴的計算轉移到工作執行緒。

注意：FID 將於 2024 年 3 月被 Interaction to Next Paint (INP) 取代。原則仍然類似——保持主執行緒空閒。

改善累積版面位移 (CLS)

CLS 衡量意外的版面位移。常見原因包括沒有尺寸的圖片、廣告、嵌入內容和網頁字型。透過以下方式修復它們：

• 始終在圖片和影片上設定寬度和高度屬性： 這會保留空間並防止位移。
• 為廣告和嵌入內容保留空間： 使用 CSS aspect-ratio 或固定大小的容器。
• 避免在現有內容上方插入內容： 除非是回應使用者互動。
• 使用 font-display: swap 並預載字型： 最小化字型替換位移。

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

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

• 加入 web-vitals 函式庫以將指標傳送到你的分析平台。
• 在你的流程中使用 Lighthouse CI，如果分數低於閾值則使建置失敗。
• 定期檢查 Search Console 的 Core Web Vitals 報告。

在開發期間進行快速檢查時，使用 Chrome DevTools 中的 Lighthouse 標籤。如需更深入的分析，請嘗試 WebPageTest。

常見問題

什麼是好的 LCP 分數？

好的 LCP 是 2.5 秒或更少。介於 2.5 到 4 秒之間的分數需要改善，超過 4 秒則是不佳。

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

在重大變更後衡量，並透過現場資料持續衡量。實驗室測試非常適合除錯；現場資料反映真實使用者體驗。

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

是的，Google 使用頁面體驗作為排名信號，但內容相關性仍然是首要的。良好的 Core Web Vitals 也能改善使用者參與度和轉換率。

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