Core Web Vitals：測量與改善網站效能

使用者期待快速、順暢的體驗。如果網站感覺緩慢，他們就會離開——而搜尋引擎也會注意到。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。

這些閾值基於真實使用者的欄位資料（第 75 百分位）。實驗室資料有助於診斷問題，但欄位資料反映實際體驗。

如何測量 Core Web Vitals

你需要同時使用欄位資料和實驗室資料。欄位資料顯示真實使用者的效能；實驗室資料讓你除錯和測試變更。

欄位資料工具

• Chrome UX Report (CrUX)：數百萬個網站的彙總真實使用者資料。可透過 PageSpeed Insights、Search Console 或 CrUX API 存取。
• web-vitals JavaScript 程式庫：將指標傳送到你的分析端點，以收集自己的欄位資料。

實驗室資料工具

• Lighthouse：內建於 Chrome DevTools，執行稽核並提供改善機會。
• WebPageTest：進階測試，包含網路節流和影片條。
• Chrome DevTools Performance 面板：深入分析執行階段效能。

從 PageSpeed Insights 開始：它會顯示某個 URL 的欄位資料和實驗室資料。然後在本機使用 Lighthouse 進行迭代。

改善 LCP

LCP 通常是最具影響力的指標。最大的元素通常是圖片或文字區塊。請最佳化這些區域：

1. 最佳化 LCP 圖片：壓縮圖片、提供 WebP 或 AVIF 等現代格式，並設定明確的尺寸。
2. 預先載入 LCP 資源：對首屏使用的圖片或字型使用 <link rel="preload">。
3. 消除阻擋轉譯的資源：內嵌關鍵 CSS，延後非關鍵 CSS 和 JavaScript。
4. 使用 CDN：從靠近使用者的位置提供資源。
5. 減少伺服器回應時間：最佳化後端、使用快取，並考慮邊緣轉譯。

範例：預先載入主視覺圖片：

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

改善 INP

INP 衡量回應性。長任務會阻擋主執行緒並延遲視覺回饋。常見的修正方式：

• 拆分長任務：使用 setTimeout 或 scheduler.yield() 讓出主執行緒。
• 最佳化事件處理常式：對快速事件進行防抖或節流，避免繁重的同步工作。
• 減少 JavaScript：程式碼分割、樹狀搖晃，並延後非關鍵指令碼。
• 使用 Web Workers 處理 CPU 密集型任務。
• 避免大型 DOM 更新：批次處理 DOM 變更並使用 requestAnimationFrame。

使用 web-vitals 程式庫測量 INP，並在 Performance 面板中找出緩慢的互動。

改善 CLS

當元素意外改變位置時，就會發生版面位移。透過以下方式預防：

• 在圖片和影片上設定尺寸屬性（寬度和高度）。
• 為廣告和嵌入內容保留空間，使用 CSS aspect-ratio 或固定容器。
• 避免在現有內容上方插入內容，除非是回應使用者互動。
• 使用 font-display: swap 並預先載入字型，以減少 FOIT/FOUT 位移。
• 使用 transform 製作動畫，而非觸發版面的屬性。

快速比較：指標與目標

監控與迭代

效能不是一次性的修正。設定持續監控：

• 使用 web-vitals 程式庫將指標傳送到你的分析工具。
• 使用 Lighthouse CI 在 CI/CD 流程中為效能退步設定警示。
• 定期檢閱 Search Console 中的欄位資料。

請記住，改善應以真實使用者資料驗證，而不只是實驗室分數。

常見問題

什麼是 Core Web Vitals，為什麼它們很重要？

Core Web Vitals 是以使用者為中心的效能指標（LCP、INP、CLS），用來衡量載入、互動性和視覺穩定性。它們很重要，因為它們與使用者體驗相關，且被 Google 用作排名訊號。

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

每月檢查欄位資料，並在重大發布後檢查。在開發期間使用實驗室工具及早發現效能退步。理想情況下，應以真實使用者指標進行持續監控。

我可以在不重建網站的情況下改善 Core Web Vitals 嗎？

可以。許多改善措施——例如圖片最佳化、預先載入關鍵資源、延後指令碼，以及設定元素尺寸——都可以逐步套用，無需全面重新設計。

需要快速壓縮圖片以改善 LCP 嗎？試試我們的免費 Image Compressor，在不損失品質的情況下縮小檔案大小。