Core Web Vitals：測量與改善以提升網站效能
你的使用者沒有耐心。如果頁面載入太久，或是在他們閱讀時跳來跳去，他們就會離開。Google 知道這一點，其排名演算法使用 Core Web Vitals 來衡量真實世界的使用者體驗。但除了 SEO 之外，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。
這些閾值基於真實使用者的欄位資料，而非實驗室測試。這就是為什麼正確測量至關重要。
如何測量 Core Web Vitals
你需要實驗室資料和欄位資料。實驗室工具有助於除錯；欄位資料反映真實使用者體驗。
欄位工具（真實使用者監控）
- Chrome User Experience Report (CrUX)： Google 的真實使用者指標公開資料集。可在 PageSpeed Insights 或 Search Console 中查看。
- PageSpeed Insights： 顯示某個 URL 的實驗室（Lighthouse）和欄位（CrUX）資料。
- Search Console Core Web Vitals 報告： 按狀態和指標將 URL 分組。
- Web Vitals JavaScript 函式庫： 透過
web-vitals函式庫收集自己的欄位資料，並傳送到你的分析工具。
實驗室工具（合成測試）
- Lighthouse： 內建於 Chrome DevTools。提供實驗室指標和改善機會。
- WebPageTest： 進階測試，包含影片膠捲和瀑布圖。
- Chrome DevTools Performance 面板： 深入分析執行階段效能。
從 PageSpeed Insights 開始快速概覽，然後使用 DevTools 除錯特定問題。
改善 LCP：讓主要內容載入更快
LCP 通常是最具影響力的待修正指標。LCP 不佳的常見原因包括伺服器回應緩慢、阻礙渲染的資源，以及未最佳化的圖片。
- 最佳化圖片： 壓縮圖片，使用 WebP 或 AVIF 等現代格式，並透過
srcset提供回應式圖片。像 Image Compressor 這類工具可以幫助縮小檔案大小，而不會造成明顯的品質損失。 - 預載 LCP 圖片： 為首圖新增
<link rel="preload">，讓它更早開始載入。 - 減少伺服器回應時間： 使用 CDN、啟用快取，並最佳化後端查詢。對於 Nginx，可考慮 fastcgi_cache 或 proxy_cache。
- 消除阻礙渲染的資源： 內嵌關鍵 CSS，延遲非關鍵 CSS 和 JavaScript。
- 使用內容傳遞網路 (CDN)： 從更靠近使用者的位置提供資源。
<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Responsive images -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">
改善 INP：讓互動感覺即時
INP 在 2024 年 3 月取代了 First Input Delay (FID)。它衡量互動的完整持續時間，而不只是處理前的延遲。要改善 INP，你需要減少 JavaScript 執行時間並避免長時間任務。
- 拆分長時間任務： 使用
setTimeout或requestIdleCallback讓出主執行緒。 - 最佳化事件處理常式： 對昂貴的處理常式進行去抖動或節流，並避免版面抖動。
- 減少 JavaScript 套件大小： 程式碼分割、搖樹最佳化，並延遲載入非關鍵指令碼。
- 使用 Web Workers： 將繁重運算移出主執行緒。
- 最小化第三方指令碼： 它們經常阻擋主執行緒。以非同步方式載入或延遲它們。
使用 DevTools 中的 Performance 面板錄製互動，並找出長時間任務。
改善 CLS：保持版面穩定
CLS 發生在元素非預期地位移時。常見元兇是沒有尺寸的圖片、廣告、嵌入內容，以及動態注入的內容。
- 一律在圖片和影片上設定寬度和高度屬性： 這讓瀏覽器可以保留空間。
- 為廣告和嵌入內容保留空間： 使用 CSS
aspect-ratio或固定大小的容器。 - 避免在現有內容上方插入內容： 如果必須這樣做，請在使用者互動時進行。
- 謹慎使用
font-display: swap： 如果字型指標不同，Swap 可能導致版面位移。考慮font-display: optional或預載字型。 - 動畫堅持使用 CSS 變換： 它們不會觸發版面位移。
<!-- Reserve space with aspect-ratio -->
<img src="#" width="800" height="600" alt="...">
Core Web Vitals 指標比較
| 指標 | 衡量內容 | 良好閾值 | 常見修正 |
|---|---|---|---|
| LCP | 載入效能 | < 2.5s | 最佳化圖片、預載、CDN |
| INP | 回應性 | < 200ms | 拆分長時間任務、減少 JS |
| CLS | 視覺穩定性 | < 0.1 | 設定尺寸、保留空間 |
監控與持續改善
改善 Core Web Vitals 不是一次性任務。部署修正後，監控欄位資料以確保不會發生退步。在 RUM 工具中設定警示，當指標超過閾值時通知你。定期在 CI 中執行 Lighthouse，以便在效能退步進入正式環境前及早發現。
請記住，效能是一項功能。透過優先考慮 Core Web Vitals，你可以提供更好的體驗，讓使用者保持參與並提升搜尋排名。
常見問題
Core Web Vitals 目前的閾值是什麼？
對於 LCP，良好是低於 2.5 秒，需要改善是 2.5–4.0 秒，差是超過 4.0 秒。對於 INP，良好是低於 200 毫秒，需要改善是 200–500 毫秒，差是超過 500 毫秒。對於 CLS，良好是低於 0.1，需要改善是 0.1–0.25，差是超過 0.25。
我應該多久測量一次 Core Web Vitals？
CrUX 中的欄位資料每日更新，但它是 28 天滾動平均值。你應該持續監控，並在每次重大程式碼變更後執行實驗室測試。在 CI/CD 管道中設定自動化 Lighthouse 執行，以便及早發現退步。
沒有開發人員也能改善 Core Web Vitals 嗎？
有些修正，例如壓縮圖片或啟用快取，可以透過外掛或主機設定完成。然而，更深入的最佳化，例如程式碼分割或消除阻礙渲染的資源，通常需要開發人員參與。根據你的欄位資料，優先處理影響最大的指標。
準備好最佳化圖片以改善 LCP 了嗎？試試我們免費的 Image Compressor，在不損失品質的情況下縮小檔案大小。