Core Web Vitals

定義

Core Web Vitals（核心網頁指標）是 Google 於 2020 年推出、2021 年正式納入排名因素的使用者體驗指標集。目前包含三個核心指標：LCP（Largest Contentful Paint，最大內容繪製）衡量載入效能、INP（Interaction to Next Paint，互動到下一次繪製，2024 年 3 月取代 FID）衡量互動反應性、CLS（Cumulative Layout Shift，累積版面配置位移）衡量視覺穩定性。這些指標可透過 Chrome UX Report（CrUX）取得真實使用者數據，也可用 Lighthouse、PageSpeed Insights 進行實驗室測試。雖然 CWV 不是唯一排名因素，但在競爭激烈的關鍵字中，良好的體驗指標能成為決定性優勢。

為什麼重要

• Google 官方確認為排名因素：在其他條件相近時，CWV 較好的頁面可能排名更高
• 直接影響使用者行為：慢 1 秒可能增加 7% 跳出率，降低轉換率
• 行動優先索引時代，行動端 CWV 尤其關鍵
• 影響 Google Discover 資格：CWV 不佳可能減少 Discover 曝光
• 在 Search Console 有專屬報告，方便追蹤與優先處理
• 競爭分析工具（Ahrefs、SEMrush）也開始納入 CWV 比較
• 良好的 CWV 通常代表良好的程式碼品質，有助於長期維護

怎麼做（實作重點）

• 先量測：使用 PageSpeed Insights 取得 Field Data（真實用戶）與 Lab Data（模擬）
• LCP 優化（目標 < 2.5s）：壓縮圖片、使用 WebP/AVIF、實施 CDN、優化 TTFB、預載關鍵資源
• INP 優化（目標 < 200ms）：拆分長任務 > 50ms、使用 Web Workers、減少主執行緒阻塞、延遲非關鍵 JS
• CLS 優化（目標 < 0.1）：為圖片/影片設定 width/height、避免動態插入內容、使用 font-display: swap
• 使用 Chrome DevTools Performance 面板深入分析瓶頸
• 在 Search Console 追蹤「核心網頁指標」報告，優先修復「不良」URL
• 設定 RUM（Real User Monitoring）持續追蹤，如 web-vitals.js 函式庫

範例

<!-- LCP 優化：預載 hero 圖片 -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- CLS 優化：為圖片設定尺寸 -->
<img src="/product.jpg" width="800" height="600" alt="產品圖片">

<!-- 字型優化：避免 FOIT/FOUT 造成 CLS -->
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Main';
    src: url('/fonts/main.woff2') format('woff2');
    font-display: swap;
  }
</style>

// 使用 web-vitals 函式庫追蹤 CWV
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // 傳送到 GA4 或自訂分析系統
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_label: id,
    non_interaction: true,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

相關連結