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

您的網站載入了，但使用者仍然跳出。載入時間過慢、版面配置意外位移，以及互動無回應，都會讓訪客感到挫折，並損害您的搜尋排名。Core Web Vitals (CWV) 是 Google 衡量使用者體驗的指標，且直接影響 SEO。本指南將透過可執行的步驟，說明如何衡量並改善這些指標。

什麼是 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

您需要欄位資料（真實使用者測量）與實驗室資料（合成測試）。兩者並用才能獲得完整樣貌。

欄位資料工具

• Chrome User Experience Report (CrUX)： 真實使用者指標的公開資料集。可透過 PageSpeed Insights、Search Console 或 BigQuery 存取。
• PageSpeed Insights： 顯示某個 URL 的欄位資料（若可用）與實驗室資料。
• Search Console Core Web Vitals 報告： 依狀態（不良、需要改善、良好）將 URL 分組。
• web-vitals JavaScript 函式庫： 使用 import {onLCP, onFID, onCLS} from 'web-vitals'; 收集您自己的欄位資料，並傳送至您的分析端點。

實驗室資料工具

• Lighthouse： 內建於 Chrome DevTools。執行效能、無障礙與 SEO 稽核，提供實驗室指標與改善機會。
• WebPageTest： 進階測試，可自訂網路條件與瀑布圖。
• Chrome DevTools Performance 面板： 錄製執行時期效能，以識別長任務與渲染問題。

改善 Largest Contentful Paint (LCP)

LCP 通常是最具影響力的指標。請優化關鍵渲染路徑與最大元素。

1. 優化最大元素

• 若 LCP 是圖片：壓縮它、使用現代格式（WebP、AVIF），並設定 width 與 height 屬性以避免版面配置位移。
• 預載 LCP 圖片：<link rel="preload" as="image" href="#">。
• 使用 srcset 與 sizes 的響應式圖片。
• 若 LCP 是文字：確保字型快速載入。使用 font-display: swap 並預載關鍵字型。

2. 消除阻擋渲染的資源

• 內嵌關鍵 CSS，並延遲非關鍵 CSS。
• 延遲或非同步 JavaScript：<script src="#" defer></script>。
• 壓縮 CSS 與 JavaScript。

3. 改善伺服器回應時間

• 使用 CDN 從更接近使用者的位置提供資源。
• 啟用快取（HTTP 快取標頭、Service Worker）。
• 優化後端效能（資料庫查詢、伺服器端快取）。

4. 減少酬載大小

• 壓縮圖片，並對首屏以下的圖片使用延遲載入。
• 移除未使用的 JavaScript 與 CSS。
• 使用程式碼分割，只載入必要的程式碼。

改善 First Input Delay (FID)

FID 衡量回應性。長時間的 JavaScript 任務會阻塞主執行緒，延遲互動處理。

1. 拆分長任務

使用 setTimeout 或 requestIdleCallback 讓出主執行緒。或在支援的環境中使用 scheduler.yield()。

// 範例：在一段工作後讓出主執行緒
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    // 處理項目
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

2. 優化事件處理常式

• 對高頻事件（scroll、resize、input）進行去抖動或節流。
• 對觸控與滾輪事件使用被動事件監聽器：element.addEventListener('touchstart', handler, {passive: true});。
• 避免在事件處理常式中執行繁重工作；改交給 Web Worker。

3. 減少 JavaScript 執行時間

• 進行程式碼分割，並延遲載入非關鍵 JavaScript。
• 移除未使用的相依套件。
• 使用 tree-shaking 與壓縮。

改善 Cumulative Layout Shift (CLS)

CLS 衡量視覺穩定性。意外的位移會困擾使用者並導致誤點擊。

1. 一律包含尺寸屬性

對圖片與影片設定 width 與 height（或使用 aspect-ratio CSS），讓瀏覽器保留空間。

2. 為動態內容保留空間

• 對廣告、嵌入內容或動態內容，使用固定尺寸的預留位置。
• 避免在現有內容上方插入內容，除非是回應使用者互動。

3. 使用 Transform 動畫

動畫優先使用 CSS transform 與 opacity；它們不會觸發版面配置位移。

4. 謹慎載入字型

使用 font-display: optional 或 swap 以避免不可見文字與版面配置位移。預載關鍵字型。

持續改善的工具與工作流程

效能是持續的過程。將衡量整合到您的開發流程中。

• 在您的流程中使用 Lighthouse CI 來捕捉效能退步。
• 透過 web-vitals 與您的分析工具監控欄位資料。
• 設定效能預算，並在違規時發出警示。

如需快速檢查，請使用 TryQuickToolBox 的 Nginx 日誌分析器 找出可能影響 LCP 的緩慢伺服器回應。

常見問題

Core Web Vitals 目前的門檻是什麼？

LCP：良好 ≤ 2.5 秒，需要改善 ≤ 4 秒，不良 > 4 秒。FID：良好 ≤ 100 毫秒，需要改善 ≤ 300 毫秒，不良 > 300 毫秒。CLS：良好 ≤ 0.1，需要改善 ≤ 0.25，不良 > 0.25。這些是在頁面載入的第 75 百分位數進行評估。

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

透過分析工具與 Search Console 持續監控欄位資料。在每次重大程式碼變更時執行實驗室測試，並至少每月進行一次基準檢查。

改善 Core Web Vitals 真的會影響 SEO 嗎？

是的，Google 將頁面體驗信號（包括 Core Web Vitals）作為排名因素。雖然內容仍是首要，但良好的 CWV 可為您帶來優勢，尤其是在競爭激烈的領域。

準備好優化了嗎？先使用 PageSpeed Insights 衡量您目前的分數，然後處理最大的改善機會。如需快速進行伺服器端檢查，請試用我們的 Nginx 日誌分析器，找出可能拖累 LCP 的緩慢後端回應。