Core Web Vitals：衡量與改善以提升網站效能
你已經打造了一個快速的網站，但使用者仍然抱怨速度慢。或者，你的 SEO 排名在 Google 更新後下降了。罪魁禍首可能是 Core Web Vitals——一組量化真實使用者體驗的指標。忽略它們可能會同時損害可用性和搜尋能見度。本指南將帶你逐步衡量並改善每一項重要指標，並提供你今天就能實作的具體步驟。
什麼是 Core Web Vitals？
Core Web Vitals 是 Google 用來評估頁面體驗的三個特定指標：
- Largest Contentful Paint (LCP)： 衡量載入效能。它追蹤最大的內容元素（圖片、影片或文字區塊）變為可見所需的時間。良好的 LCP 是 2.5 秒或更短。
- Interaction to Next Paint (INP)： 衡量互動性。它記錄所有互動（點擊、輕觸、按鍵）的延遲，並報告一個高百分位數。良好的 INP 是 200 毫秒或更短。
- Cumulative Layout Shift (CLS)： 衡量視覺穩定性。它量化載入期間非預期的版面位移。良好的 CLS 是 0.1 或更低。
這些指標是 Google 頁面體驗訊號的一部分，但它們也直接影響使用者對你網站的感受。LCP 過慢會讓使用者感到沮喪，INP 過高會讓頁面感覺沒有回應，而 CLS 會導致誤點。
如何衡量 Core Web Vitals
你需要實驗室資料和實地資料才能獲得完整的樣貌。實驗室工具模擬條件，而實地資料來自真實使用者。
實驗室工具
- Lighthouse： 內建於 Chrome DevTools，它會稽核效能並提供 LCP、CLS 和 TBT（INP 的代理指標）的分數。在無痕模式下並啟用節流來模擬行動裝置條件。
- WebPageTest： 提供從多個位置和裝置進行的高階測試，並有影片膠捲檢視和水瀑圖。
- PageSpeed Insights： 在一份報告中結合實驗室和實地資料（來自 CrUX）。
實地工具
- Chrome User Experience Report (CrUX)： 一個包含數百萬個網站真實使用者指標的公開資料集。可透過 PageSpeed Insights 或 CrUX API 存取。
- Google Search Console： 顯示你網站的 Core Web Vitals 狀態，並按 URL 分組。
- web-vitals JavaScript 函式庫： 將其加入你的網站以收集真實使用者指標並傳送到你的分析工具。
使用實驗室工具進行除錯，並用實地資料驗證修正。一個常見的錯誤是只為實驗室分數進行最佳化，而忽略了真實使用者的體驗。
改善 LCP
LCP 通常是最具影響力的待修正指標。以下是如何最佳化它：
- 最佳化圖片： 在不損失品質的情況下壓縮圖片，使用 WebP 或 AVIF 等現代格式，並以
srcset提供回應式圖片。像 Image Compressor 這樣的工具可以幫助減少檔案大小。 - 預載關鍵資源： 對主視覺圖片、字型和關鍵 CSS/JS 檔案使用
<link rel="preload">。 - 消除阻礙轉譯的資源： 內嵌關鍵 CSS、延遲非關鍵 JavaScript，並避免大型 CSS 檔案。
- 使用 CDN： 從靠近使用者的邊緣位置提供資源，以減少延遲。
- 快取資源： 為靜態資源設定較長的快取壽命，並透過檔名進行快取破壞。
- 最佳化伺服器回應時間： 使用快速主機、啟用壓縮（Brotli 或 Gzip），並最佳化資料庫查詢。
舉一個詳細的例子，考慮主視覺圖片。與其提供 2MB 的 JPEG，不如將其壓縮到 200KB 以下，轉換為 WebP，並預載它。光是這樣就能將 LCP 縮短數秒。
改善 INP
INP 衡量回應性。高 INP 通常源自阻塞主執行緒的長時間 JavaScript 任務。
- 拆分長時間任務： 使用
setTimeout或requestIdleCallback讓出主執行緒。 - 最佳化事件處理常式： 對捲動或調整大小等頻繁事件進行去抖動或節流。避免在處理常式中進行大量運算。
- 減少 JavaScript 執行： 進行程式碼分割、樹狀搖晃，並延遲載入非關鍵 JS。
- 使用 Web Workers： 將昂貴的任務卸載到工作執行緒。
- 減少第三方指令碼： 稽核並移除不必要的分析、廣告或社交小工具。
在 Chrome DevTools 的 Performance 面板中與你的頁面互動來測試 INP。尋找長時間任務（紅色三角形）並最佳化它們。
改善 CLS
CLS 與視覺穩定性有關。非預期的位移會困擾使用者並導致誤點。
- 為圖片和影片設定尺寸： 始終包含
width和height屬性，或使用 CSS aspect-ratio。 - 為廣告和嵌入內容保留空間： 使用固定大小的預留位置。
- 避免在現有內容上方插入內容： 除非是使用者觸發的互動。
- 使用 font-display: swap： 但要注意字型替換可能導致位移。考慮預載字型或使用
size-adjust。 - 對動畫套用 CSS transforms： 而不是會觸發版面的屬性。
使用 Chrome DevTools 中的 Layout Shift Regions 功能來視覺化位移。
工具與工作流程
將 Core Web Vitals 監控整合到你的開發工作流程中：
- 在 CI 中執行 Lighthouse 以捕捉回歸。
- 使用 web-vitals 函式庫收集實地資料並設定警示。
- 定期檢查 Search Console 以找出問題。
- 根據影響和投入程度排定修正的優先順序。
請記住，Core Web Vitals 只是效能的一部分。始終考慮整體使用者體驗。
常見問題
Core Web Vitals 目前的閾值是什麼？
良好閾值：LCP ≤ 2.5 秒，INP ≤ 200 毫秒，CLS ≤ 0.1。需要改善：LCP ≤ 4 秒，INP ≤ 500 毫秒，CLS ≤ 0.25。差：高於這些數值。
我應該多久衡量一次 Core Web Vitals？
持續監控實地資料，並在重大變更後執行實驗室測試。至少每月檢查一次，並在部署後檢查。
我可以在沒有開發人員的情況下改善 Core Web Vitals 嗎？
有些修正，例如圖片壓縮和快取，可以透過外掛程式或 CDN 設定來完成。但更深入的最佳化通常需要修改程式碼。
準備好最佳化你的圖片以獲得更好的 LCP 了嗎？試試我們免費的 Image Compressor，在不損失品質的情況下減少檔案大小。