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

為什麼 Core Web Vitals 對您的網站很重要

您可能聽過 Core Web Vitals（CWV）——Google 用來衡量使用者體驗的指標。但如果您的網站感覺緩慢或卡頓，您並不孤單。許多開發者難以將 CWV 分數轉化為具體的修正措施。本指南將透過實用步驟和程式碼片段，引導您測量並改善每個 Core Web Vital。

Core Web Vitals 包含三個具體指標：最大內容繪製（LCP）用於衡量載入效能、首次輸入延遲（FID）用於衡量互動性，以及累積版面位移（CLS）用於衡量視覺穩定性。Google 將這些指標作為排名訊號，因此最佳化它們對使用者和 SEO 都有好處。

了解三個 Core Web Vitals

在深入探討修正方法之前，讓我們先釐清每個指標衡量的是什麼，以及獲得良好分數的閾值。

注意：FID 將於 2024 年 3 月被 Interaction to Next Paint（INP）取代，但最佳化原則類似。我們在此仍著重於 FID，因為它仍被廣泛引用。

如何測量 Core Web Vitals

您需要實驗室資料和實際使用者資料才能獲得完整全貌。實驗室資料（合成測試）有助於除錯，而實際使用者資料（真實使用者監控）則顯示實際的使用者體驗。

實驗室工具

• Chrome DevTools 中的 Lighthouse：在 Lighthouse 面板中執行稽核。
• PageSpeed Insights：為某個 URL 提供實驗室和實際使用者資料。
• WebPageTest：使用自訂網路條件進行進階測試。

實際使用者工具

• Chrome 使用者體驗報告（CrUX）：真實使用者指標的公開資料集。
• Google Search Console：Core Web Vitals 報告顯示群組效能。
• web-vitals JavaScript 函式庫：在您的分析中收集真實使用者的指標。

若要收集實際使用者資料，請引入 web-vitals 函式庫並將指標傳送至您的分析端點：

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

這能為您提供真實世界的資料，以補充實驗室測試。

改善最大內容繪製（LCP）

LCP 衡量最大的內容元素（圖片、文字區塊或影片）何時變為可見。若要改善它，請關注伺服器回應時間、資源載入和阻礙渲染的資源。

1. 最佳化伺服器回應時間

• 使用 CDN 從更靠近使用者的位置提供內容。
• 啟用快取（HTTP 快取標頭、伺服器端快取）。
• 如果 TTFB（首位元組時間）持續偏高，請升級主機方案。

2. 最佳化圖片

• 壓縮圖片並使用現代格式，如 WebP 或 AVIF。
• 使用 srcset 和 sizes 實現響應式圖片。
• 對首屏以下的圖片進行延遲載入，但避免對 LCP 圖片進行延遲載入。

如需快速壓縮圖片，請試用我們的圖片壓縮工具。

3. 消除阻礙渲染的資源

• 內嵌關鍵 CSS，並延遲非關鍵 CSS。
• 對 JavaScript 使用 async 或 defer。
• 壓縮 CSS 和 JavaScript。

4. 預載重要資源

對字型或主視覺圖片等關鍵資源使用 <link rel="preload">：

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

改善首次輸入延遲（FID）

FID 衡量從使用者首次與您的頁面互動到瀏覽器能夠回應之間的時間。長時間的 JavaScript 任務會阻塞主執行緒，導致延遲。

1. 拆分長任務

使用 setTimeout 或 requestIdleCallback 將長時間執行的 JavaScript 拆分成較小的區塊。例如：

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // 處理項目
  setTimeout(() => processItems(items), 0);
}

2. 最佳化事件處理常式

• 對輸入處理常式進行防抖或節流。
• 避免在事件監聽器中進行複雜計算；將其卸載到 Web Workers。

3. 減少 JavaScript 執行時間

• 使用動態匯入進行程式碼分割。
• 移除未使用的 JavaScript（tree shaking）。
• 對非關鍵 iframe 使用 loading="lazy"。

4. 對繁重任務使用 Web Workers

將 CPU 密集型工作移出主執行緒：

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* 處理結果 */ };

改善累積版面位移（CLS）

CLS 衡量非預期的版面位移。常見原因包括沒有尺寸的圖片、廣告、嵌入內容和網路字型。

1. 始終為媒體設定寬度和高度

在圖片和影片上包含 width 和 height 屬性，或使用 CSS aspect-ratio：

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

2. 為動態內容預留空間

對於廣告或嵌入內容，請使用預留位置元素預留空間，或設定固定大小。

3. 避免在現有內容上方插入內容

如果必須插入橫幅，請使用不會導致版面位移的變形動畫或覆蓋層。

4. 使用 Font-Display: swap

防止網路字型造成文字不可見和版面位移：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

監控與持續改善

最佳化 Core Web Vitals 不是一次性的任務。請使用以下工具建立持續監控：

• Google Search Console：CWV 退步時發出警示。
• Lighthouse CI：在每個提取請求上執行稽核。
• 真實使用者監控（RUM）：New Relic、Datadog 或自訂分析等工具。

定期檢閱實際使用者資料並反覆修正。優先處理分數最差的指標。

常見問題

什麼是 Core Web Vitals？

Core Web Vitals 是 Google 用來衡量使用者體驗的一組指標：LCP（載入）、FID（互動性）和 CLS（視覺穩定性）。

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

透過 Search Console 或 RUM 持續監控實際使用者資料。在重大變更後以及至少每月執行一次實驗室測試。

改善 Core Web Vitals 會影響 SEO 嗎？

會，Core Web Vitals 是排名訊號。更好的分數可以改善搜尋能見度和使用者滿意度。

準備好最佳化您的圖片以獲得更好的 LCP 了嗎？使用我們免費的圖片壓縮工具，在不損失品質的情況下縮小檔案大小。