Core Web Vitals：衡量並改善網站效能
你已經打造了一個快速、現代的網站，但使用者仍抱怨速度緩慢，而且你的 SEO 排名正在下滑。罪魁禍首可能是 Core Web Vitals (CWV)——Google 用來衡量使用者體驗的指標。在本指南中，你將學會如何透過實用、可執行的步驟來衡量並改善 LCP、INP 和 CLS。
什麼是 Core Web Vitals？
Core Web Vitals 是三項量化真實使用者體驗的指標：
- Largest Contentful Paint (LCP)： 主要內容載入的速度。目標：≤ 2.5 秒。
- Interaction to Next Paint (INP)： 頁面對使用者輸入的回應速度。目標：≤ 200 毫秒。
- Cumulative Layout Shift (CLS)： 版面意外位移的程度。目標：≤ 0.1。
這些指標是 Google 頁面體驗訊號的一部分，並直接影響 SEO 與使用者滿意度。
如何衡量 Core Web Vitals
衡量方式分為兩類：實地資料（真實使用者監控）與實驗室資料（合成測試）。兩者都很有價值。
實地工具（真實使用者資料）
- Chrome User Experience Report (CrUX)： 真實使用者指標的公開資料集。可透過 PageSpeed Insights 或 CrUX API 存取。
- Google Search Console： Core Web Vitals 報表會顯示你網站的群組層級效能。
- web-vitals 函式庫： 一個小型 JavaScript 函式庫，可在你自己的分析工具中擷取指標。
實驗室工具（合成測試）
- Lighthouse： 內建於 Chrome DevTools，可稽核效能並提供改善機會。
- PageSpeed Insights： 針對單一 URL 結合實驗室與實地資料。
- WebPageTest： 進階測試，支援自訂網路條件與裝置模擬。
使用實地資料了解實際使用者體驗，並使用實驗室資料進行除錯與迭代。
改善 LCP：讓主要內容載入更快
LCP 通常是影響最大的指標。以下是最佳化方法：
- 最佳化圖片： 壓縮圖片、使用現代格式（WebP、AVIF），並透過
srcset提供響應式尺寸。像 Image Compressor 這類工具可協助縮減檔案大小，且不會造成明顯的品質損失。 - 預載關鍵資源： 對主視覺圖片、字型與關鍵 CSS 使用
<link rel="preload">。 - 縮短伺服器回應時間： 使用 CDN、啟用快取，並最佳化後端查詢。
- 消除阻擋渲染的資源： 內嵌關鍵 CSS、延後載入非關鍵 JavaScript，並以非同步方式載入 CSS。
- 使用內容傳遞網路 (CDN)： 從鄰近使用者的位置提供資源。
改善 INP：讓互動感覺即時
INP 衡量從使用者輸入（點擊、輕觸、按鍵）到下一次視覺更新之間的時間。改善方法：
- 拆分長任務： 使用
setTimeout或requestIdleCallback讓出主執行緒。 - 最佳化事件處理常式： 對捲動和調整大小等快速觸發的事件進行去抖動或節流。
- 減少 JavaScript 執行時間： 進行程式碼分割、樹狀搖晃，並延後載入非關鍵指令碼。
- 使用 Web Worker： 將繁重運算卸載到背景執行緒。
- 減少第三方指令碼： 稽核並移除不必要的分析、廣告或小工具。
改善 CLS：保持版面穩定
當元素意外位移時就會發生 CLS。可透過以下方式避免：
- 一律為圖片和影片設定寬度與高度： 這會保留空間並防止重排。
- 為廣告和嵌入內容保留空間： 使用 CSS
aspect-ratio或固定尺寸容器。 - 避免在現有內容上方插入內容： 除非是為了回應使用者互動。
- 使用
font-display: swap： 確保文字在字型載入期間保持可見，但要注意它可能造成輕微位移；關鍵文字可考慮使用font-display: optional。 - 預載字型： 降低因字型延遲載入而導致版面位移的機會。
Core Web Vitals 指標比較
| 指標 | 衡量內容 | 良好目標 | 分數不佳的常見原因 |
|---|---|---|---|
| LCP | 載入效能 | ≤ 2.5 秒 | 伺服器緩慢、阻擋渲染的資源、過大的圖片 |
| INP | 回應性 | ≤ 200 毫秒 | 長任務、沉重的 JavaScript、效率不佳的事件處理常式 |
| CLS | 視覺穩定性 | ≤ 0.1 | 未設定尺寸的圖片、動態內容注入、網頁字型 |
持續改善的工具與工作流程
最佳化 CWV 不是一次性任務。將這些做法整合到你的工作流程中：
- 設定真實使用者監控： 使用
web-vitals函式庫將指標傳送到你的分析平台。 - 在 CI 中執行 Lighthouse： 使用 Lighthouse CI 在部署前捕捉效能退步。
- 使用 Search Console 監控： 定期檢查 Core Web Vitals 報表。
- 在真實裝置上測試： 模擬器很有用，但真實裝置才能揭示真正的效能。
- 迭代並衡量： 一次只做一項變更，並衡量其影響。
請記住，改善 Core Web Vitals 通常涉及最佳化資源。對於圖片，請考慮在上傳前使用 Image Compressor 來縮減檔案大小。
常見問題
什麼是 Core Web Vitals，為什麼它們很重要？
Core Web Vitals 是三項指標（LCP、INP、CLS），用來衡量載入、互動性與視覺穩定性。它們之所以重要，是因為它們反映真實使用者體驗，且被 Google 用作排名訊號。
我應該多久衡量一次 Core Web Vitals？
持續進行。設定真實使用者監控以取得持續的資料，並在開發期間與發布前執行實驗室測試（例如 Lighthouse）以捕捉效能退步。
沒有開發人員也能改善 Core Web Vitals 嗎？
有些改善，例如壓縮圖片或透過外掛啟用快取，可以由非開發人員完成。然而，更深入的优化（例如減少 JavaScript、最佳化關鍵渲染路徑）通常需要開發人員參與。
準備好為更好的 LCP 最佳化你的圖片了嗎？試試我們免費的 Image Compressor，在不損失品質的情況下縮減檔案大小。