Core Web Vitals：測量與改善網站效能
為什麼 Core Web Vitals 很重要
你已經建立了一個快速的網站，但使用者仍然抱怨載入緩慢或互動卡頓。如果你的 Core Web Vitals (CWV) 分數不佳，搜尋引擎也可能會降低你的排名。CWV 是 Google 用來量化使用者體驗的一組指標：最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積版面位移 (CLS)。2021 年，Google 將這些指標列為排名因素，因此忽略它們可能會損害你的 SEO 和使用者留存率。
本指南說明如何測量每個指標、識別常見問題，並套用實用的修正方法。我們會聚焦於你今天就能採取的可行步驟，而不會深入探討每個邊緣案例。
了解三個 Core Web Vitals
在優化之前，先了解每個指標測量什麼以及它的閾值。
| 指標 | 測量內容 | 良好 | 需要改進 | 差 |
|---|---|---|---|---|
| LCP | 載入效能：最大內容元素渲染所需的時間。 | ≤ 2.5秒 | 2.5秒 – 4.0秒 | > 4.0秒 |
| FID | 互動性：從首次使用者互動到瀏覽器回應的時間。 | ≤ 100毫秒 | 100毫秒 – 300毫秒 | > 300毫秒 |
| CLS | 視覺穩定性：意外的版面位移。 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
注意：FID 將於 2024 年 3 月被 Interaction to Next Paint (INP) 取代，但優化原則相似。這裡我們仍聚焦於 FID，因為它仍被廣泛引用。
如何測量 Core Web Vitals
你需要實驗室數據和現場數據。實驗室數據（合成）有助於除錯；現場數據（真實使用者）顯示實際效能。
實驗室工具
- Chrome DevTools 中的 Lighthouse：執行效能、無障礙和 SEO 審核。它會報告 LCP、CLS 和 TBT（FID 的代理指標）。
- WebPageTest：進階測試，提供影片條和瀑布圖。
- PageSpeed Insights：結合實驗室和現場數據（如果有）。
現場工具
- Chrome 使用者體驗報告 (CrUX)：真實使用者指標的公開資料集。可透過 PageSpeed Insights 或 BigQuery 存取。
- web-vitals JavaScript 函式庫：在你的分析中收集真實使用者指標。
- Search Console Core Web Vitals 報告：顯示有問題的網址群組。
從 PageSpeed Insights 開始快速概覽，然後使用 Lighthouse 進行詳細診斷。
改善最大內容繪製 (LCP)
LCP 通常受到伺服器回應緩慢、阻礙渲染的資源或未優化的圖片影響。請遵循以下步驟：
- 優化伺服器回應時間：使用快取、CDN 和高效的後端程式碼。目標是將首位元組時間 (TTFB) 控制在 0.8 秒以下。
- 消除阻礙渲染的資源：內嵌關鍵 CSS，延遲非關鍵 CSS 和 JavaScript。對腳本使用
async或defer。 - 優化圖片：壓縮圖片，使用現代格式（WebP、AVIF），並透過
srcset實作響應式圖片。對於 LCP 圖片，使用<link rel="preload">預載它。 - 使用 CDN：從邊緣位置提供靜態資源。
- 快取資源：為靜態資源設定較長的快取壽命。
範例：預載 LCP 圖片並設定明確尺寸以避免版面位移。
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">改善首次輸入延遲 (FID)
FID 測量回應性。長時間的 JavaScript 任務會阻塞主執行緒，延遲互動。要改善 FID：
- 拆分長任務：使用
setTimeout或requestIdleCallback讓出主執行緒。 - 最小化主執行緒工作：減少 JavaScript 執行時間，避免大型套件，並使用程式碼拆分。
- 優化事件處理常式：對昂貴的處理常式進行防抖或節流。
- 使用 Web Workers 處理 CPU 密集型任務。
- 避免大型第三方腳本：審核並移除不必要的腳本。
Lighthouse 等工具會標記長任務。使用 Chrome DevTools 中的 Performance 面板來識別它們。
改善累積版面位移 (CLS)
CLS 測量視覺穩定性。當元素意外改變位置時，就會發生版面位移。常見原因和修正方法：
- 沒有尺寸的圖片：始終設定
width和height屬性，或使用 CSSaspect-ratio。 - 廣告、嵌入內容和 iframe：使用佔位符預留空間或設定固定尺寸。
- 動態內容：避免在現有內容上方插入內容，除非是回應使用者互動。
- 網頁字型：使用
font-display: swap並預載字型，以避免不可見文字 (FOIT) 和版面位移。 - 動畫：動畫優先使用 CSS
transform和opacity，因為它們不會觸發版面配置。
在 DevTools 中使用 Layout Instability API 進行測試，或使用 web-vitals 函式庫在現場記錄 CLS。
持續監控的實用工作流程
優化不是一次性任務。設定監控：
- 使用
web-vitals函式庫為你的網站加入監控，並將指標傳送到你的分析平台。 - 設定警示，當指標超過閾值時通知。
- 在 CI/CD 中定期執行 Lighthouse 以捕捉回歸。
- 使用 Search Console 監控現場數據趨勢。
請記住，現場數據才是影響排名的關鍵。實驗室數據有助於除錯，但一定要用真實使用者驗證。
常見問題
Core Web Vitals 目前的閾值是什麼？
截至 2023 年，閾值為：LCP 良好 ≤2.5秒，需要改進 2.5秒–4.0秒，差 >4.0秒；FID 良好 ≤100毫秒，需要改進 100毫秒–300毫秒，差 >300毫秒；CLS 良好 ≤0.1，需要改進 0.1–0.25，差 >0.25。請注意，FID 將於 2024 年被 INP 取代。
我應該多久測量一次 Core Web Vitals？
透過分析持續監控現場數據，並在每次部署或至少每週執行實驗室測試（例如 Lighthouse）。重大變更應觸發新的審核。
沒有開發人員也能改善 Core Web Vitals 嗎？
某些修正（例如壓縮圖片或啟用快取）可以透過外掛或主機設定完成。然而，更深入的優化（例如程式碼拆分、關鍵 CSS）通常需要開發工作。
準備好優化你的圖片以改善 LCP 了嗎？試試我們免費的 圖片壓縮工具，在不損失品質的情況下縮小檔案大小。