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

你已經建立了一個快速的網站，但使用者仍然抱怨載入緩慢或互動卡頓。或者你的 SEO 排名下滑，你懷疑是頁面體驗出了問題。Core Web Vitals 是 Google 用來量化使用者體驗的指標，它們直接影響搜尋排名。本指南將透過實用、可操作的步驟，引導你測量並改善這些指標。

什麼是 Core Web Vitals？

Core Web Vitals 是 Google 用來評估網頁使用者體驗的一組三項指標：

• Largest Contentful Paint (LCP)：衡量載入效能。它標記了最大的內容元素（例如圖片、影片或文字區塊）變為可見的時間。良好的 LCP 應在 2.5 秒或更短。
• First Input Delay (FID)：衡量互動性。它記錄了從使用者首次與頁面互動（例如點擊連結）到瀏覽器能夠回應的時間。良好的 FID 應在 100 毫秒或更短。
• Cumulative Layout Shift (CLS)：衡量視覺穩定性。它量化頁面載入期間發生的意外版面位移。良好的 CLS 應在 0.1 或更低。

這些指標是 Google 頁面體驗信號的一部分，因此優化它們可以提高使用者滿意度和搜尋排名。

如何測量 Core Web Vitals

在改善之前，你需要先測量。主要有兩類工具：實驗室工具（合成測試）和現場工具（真實使用者監控）。

實驗室工具

實驗室工具在受控環境中模擬頁面載入。它們非常適合在部署前進行除錯和測試變更。

• Lighthouse：內建於 Chrome DevTools，用於審核效能、無障礙功能和 SEO。它提供分數和具體的改善機會。
• WebPageTest：允許你從多個位置和裝置進行測試，並提供進階指標和影片條。

現場工具

現場工具從真實使用者收集資料，讓你真實了解不同裝置和網路下的效能表現。

• Chrome User Experience Report (CrUX)：來自 Chrome 的真實使用者指標公開資料集。你可以在 PageSpeed Insights 或 BigQuery 中查看 CrUX 資料。
• Google Search Console：提供 Core Web Vitals 報告，顯示你的頁面根據 CrUX 資料的表現。
• Web Vitals JavaScript 函式庫：你可以對網站進行檢測，將 Core Web Vitals 資料傳送到你的分析平台。

首先在 Search Console 或 PageSpeed Insights 中檢查你網站的 Core Web Vitals。然後使用 Lighthouse 對特定頁面進行除錯。

改善 Largest Contentful Paint (LCP)

LCP 通常是最具影響力的優化指標。以下是改善方法：

1. 優化圖片

• 在不損失品質的情況下壓縮圖片。使用像是 Image Compressor 的工具來減少檔案大小。
• 使用現代格式如 WebP 或 AVIF，它們比 JPEG 或 PNG 提供更好的壓縮率。
• 使用 srcset 和 sizes 屬性實現響應式圖片，以提供適當尺寸的圖片。
• 對首屏以下的圖片進行延遲載入，但避免對 LCP 圖片進行延遲載入。

2. 消除阻礙渲染的資源

• 壓縮 CSS 和 JavaScript。
• 使用 defer 或 async 屬性延遲非關鍵 JavaScript。
• 內嵌關鍵 CSS，並異步載入其餘部分。

3. 改善伺服器回應時間

• 使用內容傳遞網路 (CDN) 從更靠近使用者的位置提供資源。
• 為靜態資源和 API 回應啟用快取。
• 優化資料庫查詢和伺服器端程式碼。

4. 預載重要資源

對於延遲發現的關鍵資源（如字型、關鍵圖片或指令碼），使用 <link rel="preload">。

改善 First Input Delay (FID)

FID 衡量回應性。高 FID 表示主執行緒忙碌，無法及時回應使用者輸入。

1. 拆分長任務

長時間的 JavaScript 任務會阻塞主執行緒。使用 setTimeout 或 requestIdleCallback 將它們拆分為更小的任務。

2. 優化 JavaScript 執行

• 移除未使用的 JavaScript（tree shaking）。
• 對套件進行程式碼分割，以便初始只載入必要的程式碼。
• 使用 Web Workers 進行繁重計算。

3. 避免大型第三方指令碼

分析或廣告等第三方指令碼可能會阻塞主執行緒。以非同步方式載入它們，並考慮使用標籤管理員来控制它們的觸發時機。

4. 減少 JavaScript 啟動時間

最小化頁面載入時需要解析和執行的 JavaScript 量。伺服器端渲染或靜態網站生成可以有所幫助。

改善 Cumulative Layout Shift (CLS)

CLS 衡量視覺穩定性。當元素意外改變位置時，就會發生版面位移。

1. 始終為媒體包含尺寸屬性

對於圖片和影片，設定 width 和 height 屬性，或使用 CSS aspect-ratio 來保留空間。

2. 為廣告和嵌入內容保留空間

如果你有廣告或 iframe 等動態內容，請使用佔位符或固定尺寸為它們保留空間。

3. 避免在現有內容上方插入內容

動態注入的內容（例如橫幅、通知）會將現有內容向下推，導致位移。使用覆蓋層或保留空間。

4. 使用 Font-Display Swap

自訂字型可能導致 FOIT（隱形文字閃爍）或 FOUT（無樣式文字閃爍）。使用 font-display: swap 立即顯示備用文字。

Core Web Vitals 指標比較

實例：為 LCP 優化圖片

假設你的 LCP 元素是主視覺圖片。以下是優化方法：

<!-- Before: Unoptimized -->
<img src="#" alt="Hero">

<!-- After: Optimized -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">

使用 Image Compressor 將圖片轉換並壓縮為 WebP。設定 fetchpriority="high" 告訴瀏覽器提早載入。指定尺寸以防止版面位移。

長期監控 Core Web Vitals

優化不是一次性任務。設定持續監控：

• 使用 web-vitals 函式庫將指標傳送到你的分析平台。
• 在 Search Console 中設定警示以監控退步情況。
• 在 CI/CD 流程中定期使用 Lighthouse 進行審核。

常見問題

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

Core Web Vitals 是三項指標（LCP、FID、CLS），用於衡量載入、互動性和視覺穩定性。它們重要是因為它們反映了真實使用者體驗，並被 Google 用作排名信號。

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

在重大部署後檢查，並透過現場資料持續監控。Search Console 提供每月報告，但你可以使用 web-vitals 函式庫進行即時追蹤。

沒有開發人員也能改善 Core Web Vitals 嗎？

一些改善措施，如壓縮圖片或使用 CDN，可以透過外掛或工具完成。然而，更深入的優化通常需要修改程式碼。從圖片壓縮和快取開始。

準備好改善你的 LCP 了嗎？使用我們免費的 Image Compressor 壓縮圖片，在不損失品質的情況下減少檔案大小。