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

你的使用者沒什麼耐心。如果網站載入超過幾秒，他們就會離開。搜尋引擎也注意到了：Core Web Vitals 是排名訊號。但改善這些指標卻像在迷宮中摸索。本指南將為你撥開迷霧。你將了解每項指標的意義、如何準確衡量，以及具體的改善步驟。

什麼是 Core Web Vitals？

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

• Largest Contentful Paint (LCP)：主要內容載入需要多久。目標：低於 2.5 秒。
• Interaction to Next Paint (INP)：頁面回應使用者輸入的速度。目標：低於 200 毫秒。
• Cumulative Layout Shift (CLS)：載入過程中版面跳動的程度。目標：低於 0.1。

這些指標是從真實使用者工作階段（欄位資料）和合成測試（實驗室資料）測量而來。欄位資料才是影響排名的關鍵。

如何衡量 Core Web Vitals

你需要實驗室資料和欄位資料兩者兼具。實驗室資料有助於除錯；欄位資料則反映實際使用者體驗。

實驗室工具

• Chrome DevTools 中的 Lighthouse：執行稽核以取得分數和改善機會。
• PageSpeed Insights：結合某個網址的實驗室和欄位資料。
• WebPageTest：進階瀑布圖分析。

欄位工具

• Chrome User Experience Report (CrUX)：來自 Chrome 的真實使用者資料，可透過 PageSpeed Insights 或 BigQuery 取得。
• web-vitals JavaScript 程式庫：從你自己的使用者收集指標並傳送至分析工具。

若要收集欄位資料，請將 web-vitals 程式庫加入你的網站：

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

這會為你帶來持續的真實使用者指標串流。

改善 LCP

LCP 通常是最大的圖片、影片或文字區塊。若要改善它，請聚焦於關鍵路徑。

1. 最佳化圖片：壓縮圖片、使用 WebP 或 AVIF 等現代格式，並設定明確的寬度和高度。像 Image Compressor 這類工具能協助縮減檔案大小，而不會造成明顯的品質損失。
2. 預載 LCP 資源：為首屏圖片或字型加上 <link rel="preload">。
3. 縮短伺服器回應時間：使用 CDN、啟用快取，並最佳化後端查詢。
4. 消除阻礙渲染的資源：內嵌關鍵 CSS，延後載入非關鍵 JavaScript。
5. 使用回應式圖片：透過 srcset 提供適當尺寸的圖片。

預載 LCP 圖片的範例：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

改善 INP

INP 衡量回應性。長時間任務會阻塞主執行緒，延遲視覺回饋。

• 拆分長時間任務：使用 setTimeout 或 requestIdleCallback 讓出主執行緒。
• 最佳化事件處理常式：對耗費資源的處理常式進行防抖或節流。
• 減少 JavaScript：移除未使用的程式碼、進行程式碼分割，並延遲載入非關鍵模組。
• 使用 web worker 處理繁重運算。
• 避免過大的 DOM 尺寸：將 DOM 節點數保持在 1,500 以下。

讓出主執行緒的範例：

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

改善 CLS

當元素意外位移時就會發生 CLS。常見原因包括：沒有尺寸的圖片、廣告、嵌入內容，以及動態注入的內容。

• 一律為圖片和影片設定寬度和高度。
• 為廣告和嵌入內容保留空間，使用 CSS aspect-ratio 或固定容器。
• 避免在現有內容上方插入內容，除非是由使用者互動觸發。
• 使用 font-display: optional 以避免字型替換造成的位移，或預載字型。
• 使用 transform 動畫，而非會觸發版面配置的屬性。

為圖片保留空間的範例：

<img src="#" width="800" height="600" alt="...">

工具與工作流程

將效能檢查整合到你的開發工作流程中：

• 在 CI 中執行 Lighthouse，以捕捉效能退步。
• 使用 web-vitals 監控欄位資料並設定警示。
• 分析伺服器日誌以找出緩慢的端點。Nginx Log Analyzer 能協助你找出緩慢的請求和錯誤。
• 在真實裝置和受限網路上進行測試。

指標與目標比較

常見問題

什麼是 Core Web Vitals？

Core Web Vitals 是三項指標——LCP、INP 和 CLS——用來衡量載入、互動性和視覺穩定性。Google 將它們用作排名訊號。

我要如何衡量 Core Web Vitals？

使用 Lighthouse 等實驗室工具進行除錯，並使用 web-vitals 程式庫或 CrUX 等欄位工具取得真實使用者資料。兩者都很重要。

什麼是良好的 LCP 分數？

良好的 LCP 低於 2.5 秒。超過 4 秒則算差。請最佳化圖片、預載關鍵資源，並縮短伺服器回應時間。

準備好加速你的網站了嗎？先使用我們免費的 Image Compressor 壓縮圖片，立即改善 LCP。