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

你已經打造了現代化的網頁應用程式，但使用者抱怨它感覺很慢。搜尋排名正在下滑，而你卻不知道原因。罪魁禍首可能是糟糕的 Core Web Vitals——Google 用來衡量使用者體驗的指標。在本指南中，你將了解它們是什麼、如何測量，最重要的是，如何透過可執行的步驟來改善它們。

什麼是 Core Web Vitals？

Core Web Vitals 是 Google 用來評估網頁使用者體驗的一組特定指標。它們著重於載入、互動性與視覺穩定性：

• Largest Contentful Paint (LCP)：衡量載入效能。最大的內容元素（例如主視覺圖片、標題）變為可見所需的時間。良好：≤ 2.5 秒。
• First Input Delay (FID)：衡量互動性。從使用者首次互動（例如點擊按鈕）到瀏覽器能夠回應的時間。良好：≤ 100 毫秒。
• Cumulative Layout Shift (CLS)：衡量視覺穩定性。量化載入期間非預期的版面位移。良好：≤ 0.1。

這些指標是 Google 頁面體驗訊號的一部分，可能會影響搜尋排名。但更重要的是，它們反映了真實使用者的滿意度。

如何測量 Core Web Vitals

你需要實驗室資料與實地資料兩者兼備，才能獲得完整的全貌。實驗室資料（合成）有助於除錯問題，而實地資料（真實使用者監控）則顯示實際效能。

實驗室工具

• Lighthouse：內建於 Chrome DevTools。執行稽核以取得分數與改善機會。
• PageSpeed Insights：結合某個 URL 的實驗室與實地資料。
• WebPageTest：可自訂位置與裝置的進階測試。

實地工具

• Chrome User Experience Report (CrUX)：真實使用者指標的公開資料集。可透過 PageSpeed Insights 或 BigQuery 存取。
• web-vitals JavaScript 程式庫：加入你的網站以收集真實使用者指標並傳送至你的分析工具。
• Search Console：Core Web Vitals 報表會根據 CrUX 資料顯示群組效能。

以下說明如何使用 web-vitals 程式庫記錄指標：

import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

改善 LCP

LCP 通常是最具挑戰性的指標。請著重於以下幾個面向：

1. 最佳化圖片：壓縮圖片、使用 WebP 或 AVIF 等現代格式，並透過 srcset 提供回應式圖片。對螢幕外的圖片進行延遲載入。
2. 預載關鍵資源：對主視覺圖片、字型與關鍵 CSS 使用 <link rel="preload">。
3. 縮短伺服器回應時間：使用 CDN、啟用快取，並最佳化後端程式碼。
4. 消除阻擋渲染的資源：內嵌關鍵 CSS、延後非關鍵 JS，並避免大型 CSS 檔案。
5. 使用 CDN：從更接近使用者的邊緣節點提供資源。

改善 FID

FID 與回應性有關。長時間任務會阻擋主執行緒，延遲互動性。

1. 拆分長時間任務：使用 setTimeout 或 requestIdleCallback 讓出主執行緒。
2. 最佳化 JavaScript：進行程式碼分割、tree-shaking，並延後非關鍵指令碼。
3. 使用 web workers：將繁重運算移出主執行緒。
4. 降低第三方影響：稽核並限制第三方指令碼。

改善 CLS

CLS 是由載入期間元素位移所造成的。可透過以下方式預防：

1. 一律為圖片與影片加上 width 與 height 屬性。這能保留空間。
2. 為廣告與嵌入內容保留空間：使用 CSS aspect-ratio 或固定容器。
3. 避免在既有內容上方插入內容：除非是回應使用者互動。
4. 使用 CSS transforms 進行動畫：而非會觸發版面的屬性。
5. 預載字型：使用 font-display: swap 以避免文字隱形與版面位移。

Core Web Vitals 指標比較

改善 Core Web Vitals 的實務工作流程

請遵循以下逐步流程：

1. 測量：使用 PageSpeed Insights 取得實驗室與實地資料的基準。
2. 找出問題：查看 Lighthouse 中的改善機會與診斷資訊。
3. 排定優先順序：先處理分數最差的指標。
4. 實作修正：套用上述的最佳化方式。
5. 測試：重新執行 Lighthouse，並在部署後檢查實地資料。
6. 監控：使用 web-vitals 程式庫設定真實使用者監控，並持續追蹤。

常見問題

Core Web Vitals 目前的門檻是什麼？

LCP 方面，良好為 ≤ 2.5s，需要改善為 ≤ 4s，不佳為 > 4s。FID 方面，良好為 ≤ 100ms，需要改善為 ≤ 300ms，不佳為 > 300ms。CLS 方面，良好為 ≤ 0.1，需要改善為 ≤ 0.25，不佳為 > 0.25。

我應該多久測量一次 Core Web Vitals？

持續監控實地資料，並在重大變更後執行實驗室測試。Google 每月更新 CrUX 資料，因此請定期檢查 Search Console。

我可以不靠開發人員來改善 Core Web Vitals 嗎？

某些修正（例如圖片壓縮）可透過工具完成，但許多修正需要修改程式碼。如果你使用 WordPress 等 CMS，可考慮使用效能最佳化外掛。

準備好最佳化你的圖片以改善 LCP 了嗎？試試我們的 Image Compressor，在不損失品質的情況下縮減檔案大小。