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

你已經建立了一個快速的網站，但使用者仍抱怨緩慢。或者 Google Search Console 顯示你的頁面 Core Web Vitals 為「不良」。你並不孤單——許多開發者難以將效能指標轉化為實際改善。Core Web Vitals 是 Google 以使用者為中心的指標，量化載入、互動性與視覺穩定性。忽略它們可能損害你的搜尋排名與使用者滿意度。本指南將透過可執行的步驟，引導你測量並改善每個關鍵指標。

什麼是 Core Web Vitals？

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

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

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

如何測量 Core Web Vitals

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

實驗室工具

• Lighthouse：內建於 Chrome DevTools，它審核效能並提供 LCP、FID（作為 TBT）和 CLS 的分數。在無痕模式下執行以避免擴充功能扭曲結果。
• WebPageTest：提供詳細的膠片strip和瀑布圖，有助於診斷 LCP 瓶頸。
• PageSpeed Insights：結合實驗室和現場資料，顯示 Lighthouse 分數和來自 Chrome 使用者體驗報告 (CrUX) 的真實使用者指標。

現場工具

• Chrome UX 報告 (CrUX)：數百萬個網站的真實使用者指標的公開資料集。透過 PageSpeed Insights 或 BigQuery 存取。
• Google Search Console：在「Core Web Vitals」報告下，它按狀態（不良、需要改進、良好）對 URL 進行分組。
• Web Vitals JavaScript 函式庫：將此片段加入你的網站，以透過 Google Analytics 或你自己的端點收集指標。

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. 優化圖片：使用 WebP 或 AVIF 等現代格式壓縮圖片。使用帶有 srcset 和 sizes 的回應式圖片來提供適當大小的圖片。延遲載入首屏以下的圖片，但絕不要延遲載入 LCP 圖片。
2. 預載關鍵資源：為 LCP 圖片或字型添加 <link rel="preload">。例如：<link rel="preload" as="image" href="#">。
3. 消除阻塞渲染的資源：延遲非關鍵 CSS 和 JavaScript。內聯關鍵 CSS 並異步載入其餘部分。
4. 使用 CDN：從內容傳遞網路提供資源以減少延遲。
5. 減少伺服器回應時間：優化後端查詢、使用快取，並考慮邊緣渲染。

如需深入探討，請參閱 web.dev 的 LCP 指南。

改善首次輸入延遲 (FID)

FID 測量回應性。高 FID 意味著瀏覽器的主執行緒忙碌，無法快速回應使用者輸入。要改善 FID：

• 拆分長任務：使用 setTimeout 或 requestIdleCallback 將 JavaScript 分成較小的區塊。
• 最小化主執行緒工作：透過程式碼分割、tree-shaking 和移除未使用的 polyfill 來減少 JavaScript 執行時間。
• 使用 Web Workers 進行大量計算。
• 避免大型 JavaScript 套件：使用 webpack-bundle-analyzer 進行審核，並考慮延遲載入非關鍵腳本。

注意：FID 將於 2024 年 3 月被互動至下一次繪製 (INP) 取代。改善 INP 的策略類似——專注於減少主執行緒阻塞。

改善累積版面位移 (CLS)

CLS 測量意外版面位移。常見原因包括沒有尺寸的圖片、廣告、嵌入內容和網頁字型。要修復 CLS：

• 始終在圖片和影片上包含 width 和 height 屬性。這允許瀏覽器保留空間。
• 為廣告和嵌入內容保留空間：使用 CSS aspect-ratio 或佔位元素。
• 避免在現有內容上方插入內容，除非是回應使用者互動。
• 對網頁字型使用 font-display: swap 以防止不可見文字 (FOIT)，但要注意如果備用字型有不同的度量，swap 可能導致版面位移。考慮使用 size-adjust 或 font-display: optional。

在 Chrome DevTools 中使用 Layout Instability API 進行測試，以精確定位位移。

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

效能不是一次性的修復。設定一個工作流程：

1. 基準：在關鍵頁面上執行 Lighthouse 並記錄分數。
2. 監控現場資料：使用 web-vitals 函式庫將指標發送到你的分析平台。為回歸設定警報。
3. 整合到 CI：使用 Lighthouse CI 在超出效能預算時使建置失敗。
4. 定期審核：每月在 Search Console 中審查 Core Web Vitals。

記住，改善應以使用者為中心，而不僅僅是指標驅動。快速的網站讓使用者愉悅並提升 SEO。

常見問題

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

LCP：良好 ≤ 2.5 秒，需要改進 ≤ 4 秒，不良 > 4 秒。FID：良好 ≤ 100 毫秒，需要改進 ≤ 300 毫秒，不良 > 300 毫秒。CLS：良好 ≤ 0.1，需要改進 ≤ 0.25，不良 > 0.25。

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

Search Console 中的現場資料每天更新，但有意義的趨勢需要數週。透過分析持續監控並每月審查。在重大程式碼變更後進行實驗室測試。

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

是的，Google 將頁面體驗作為排名信號。雖然內容仍然是主要因素，但良好的 Core Web Vitals 可以給你優勢，尤其是在競爭激烈的領域。

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