Core Web Vitals：衡量與改善以提升 SEO
為什麼 Core Web Vitals 對你的網站很重要
你已經打造了一個快速且功能豐富的網站，但使用者仍然抱怨速度緩慢，而且你的搜尋排名正在下滑。罪魁禍首可能是 Core Web Vitals——Google 用來量化真實使用者體驗的一組指標。自 2021 年以來，這些指標已成為確認的排名因素，並且直接影響跳出率和轉換率。忽略它們意味著損失流量和營收。
在本指南中，你將了解每個指標的含義、如何準確衡量它們，以及你今天就可以實施的逐步改善方法。
什麼是 Core Web Vitals？
Core Web Vitals 是三個特定指標，分別捕捉載入、互動性和視覺穩定性：
- Largest Contentful Paint (LCP)：衡量載入效能。它標記最大的內容元素（圖片、文字區塊、影片）變為可見的時間。良好的 LCP 為 2.5 秒或更短。
- Interaction to Next Paint (INP)：衡量回應性。它記錄所有互動（點擊、輕觸、按鍵）的延遲，並報告單一數值。良好的 INP 為 200 毫秒或更短。INP 於 2024 年 3 月取代了 First Input Delay (FID)。
- Cumulative Layout Shift (CLS)：衡量視覺穩定性。它量化頁面載入期間的意外版面位移。良好的 CLS 為 0.1 或更低。
這些指標是基於實地資料，意味著它們來自真實使用者資料，而非實驗室測試。這就是為什麼 Chrome User Experience Report (CrUX) 和 PageSpeed Insights 等工具會使用它們。
如何衡量 Core Web Vitals
你需要實驗室資料和實地資料才能獲得完整概況。實驗室工具有助於除錯，而實地資料則顯示真實使用者體驗。
實地工具（真實使用者資料）
- PageSpeed Insights：輸入 URL 即可同時查看實驗室和實地資料。實地部分來自 CrUX。
- Search Console：Core Web Vitals 報告會依狀態（不良、需要改善、良好）將 URL 分組。
- Chrome UX Report (CrUX)：透過 BigQuery 或 CrUX API 取得原始資料。
- web-vitals JavaScript 函式庫：將這個輕量指令碼加入你的網站，以收集真實使用者的指標並傳送到你的分析平台。
實驗室工具（合成測試）
- Lighthouse：內建於 Chrome DevTools。執行它以取得實驗室分數和改善機會。
- WebPageTest：進階測試，包含影片條、瀑布圖和自訂節流。
- Chrome DevTools Performance 面板：錄製並分析執行階段效能。
若要快速開始，請使用 PageSpeed Insights。它將實驗室和實地資料合併在一份報告中。
逐步改善 LCP
LCP 通常最容易透過以下步驟改善：
- 最佳化圖片：在不損失品質的情況下壓縮圖片。使用 WebP 或 AVIF 等現代格式。像 Image Compressor 這類工具可以幫助你。
- 預載 LCP 元素：為主要圖片或字型加入
<link rel="preload">。 - 減少伺服器回應時間：使用 CDN、啟用快取，並最佳化後端程式碼。對於 Nginx，使用 Nginx Log Analyzer 檢查你的日誌，以找出緩慢的請求。
- 消除阻礙渲染的資源：內嵌關鍵 CSS、延遲非關鍵 JavaScript，並使用
async或defer屬性。 - 使用 CDN：從靠近使用者的位置提供資源。
逐步改善 INP
INP 衡量回應性。高 INP 通常來自長時間執行的 JavaScript 任務。
- 拆分長時間任務：使用
setTimeout或requestIdleCallback讓出主執行緒。 - 最佳化事件處理常式：對昂貴的操作進行防抖或節流。
- 減少 JavaScript：移除未使用的程式碼、進行程式碼分割，並延遲載入非關鍵指令碼。
- 使用 Web Workers：將繁重運算移出主執行緒。
- 避免過大的 DOM 大小：盡可能將 DOM 保持在 1,500 個節點以下。
逐步改善 CLS
CLS 與視覺穩定性有關。使用以下策略防止意外位移：
- 設定圖片和影片的尺寸屬性：一律包含
width和height。 - 為廣告和嵌入內容保留空間：使用 CSS
aspect-ratio或固定容器。 - 避免在現有內容上方插入內容：如果必須這樣做，請使用預留位置或為位移加入動畫。
- 使用 font-display: swap：防止字型載入期間文字不可見（不過這可能造成輕微位移；對於關鍵字型，可考慮
font-display: optional）。 - 預載字型：減少因字型延遲載入造成的版面位移。
Core Web Vitals 指標比較
| 指標 | 衡量的內容 | 良好閾值 | 主要修正方式 |
|---|---|---|---|
| LCP | 載入效能 | ≤ 2.5 秒 | 最佳化圖片、預載、CDN |
| INP | 回應性 | ≤ 200 毫秒 | 拆分長時間任務、減少 JS |
| CLS | 視覺穩定性 | ≤ 0.1 | 設定尺寸、保留空間 |
監控與持續改善
效能不是一次性的修正。設定真實使用者監控 (RUM) 以長期追蹤 Core Web Vitals。使用 web-vitals 函式庫將指標傳送到你的分析平台。為回歸設定警示。定期在 CI/CD 流程中使用 Lighthouse 進行稽核，以便在問題進入生產環境之前發現它們。
常見問題
Core Web Vitals 目前的閾值是什麼？
對於 LCP，良好為 ≤ 2.5 秒，需要改善為 ≤ 4.0 秒，不良為 > 4.0 秒。對於 INP，良好為 ≤ 200 毫秒，需要改善為 ≤ 500 毫秒，不良為 > 500 毫秒。對於 CLS，良好為 ≤ 0.1，需要改善為 ≤ 0.25，不良為 > 0.25。
我應該多久衡量一次 Core Web Vitals？
使用真實使用者資料持續監控。在重大程式碼變更後以及至少每月執行一次實驗室測試。Search Console 中的實地資料每天更新，但它反映的是 28 天滾動視窗。
我可以在沒有開發人員的情況下改善 Core Web Vitals 嗎？
某些修正，例如圖片壓縮和快取，可以透過外掛或工具完成。然而，更深入的最佳化，例如減少 JavaScript 和伺服器調校，通常需要開發人員參與。
準備好加速你的網站了嗎？從使用我們免費的 Image Compressor 壓縮圖片開始，快速提升你的 LCP。