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

為什麼 Core Web Vitals 很重要

你已經打造了一個漂亮的網站，但使用者卻因為感覺很慢而跳出。Core Web Vitals 是 Google 用來衡量真實使用者體驗的指標：Largest Contentful Paint (LCP)、First Input Delay (FID) 和 Cumulative Layout Shift (CLS)。它們會影響搜尋排名，更重要的是，會影響訪客是否願意留下。本指南將教你如何測量與改善這些指標。

了解這三項指標

每項指標分別捕捉載入、互動性與視覺穩定性的不同面向。

注意：FID 將在 2024 年被 Interaction to Next Paint (INP) 取代，但優化原則仍然相似。

如何測量 Core Web Vitals

你需要實驗室數據和實際使用者數據。實驗室工具模擬環境；實際數據反映真實使用者。

1. Chrome DevTools Lighthouse：在 Lighthouse 分頁中執行稽核。它會提供實驗室分數和改善機會。
2. PageSpeed Insights：輸入你的網址，查看來自 Chrome User Experience Report (CrUX) 的實際數據和實驗室建議。
3. Search Console：查看 Core Web Vitals 報告，取得群組層級的實際數據。
4. Web Vitals JavaScript 函式庫：將 web-vitals 加入你的網站，以收集真實使用者指標。

import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

使用這些數據來找出模式並排定修正的優先順序。

改善 Largest Contentful Paint (LCP)

LCP 通常是最具影響力的指標。請優化以下領域：

• 優化圖片：壓縮圖片、使用 WebP 或 AVIF，並提供響應式尺寸。像 Image Compressor 這類工具可以幫助縮小檔案大小，且不會有明顯的品質損失。
• 預載關鍵資源：對主視覺圖片和字型使用 <link rel="preload">。
• 消除阻礙渲染的資源：內嵌關鍵 CSS，延遲非關鍵 JavaScript。
• 使用 CDN：從更靠近使用者的位置提供資源。
• 快取資源：為靜態檔案設定較長的快取期限。

範例：預載你的 LCP 圖片：

<link rel="preload" as="image" href="#">

改善 First Input Delay (FID)

FID 衡量互動性。長時間執行的 JavaScript 任務會阻塞主執行緒。

• 拆分長時間任務：使用 setTimeout 或 requestIdleCallback 讓主執行緒有機會處理其他工作。
• 減少主執行緒工作量：移除未使用的 JavaScript、進行程式碼分割，並延遲非關鍵指令碼。
• 使用 web workers 處理繁重運算。
• 避免大型同步指令碼：以非同步方式載入第三方指令碼。

使用 Lighthouse 的「Minimize main-thread work」和「Reduce JavaScript execution time」建議項目進行稽核。

改善 Cumulative Layout Shift (CLS)

CLS 發生在元素非預期移動時。常見原因與修正方式：

• 沒有尺寸的圖片：一律設定 width 和 height 屬性，或使用 CSS aspect-ratio。
• 廣告、嵌入內容、iframe：使用預留位置或固定尺寸容器來保留空間。
• 動態內容注入：避免在現有內容上方插入內容，除非是由使用者互動觸發。
• 網頁字型：使用 font-display: swap 並預載字型，以避免文字不可見或版面位移。

範例：為圖片保留空間：

<img src="#" width="800" height="600" alt="...">

持續監控的工具與工作流程

效能不是一次性的修正。將監控整合到你的開發流程中：

• Lighthouse CI：在每次 pull request 時執行稽核，以捕捉效能退步。
• Real User Monitoring (RUM)：使用 web-vitals 函式庫並將資料傳送到你的分析平台。
• 效能預算：為指標設定閾值，並在超出時讓建置失敗。

定期檢查 PageSpeed Insights 和 Search Console 來追蹤進度。

常見問題

什麼是 Core Web Vitals？

Core Web Vitals 是 Google 定義的一組指標，用來衡量真實使用者體驗：Largest Contentful Paint（載入）、First Input Delay（互動性）和 Cumulative Layout Shift（視覺穩定性）。

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

使用 RUM 持續監控，並在每次重大程式碼變更時執行實驗室稽核。每月透過 Search Console 或 PageSpeed Insights 檢查實際數據。

我可以在沒有開發人員的情況下改善 Core Web Vitals 嗎？

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

準備好優化你的圖片以獲得更好的 LCP 了嗎？試試我們免費的 Image Compressor，在不犧牲品質的情況下縮小檔案大小。