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

使用者期望快速、流暢的體驗。Google 的 Core Web Vitals（CWV）將這種體驗量化為：最大內容繪製（LCP）、首次輸入延遲（FID）和累計版面位移（CLS）。分數不佳會損害 SEO 和轉換率。本指南說明如何透過可執行的步驟衡量與改善每個指標。

什麼是 Core Web Vitals？

Core Web Vitals 是 Google 用作排名信號的三個以使用者為中心的指標：

• LCP：最大的內容元素（圖片、文字區塊）變為可見所需的時間。良好：≤2.5 秒。
• FID：從首次使用者互動（點擊、輕觸）到瀏覽器回應的時間。良好：≤100 毫秒。
• CLS：視覺穩定性——頁面版面意外位移的程度。良好：≤0.1。

這些指標反映真實世界的使用者體驗，而不僅僅是實驗室條件。改善它們能讓您的網站感覺更快、更穩定。

如何衡量 Core Web Vitals

您需要實驗室數據和現場數據。實驗室工具有助於除錯；現場數據（真實使用者監控）顯示實際效能。

實驗室工具

• Lighthouse（在 Chrome DevTools 中）：執行效能、無障礙和 SEO 稽核。它會報告 LCP、CLS 和 TBT（FID 的代理指標）。
• WebPageTest：進階測試，提供影片條和瀑布圖。
• Chrome DevTools 效能面板：錄製並分析執行時效能。

現場工具

• Chrome 使用者體驗報告（CrUX）：數百萬個網站的真實使用者指標公開資料集。
• Google Search Console：Core Web Vitals 報告顯示需要關注的網址群組。
• web-vitals JavaScript 程式庫：收集真實使用者指標並傳送到您的分析工具。

使用現場數據識別有問題的頁面，然後用實驗室工具診斷並修復。

改善最大內容繪製（LCP）

LCP 通常是主視覺圖片或主標題。要加速它：

1. 優化圖片：壓縮、使用現代格式（WebP、AVIF），並提供響應式尺寸。像 Image Compressor 這樣的工具可以幫助在不損失品質的情況下減少檔案大小。
2. 預載關鍵資源：對主視覺圖片、字型和關鍵 CSS 使用 <link rel="preload">。
3. 減少伺服器回應時間：使用快取、CDN，並優化後端查詢。
4. 消除阻礙渲染的資源：延遲非關鍵 JS 和 CSS，內聯關鍵 CSS。
5. 使用 CDN：從靠近使用者的位置提供資源。

範例：預載您的 LCP 圖片：

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

改善首次輸入延遲（FID）

FID 衡量回應性。長時間延遲表示主執行緒忙碌。要改善：

• 拆分長任務：使用 setTimeout 或 requestIdleCallback 讓出主執行緒。
• 優化 JavaScript：程式碼分割、tree-shaking，並延遲非關鍵腳本。
• 減少第三方影響：非同步載入分析工具和廣告，或在互動後載入。
• 使用 Web Worker 處理繁重計算。

同時考慮 Interaction to Next Paint（INP），它將在 2024 年 3 月取代 FID。INP 衡量整個頁面生命週期中的整體回應性。相同的優化措施適用。

改善累計版面位移（CLS）

CLS 發生在元素意外移動時。常見原因：沒有尺寸的圖片、廣告、字型和動態內容。修復方法：

• 始終在圖片和影片上設定寬度和高度，或使用 CSS aspect-ratio。
• 為廣告和嵌入內容保留空間：使用固定大小的佔位元素。
• 避免在現有內容上方插入內容，除非是回應使用者互動。
• 使用 font-display: swap 並預載字型，以避免不可見文字（FOIT）和版面位移。
• 使用 transform 製作動畫，而不是觸發版面的屬性。

範例：為響應式圖片設定長寬比：

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

工具與工作流程

將效能整合到您的開發工作流程中：

1. 在 CI 中執行 Lighthouse 以捕捉回歸。
2. 使用 web-vitals 程式庫將現場數據傳送到您的分析工具。
3. 監控 CrUX 和 Search Console 以了解真實使用者趨勢。
4. 按影響優先排序修復：通常 LCP 和 CLS 能帶來最大的收益。

如需快速優化圖片，請試用我們的 Image Compressor 來減少 LCP 關鍵圖片的大小。

常見問題

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

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

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

透過 RUM 持續監控現場數據。在每次重大程式碼變更時執行實驗室稽核，至少每月一次，以捕捉回歸。

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

是的，Google 將頁面體驗（包括 CWV）用作排名信號。雖然內容仍然是主要因素，但良好的 CWV 可以給您優勢並提高使用者满意度。