TryQuickToolBox

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

Web2026-10-31TryQuickToolBox

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

什麼是 Core Web Vitals？

Core Web Vitals 是三個具體指標，量化使用者體驗的關鍵面向：載入、互動性和視覺穩定性。它們是 Google 頁面體驗排名信號的一部分。

Google 也使用其他指標如首位元組時間 (TTFB) 和首次內容繪製 (FCP) 作為診斷，但 LCP、FID 和 CLS 是核心的三個。

如何測量 Core Web Vitals

你可以用兩種方式測量這些指標：實驗室（合成測試）和現場（真實使用者監控）。兩者都有價值。

實驗室測量

Lighthouse（內建於 Chrome DevTools）和 WebPageTest 等工具模擬頁面載入並提供分數。它們非常適合除錯，因為它們提供詳細的診斷資訊。

// 在 Chrome DevTools 中執行 Lighthouse：開啟 DevTools → Lighthouse 標籤 → 產生報告。
// 或使用 CLI：
// npm install -g lighthouse
// lighthouse https://example.com --view

現場測量

真實使用者指標來自實際訪客。Chrome 使用者體驗報告 (CrUX) 為公開網站提供匿名資料。你也可以使用 JavaScript API 收集自己的現場資料。

// 範例：使用 web-vitals 函式庫記錄指標
import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

將這些指標傳送到你的分析端點，以隨時間追蹤效能。

改善 LCP

LCP 通常是最具影響力的指標。要改善它，請關注最大的元素——通常是主視覺圖片或標題。

  1. 優化圖片： 壓縮圖片，使用現代格式如 WebP 或 AVIF，並指定尺寸以避免版面位移。像圖片壓縮工具這樣的工具可以幫助減少檔案大小而不損失品質。
  2. 預載關鍵資源： 對 LCP 圖片或字型使用 <link rel="preload">。
  3. 減少伺服器回應時間： 使用 CDN、啟用快取，並優化後端程式碼。TTFB 是 LCP 的一個組成部分。
  4. 消除阻礙渲染的資源： 延遲非關鍵的 CSS 和 JavaScript。

範例：預載你的主視覺圖片：

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

改善 FID

FID 衡量回應性。高 FID 意味著當使用者嘗試互動時，主執行緒正忙。

  1. 拆分長任務： 使用 setTimeout 或 requestIdleCallback 將 JavaScript 分成更小的區塊。
  2. 優化事件處理常式： 對昂貴的操作進行去抖動或節流。
  3. 減少 JavaScript 執行時間： 移除未使用的程式碼、進行程式碼分割，並延遲非關鍵腳本。
  4. 使用 Web Workers： 將繁重的計算卸載到工作執行緒。

範例：延遲非關鍵 JavaScript：

<script src="#" defer></script>

改善 CLS

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

  1. 始終在圖片和影片上包含寬度和高度屬性。
  2. 為廣告和嵌入內容保留空間： 使用 CSS aspect-ratio 或固定大小的容器。
  3. 避免在現有內容上方插入內容，除非是回應使用者互動。
  4. 使用 CSS transforms 進行動畫，而不是觸發版面的屬性。

範例：為圖片保留空間：

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

工具與工作流程

從實驗室工具開始識別問題，然後用現場資料驗證。以下是一個簡單的工作流程：

  1. 在 Chrome DevTools 中執行 Lighthouse 以獲得基準。
  2. 修復最具影響力的問題（通常是 LCP）。
  3. 部署變更並透過 CrUX 或你自己的 RUM 監控現場資料。
  4. 迭代：效能優化是持續的過程。

如需快速檢查，請使用 PageSpeed Insights 等線上工具，它結合了實驗室和現場資料。

常見問題

Core Web Vitals 目前的閾值是什麼？

目前，Google 認為 LCP ≤ 2.5 秒、FID ≤ 100 毫秒和 CLS ≤ 0.1 為「良好」。這些閾值可能會演變，因此請查看 Google 的官方文件以獲取更新。

Core Web Vitals 會直接影響 SEO 排名嗎？

是的，它們是 Google 頁面體驗信號的一部分。然而，相關性和優質內容仍然更重要。Core Web Vitals 是其他信號相等時的決勝因素或一個因素。

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

在重大變更後測量，並持續監控現場資料。實驗室測試快速，但現場資料反映跨裝置和網路的真實使用者體驗。

準備好優化你的圖片以獲得更好的 LCP 了嗎？試試我們免費的圖片壓縮工具，在不犧牲品質的情況下減少檔案大小。