Core Web Vitals：評估與改善以提升網站效能

Web2026-10-16TryQuickToolBox

你已經打造了一個快速的網站，但使用者仍然抱怨速度緩慢。或者，你的 SEO 排名在 Google 更新後下降了。罪魁禍首可能是 Core Web Vitals——Google 用來衡量真實使用者體驗的一組指標。忽略它們可能會同時損害使用者滿意度和搜尋能見度。

在本指南中，你將了解什麼是 Core Web Vitals、如何準確評估它們，以及改善每個指標的實用步驟。我們將重點關注三個當前指標：最大內容繪製 (LCP)、下次繪製互動 (INP) 和累計版面位移 (CLS)。

什麼是 Core Web Vitals？

Core Web Vitals 是 Web Vitals 的一個子集，Google 認為它們對於提供出色的使用者體驗至關重要。它們量化了內容載入的速度、頁面對互動的回應速度，以及視覺上的穩定性。

Google 將這些指標用作排名信號，但更重要的是，它們反映了真實使用者的痛點。LCP 緩慢會讓等待內容的使用者感到沮喪；INP 過高會使頁面感覺延遲；CLS 過高會導致誤點擊和煩躁。

三個核心 Web Vitals

最大內容繪製 (LCP)： 衡量載入效能。它標記了最大內容元素（圖像、影片或文字區塊）變為可見的時間。良好的 LCP 為 2.5 秒或更短。
下次繪製互動 (INP)： 衡量回應性。它記錄所有互動（點擊、輕觸、按鍵）的延遲，並報告一個單一值。良好的 INP 為 200 毫秒或更短。
累計版面位移 (CLS)： 衡量視覺穩定性。它量化載入期間的意外版面位移。良好的 CLS 為 0.1 或更短。

這些閾值基於真實使用者的實地資料，而非實驗室測試。Google 在頁面載入的第 75 百分位數評估它們，意味著 75% 的使用者體驗應達到「良好」閾值。

如何評估 Core Web Vitals

你需要實驗室資料和實地資料。實驗室工具在受控條件下模擬單一頁面載入，而實地資料（真實使用者監控，RUM）則捕捉跨裝置和網路的實際使用者體驗。

實驗室工具

Lighthouse： 內建於 Chrome DevTools，它審核效能並提供 LCP、CLS 和總阻塞時間 (TBT) 的分數，TBT 與 INP 相關。在無痕模式下運行以避免擴充功能影響結果。
PageSpeed Insights： 結合實驗室（Lighthouse）和實地（CrUX）資料。使用它來查看你的實驗室分數和真實使用者指標。
WebPageTest： 提供從多個位置和裝置進行的高級測試。它提供膠片條和水瀑圖來診斷載入問題。

實地工具

Chrome 使用者體驗報告 (CrUX)： 來自 Chrome 的真實使用者指標的公開資料集。可透過 PageSpeed Insights、CrUX 儀表板或 BigQuery 取得。
Google Search Console： 根據 CrUX 資料顯示你網站的 Core Web Vitals 狀態。它按效能對 URL 進行分組。
web-vitals JavaScript 函式庫： 一個小型函式庫，用於在你自己的 RUM 中評估指標。你可以將資料發送到你的分析平台。

以下是使用 web-vitals 函式庫將指標記錄到主控台的方法：

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 使用 navigator.sendBeacon() 或 fetch() 發送資料
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

若想在不寫程式的情況下快速檢查，你可以使用解析效能資料的線上工具。例如，如果你有伺服器日誌，Nginx 日誌分析器可以幫助你識別可能影響 LCP 的緩慢回應。

改善最大內容繪製 (LCP)

LCP 通常是最具影響力的最佳化指標。它受伺服器回應時間、資源載入時間和客戶端渲染的影響。

最佳化伺服器回應

使用 CDN 從更靠近使用者的位置提供內容。
為靜態資源啟用快取（瀏覽器和伺服器端）。
最佳化資料庫查詢和伺服器端程式碼以減少 TTFB（首位元組時間）。
升級到 HTTP/2 或 HTTP/3 以實現多工和更快的連線。

最佳化資源

預載入關鍵資源： 對 LCP 圖像或字型使用 <link rel="preload">。
壓縮並正確調整圖像大小： 使用現代格式如 WebP 或 AVIF，並透過 srcset 提供響應式圖像。
壓縮 CSS 和 JavaScript： 移除不必要的字元和註解。
延遲非關鍵 JavaScript： 使用 async 或 defer 屬性。
內聯關鍵 CSS： 將首屏樣式直接放入 HTML 中，以避免阻塞渲染的請求。

消除阻塞渲染的資源

<head> 中的 CSS 和 JavaScript 會阻塞渲染。內聯關鍵 CSS 並非同步載入其餘部分。對於 JavaScript，使用 defer 或 async。

改善下次繪製互動 (INP)

INP 衡量從使用者互動到下次繪製的時間。它受 JavaScript 執行、事件處理和渲染工作的影響。

減少 JavaScript 執行時間

使用 setTimeout 或 requestIdleCallback 分解長任務（超過 50ms）。
對繁重計算使用 web workers。
對滾動、調整大小和輸入事件進行去抖動或節流事件處理常式。
避免大型同步腳本；進行程式碼分割和延遲載入模組。

最佳化事件處理

對觸控和滾輪事件使用被動事件監聽器以提高滾動效能。
最小化 DOM 操作；批次更新並使用 requestAnimationFrame。
透過避免複雜選擇器來減少樣式重新計算的範圍。

改善渲染效能

對動畫使用 CSS will-change 或 transform 以觸發 GPU 加速。
透過在單獨的階段讀取和寫入樣式來避免版面抖動。

改善累計版面位移 (CLS)

CLS 衡量意外的版面位移。它是由於元素在載入期間改變位置引起的，通常是由於沒有尺寸的圖像、廣告或動態注入的內容。

始終包含尺寸屬性

對於圖像和影片，設定 width 和 height 屬性，或使用 CSS aspect-ratio。這會保留空間並防止位移。

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

為動態內容保留空間

對非同步載入內容的容器（例如廣告、嵌入內容）使用 CSS min-height。
避免在現有內容上方插入內容，除非是由使用者互動觸發。

使用 Font-Display Swap

自訂字型可能導致不可見文字 (FOIT) 或載入時的版面位移。使用 font-display: swap 立即顯示備用文字，並預載入字型以減少交換時間。

整合所有內容：實用工作流程

評估： 從 PageSpeed Insights 開始，獲取實驗室和實地資料。確定哪個指標需要改善。
診斷： 使用 Lighthouse 和 Chrome DevTools 效能面板找出瓶頸。查看水瀑圖、主執行緒活動和版面位移。
最佳化： 應用上述技術，優先處理影響最差指標的變更。
測試： 重新運行實驗室測試以確認改善。部署到測試環境並使用 RUM 監控實地資料。
監控： 使用 web-vitals 函式庫設定持續的 RUM，並對回歸發出警報。使用 Search Console 追蹤 Core Web Vitals 狀態。

請記住，最佳化可能會有取捨。例如，延遲載入圖像可以改善初始載入，但如果 LCP 圖像是延遲載入的，可能會損害 LCP。始終與真實使用者一起測試。

常見問題

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

對於 LCP，良好是 ≤2.5 秒，需要改善是 ≤4.0 秒，差是 >4.0 秒。對於 INP，良好是 ≤200 毫秒，需要改善是 ≤500 毫秒，差是 >500 毫秒。對於 CLS，良好是 ≤0.1，需要改善是 ≤0.25，差是 >0.25。這些閾值在頁面載入的第 75 百分位數進行評估。

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

使用 RUM 持續監控實地資料。每月檢查 Search Console 以了解整體趨勢。在重大程式碼變更或部署後運行實驗室測試。Core Web Vitals 可能會隨著網站或第三方腳本的更新而變化。

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

有些改善可以透過外掛或設定實現（例如，啟用快取、最佳化圖像）。然而，顯著的收益通常需要程式碼變更，例如內聯關鍵 CSS、延遲 JavaScript 或重組資源載入方式。INP 和高級 LCP 最佳化通常需要開發人員的幫助。

準備好分析你的伺服器效能了嗎？試試我們的 Nginx 日誌分析器來識別可能影響你 Core Web Vitals 的緩慢請求。