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

您的使用者沒有耐心。如果頁面載入太久，或他們閱讀時頁面不斷跳動，他們就會離開。Core Web Vitals（CWV）是 Google 用來量化這些挫折感的指標：Largest Contentful Paint（LCP）衡量載入速度、Interaction to Next Paint（INP）衡量互動反應性，以及 Cumulative Layout Shift（CLS）衡量視覺穩定性。在本指南中，您將學習如何衡量這些指標，並套用實際有效的修正方法。

什麼是 Core Web Vitals？

Core Web Vitals 是一組反映使用者體驗的真實世界指標。它們是 Google 頁面體驗訊號的一部分，並用於排名。每個指標都有「良好」的閾值：

• LCP：應 ≤ 2.5 秒。
• INP：應 ≤ 200 毫秒。
• CLS：應 ≤ 0.1。

這些閾值是在頁面載入的第 75 百分位數測量，意味著 75% 的造訪應達到目標。

如何衡量 Core Web Vitals

您需要實驗室數據和現場數據。實驗室數據有助於除錯；現場數據顯示真實使用者體驗。

現場數據（真實使用者）

• Chrome User Experience Report（CrUX）：提供您來源的彙總真實使用者數據。可透過 PageSpeed Insights 或 CrUX 儀表板存取。
• web-vitals JavaScript 函式庫：將這個輕量腳本加入您的網站，將指標傳送到您的分析工具。

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

實驗室數據（合成）

• Lighthouse：內建於 Chrome DevTools，可稽核效能並給予分數。
• WebPageTest：用於網路節流下的深入分析。

使用實驗室數據快速迭代，但始終要用現場數據驗證。

改善 Largest Contentful Paint（LCP）

LCP 衡量最大的內容元素（通常是主視覺圖片或標題）變為可見的時間。要改善它：

1. 最佳化圖片：壓縮圖片、使用 WebP 或 AVIF 等現代格式，並透過 srcset 提供響應式尺寸。
2. 預載關鍵資源：對 LCP 圖片和關鍵字型使用 <link rel="preload">。
3. 消除阻礙渲染的資源：延遲非關鍵 CSS 和 JavaScript。內嵌關鍵 CSS。
4. 使用 CDN：從靠近使用者的位置提供資源。
5. 啟用文字壓縮：對文字型資源使用 Brotli 或 gzip。

對於圖片壓縮，您可以使用像 Image Compressor 這樣的工具，快速縮小檔案大小而不損失品質。

改善 Interaction to Next Paint（INP）

INP 衡量頁面對使用者互動的反應性。高 INP 意味著瀏覽器忙碌，無法快速回應。要改善它：

1. 拆分長任務：使用 setTimeout 或 requestIdleCallback 將 JavaScript 工作分成較小的區塊。
2. 最佳化事件處理常式：對昂貴的處理常式進行去抖動或節流。避免版面配置抖動。
3. 減少 JavaScript：移除未使用的程式碼、進行程式碼分割，並延遲非關鍵腳本。
4. 使用 Web Workers：將繁重計算卸載到工作執行緒。

此外，確保您沒有用第三方腳本阻塞主執行緒。定期稽核它們。

改善 Cumulative Layout Shift（CLS）

CLS 衡量意外的版面配置位移。要保持低值：

1. 設定尺寸屬性：始終在圖片和影片上包含 width 和 height。
2. 為動態內容保留空間：對廣告和嵌入內容使用 CSS aspect-ratio 或佔位符。
3. 避免在現有內容上方插入內容：除非是回應使用者互動。
4. 使用 transform 動畫：動畫優先使用 transform 和 opacity，而非觸發版面配置的屬性。

工具與工作流程

以下是持續監控和改善 CWV 的簡單工作流程：

請記住，改善應隨著時間用真實使用者數據驗證。

常見問題

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

LCP ≤ 2.5 秒、INP ≤ 200 毫秒、CLS ≤ 0.1，在頁面載入的第 75 百分位數測量。

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

持續監控現場數據，並在重大變更後執行實驗室稽核。每月審查是個好做法。

我可以在不重新設計網站的情況下改善 Core Web Vitals 嗎？

可以。許多改善措施，如圖片最佳化、延遲腳本和設定尺寸屬性，只需極少的程式碼變更即可完成。

準備好最佳化圖片以改善 LCP 了嗎？試試我們免費的 Image Compressor，立即縮小檔案大小。