Core Web Vitals：衡量並改善以提升網頁效能
你已經打造了一個快速的網站，但使用者仍然抱怨速度慢。或者，儘管內容優質，你的 SEO 排名卻停滯不前。罪魁禍首可能是 Core Web Vitals——Google 用來衡量使用者體驗的指標。在本指南中，你將了解它們是什麼、如何衡量，以及改善每一項的實用步驟。
什麼是 Core Web Vitals？
Core Web Vitals 是 Google 用來量化使用者體驗的三個特定指標：
- 最大內容繪製 (LCP)： 衡量載入效能。它應該在頁面開始載入後的 2.5 秒內發生。
- 與下次繪製的互動 (INP)： 衡量回應性。對於 75% 的頁面造訪，它應該低於 200 毫秒。
- 累計版面位移 (CLS)： 衡量視覺穩定性。它應該小於 0.1。
這些指標是 Google 頁面體驗信號的一部分，可能會影響你的搜尋排名。更重要的是，它們反映了真實的使用者體驗——緩慢的網站會讓訪客感到沮喪並將他們趕走。
如何衡量 Core Web Vitals
你無法改善你沒有衡量的東西。主要有兩種類型的工具：實驗室工具（合成測試）和現場工具（真實使用者監控）。
實驗室工具
- Lighthouse： 內建於 Chrome DevTools（Audits 分頁）。提供分數和具體機會。
- PageSpeed Insights： 結合實驗室和現場資料的網頁工具。
- WebPageTest： 具有自訂位置和裝置的高階測試。
現場工具
- Chrome 使用者體驗報告 (CrUX)： 來自 Chrome 使用者的真實世界資料，可透過 PageSpeed Insights 或 BigQuery 取得。
- web-vitals 函式庫： 用於在自己的分析中衡量指標的 JavaScript 函式庫。
- Search Console： Core Web Vitals 報告顯示基於 CrUX 資料的群組效能。
從 PageSpeed Insights 開始快速了解概況，然後使用 web-vitals 函式庫隨時間追蹤真實使用者指標。
改善 LCP（最大內容繪製）
LCP 通常是首屏中最大的圖片或文字區塊。要改善它：
- 優化圖片： 壓縮圖片，使用 WebP 或 AVIF 等現代格式，並透過
srcset提供響應式圖片。 - 預載關鍵資源： 對主視覺圖片和字型使用
<link rel="preload">。 - 消除阻礙渲染的資源： 內嵌關鍵 CSS，延遲非關鍵 CSS 和 JavaScript。
- 使用 CDN： 從更靠近使用者的位置提供資源。
- 啟用快取： 為靜態資源設定較長的快取時間。
對於圖片，TryQuickToolBox 的 Image Compressor 等工具可以幫助減少檔案大小，而不會造成明顯的品質損失。
改善 INP（與下次繪製的互動）
INP 衡量從使用者互動（點擊、輕觸、按鍵）到下一次視覺更新的時間。要改善它：
- 減少 JavaScript 執行時間： 分解長任務，使用
requestIdleCallback或setTimeout讓出主執行緒。 - 避免過大的 DOM 大小： 將 DOM 保持在 1,500 個節點以下，深度不超過 32 層。
- 優化事件處理常式： 對滾動和調整大小等頻繁事件進行去抖動或節流。
- 使用 Web Workers： 將繁重的運算移出主執行緒。
- 最小化第三方指令碼： 它們經常阻塞主執行緒。
使用 Chrome DevTools 的 Performance 面板來識別長任務並優化它們。
改善 CLS（累計版面位移）
CLS 衡量意外的版面位移。要減少它：
- 始終在圖片和影片上包含 width 和 height 屬性： 這可以保留空間。
- 為廣告和嵌入內容保留空間： 使用 CSS
aspect-ratio或固定尺寸。 - 避免在現有內容上方插入內容： 除非是為了回應使用者互動。
- 使用 font-display: swap： 防止文字不可見，但可能導致輕微位移；對於關鍵文字，考慮使用
font-display: optional。 - 小心動態內容： 將其載入到首屏下方或平滑地動畫過渡。
Core Web Vitals 指標比較
| 指標 | 衡量內容 | 良好閾值 | 分數不佳的主要原因 |
|---|---|---|---|
| LCP | 載入效能 | ≤ 2.5s | 伺服器緩慢、阻礙渲染的資源、大型圖片 |
| INP | 回應性 | ≤ 200ms | 長任務、繁重的 JavaScript、大型 DOM |
| CLS | 視覺穩定性 | ≤ 0.1 | 沒有尺寸的圖片、動態內容、網頁字型 |
持續監控的工具和技術
改善 Core Web Vitals 不是一次性任務。設定持續監控：
- 使用
web-vitals函式庫將指標傳送到你的分析平台。 - 設定當指標超過閾值時的警示。
- 在 CI/CD 中定期執行 Lighthouse 以捕捉回歸。
- 在 Search Console 中監控 CrUX 資料以了解真實使用者趨勢。
如需快速檢查，請在每次重大變更後使用 Chrome DevTools 的 Lighthouse 分頁或 PageSpeed Insights。
常見問題
什麼是 Core Web Vitals，為什麼它們很重要？
Core Web Vitals 是三個指標（LCP、INP、CLS），用於衡量載入、互動性和視覺穩定性。它們很重要，因為它們反映了真實的使用者體驗，並被 Google 用作排名信號。
我應該多久衡量一次 Core Web Vitals？
在每次重大程式碼變更後進行衡量，並設定持續的現場監控以隨時間追蹤真實使用者指標。Lighthouse 等實驗室工具適合快速檢查，但現場資料顯示實際的使用者體驗。
我可以在沒有開發人員的情況下改善 Core Web Vitals 嗎？
一些改善措施（例如壓縮圖片）可以使用工具完成，但大多數需要程式碼變更（例如新增 width/height 屬性、優化 JavaScript）。通常需要開發人員或熟悉網頁效能的人。
準備好優化你的圖片以獲得更好的 LCP 了嗎？試試我們免費的 Image Compressor，在不犧牲品質的情況下減少檔案大小。