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

您已經建立了一個快速的網站，但使用者仍抱怨速度慢。或者，您的 SEO 排名在 Google 更新後下降了。罪魁禍首可能是 Core Web Vitals——Google 用於衡量使用者體驗的指標。在本指南中，您將了解它們是什麼、如何透過真實使用者數據衡量它們，以及改善它們的實用步驟。

什麼是 Core Web Vitals？

Core Web Vitals 是三個量化使用者體驗關鍵面向的指標：

• Largest Contentful Paint (LCP)：最大的可見元素（例如主視覺圖片或標題）渲染所需的時間。良好：≤2.5秒。
• First Input Delay (FID)：從使用者首次互動（例如點擊連結）到瀏覽器回應的時間。良好：≤100毫秒。
• Cumulative Layout Shift (CLS)：衡量視覺穩定性——元素意外移動的程度。良好：≤0.1。

這些指標是 Google 頁面體驗信號的一部分，直接影響 SEO。但更重要的是，它們反映了真實使用者的不滿。

如何衡量 Core Web Vitals

您需要實驗室數據和現場數據。實驗室數據（例如 Lighthouse）有助於除錯，而現場數據（真實使用者監控）顯示實際效能。

1. 使用 Chrome UX Report (CrUX)

CrUX 提供數百萬個網站的彙總真實使用者數據。您可以在 PageSpeed Insights 或 CrUX Dashboard 中查看。它顯示了您來源的 LCP、FID 和 CLS 分佈。

2. 設定真實使用者監控 (RUM)

Google Analytics 4、Vercel Analytics 或開源函式庫（web-vitals）等工具可讓您從實際訪客收集 Core Web Vitals。以下是將指標傳送到分析端點的方法：

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

此程式碼片段使用 web-vitals 函式庫擷取指標，並透過 sendBeacon 傳送，不影響頁面載入。

3. 使用 Lighthouse 進行實驗室測試

Lighthouse（在 Chrome DevTools 或 PageSpeed Insights 中）模擬頁面載入並報告 Core Web Vitals 以及改善機會。在關鍵頁面上執行它，並隨時間追蹤變化。

改善 LCP

LCP 通常是最具影響力的指標。要改善它：

• 優化圖片：壓縮圖片、使用現代格式（WebP、AVIF），並透過 srcset 提供響應式尺寸。
• 預載關鍵資源：對 LCP 圖片或字型使用 <link rel="preload">。
• 減少伺服器回應時間：使用 CDN、快取，並優化後端查詢。
• 消除阻礙渲染的資源：延遲非關鍵 CSS/JS，內聯關鍵 CSS。

例如，預載您的主視覺圖片：

<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 執行時間，避免大型套件。
• 使用 Web Workers 處理繁重計算。
• 優化事件處理常式：對快速事件進行去抖動或節流。

同時考慮過渡到 Interaction to Next Paint (INP)，它將在 2024 年取代 FID。INP 衡量所有互動，因此相同的優化措施適用。

改善 CLS

CLS 與視覺穩定性有關。常見原因與修復方法：

• 沒有尺寸的圖片：始終設定 width 和 height 屬性，或使用 CSS aspect-ratio。
• 廣告、嵌入內容和 iframe：使用預留位置保留空間，或設定固定尺寸。
• 動態內容注入：避免在現有內容上方插入內容，除非是回應使用者互動。
• 網頁字型：使用 font-display: swap 並預載字型，以避免不可見文字和版面位移。

範例：為圖片保留空間：

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

Core Web Vitals 比較

持續監控的工具

改善 Core Web Vitals 不是一次性的任務。設定儀表板來追蹤現場數據。使用：

• Google Search Console：Core Web Vitals 報告顯示需要關注的 URL 群組。
• PageSpeed Insights：結合實驗室和現場數據。
• Web Vitals 擴充功能：瀏覽時即時顯示指標。
• RUM 工具：如 SpeedCurve、Calibre 或開源替代方案。

定期審核您的網站，尤其是在重大變更之後。

常見問題

什麼是 Core Web Vitals，為什麼它們重要？

Core Web Vitals 是三個指標（LCP、FID、CLS），Google 用於衡量使用者體驗。它們重要是因為它們影響 SEO 排名並反映真實使用者滿意度。

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

透過真實使用者監控持續進行，並在任何重大程式碼或內容變更後進行。實驗室測試應在開發期間和發布前執行。

沒有開發人員，我能改善 Core Web Vitals 嗎？

一些修復措施，如壓縮圖片或設定圖片尺寸，可以由內容編輯人員完成。但更深入的優化通常需要開發人員參與。

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