Core Web Vitals：衡量與改善以提升網站效能
你已經建立了一個快速的網站，但使用者仍然抱怨載入緩慢或互動卡頓。搜尋引擎也可能因為 Core Web Vitals 不佳而降低你的排名。這些指標——最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累計版面位移 (CLS)——直接影響使用者體驗和 SEO。在本指南中，我們將透過實際步驟展示如何衡量和改善它們。
什麼是 Core Web Vitals？
Core Web Vitals 是 Google 定義的一組指標，用於量化使用者體驗的關鍵面向：載入、互動性和視覺穩定性。它們是：
- 最大內容繪製 (LCP)： 衡量載入效能。應在頁面開始後的 2.5 秒內發生。
- 首次輸入延遲 (FID)： 衡量互動性。應小於 100 毫秒。
- 累計版面位移 (CLS)： 衡量視覺穩定性。應小於 0.1。
這些指標是 Google 頁面體驗信號的一部分，可能影響你的搜尋排名。
如何衡量 Core Web Vitals
你可以在實驗室（合成測試）或實際環境（真實使用者監控）中衡量 Core Web Vitals。兩者各有其用途。
實驗室工具
- Lighthouse： 內建於 Chrome DevTools，可審核效能並提供 LCP、CLS 和總阻塞時間（TBT，FID 的替代指標）的分數。
- PageSpeed Insights： 結合來自 Chrome 使用者體驗報告 (CrUX) 的實驗室和實際環境資料。
- WebPageTest： 提供進階測試，可自訂位置和裝置。
實際環境工具
- Chrome 使用者體驗報告 (CrUX)： 提供數百萬個網站的彙總真實使用者資料。
- web-vitals 函式庫： 一個 JavaScript 函式庫，用於擷取真實使用者的指標並傳送到你的分析工具。
- Search Console： 根據 CrUX 資料顯示你網站的 Core Web Vitals 狀態。
從實驗室工具開始進行除錯，然後用實際環境資料驗證，以確保真實世界的效能。
改善最大內容繪製 (LCP)
LCP 衡量最大的內容元素（通常是主視覺圖片或標題）變為可見的時間。要改善 LCP：
- 優化圖片： 壓縮圖片、使用 WebP 或 AVIF 等現代格式，並透過
srcset提供響應式圖片。 - 預載關鍵資源： 對關鍵圖片、字型和樣式表使用
<link rel="preload">。 - 減少伺服器回應時間： 使用 CDN、啟用快取，並優化後端效能。
- 消除阻礙渲染的資源： 內嵌關鍵 CSS、延遲非關鍵 JavaScript，並避免大型 CSS 檔案。
- 使用內容傳遞網路 (CDN)： 從更接近使用者的位置提供資源。
關於圖片優化，試試我們的 圖片壓縮工具，在不損失品質的情況下減小檔案大小。
改善首次輸入延遲 (FID)
FID 衡量從使用者首次與頁面互動到瀏覽器能夠回應的時間。要改善 FID：
- 最小化 JavaScript 執行： 拆分長任務、使用程式碼分割，並延遲非關鍵指令碼。
- 優化第三方指令碼： 以非同步方式載入，或延遲到關鍵內容之後。
- 使用 Web Worker： 將繁重計算卸載到工作執行緒。
- 減少主執行緒工作： 避免大型同步指令碼和過多的 DOM 大小。
Lighthouse 的 TBT 指標等工具可以幫助你識別長任務。
改善累計版面位移 (CLS)
CLS 衡量頁面載入期間意外的版面位移。要改善 CLS：
- 始終在圖片和影片上包含寬度和高度屬性： 這會保留空間並防止位移。
- 為廣告和嵌入內容保留空間： 使用 CSS
aspect-ratio或固定尺寸。 - 避免在現有內容上方插入內容： 除非是為了回應使用者互動。
- 使用 CSS 變換進行動畫： 而不是觸發版面配置的屬性。
- 預載字型： 使用
font-display: swap並預載，以避免不可見文字位移。
Core Web Vitals 閾值比較
| 指標 | 良好 | 需要改善 | 不佳 |
|---|---|---|---|
| LCP | ≤ 2.5秒 | 2.5秒 – 4.0秒 | > 4.0秒 |
| FID | ≤ 100毫秒 | 100毫秒 – 300毫秒 | > 300毫秒 |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
實用優化工作流程
遵循以下逐步方法來改善 Core Web Vitals：
- 衡量： 執行 Lighthouse 並檢查 Search Console 的實際環境資料。
- 識別問題： 專注於分數最差的指標。
- 套用修正： 使用上述針對 LCP、FID 或 CLS 的提示。
- 再次測試： 重新執行審核以確認改善。
- 監控： 使用 web-vitals 函式庫隨時間追蹤真實使用者指標。
請記住，效能是持續的。在新增功能時定期審核你的網站。
常見問題
什麼是 Core Web Vitals？
Core Web Vitals 是三個指標——LCP、FID 和 CLS——用於衡量載入、互動性和視覺穩定性。它們被 Google 用作排名信號。
我應該多久檢查一次 Core Web Vitals？
在重大變更後檢查，並至少每月一次。同時使用實驗室和實際環境資料來捕捉效能退步。
沒有開發人員，我可以改善 Core Web Vitals 嗎？
一些修正，例如圖片壓縮和為圖片新增尺寸，可以由內容編輯者完成。其他可能需要開發人員協助。
準備好優化你的圖片以獲得更好的 LCP 了嗎？試試我們免費的 圖片壓縮工具，減小檔案大小並加速你的網站。