Google 的 Core Web Vitals 是什麼？

你是否曾聽過這個說法：「網頁載入時間超過 2 秒，就會有一半的人放棄離開」？為了提升使用者體驗，開發者會不斷優化網站效能，但如何衡量優化成果呢？近年來，Google 提出的「Core Web Vitals 網站核心指標」，為開發者和網站經營者提供了一套能衡量網站效能評估標準。

我們在這篇文章中，會帶你了解 Core Web Vitals 的一些重要基礎，包含以下內容：

什麼是 Core Web Vitals(網站核心指標) ?
Core Web Vitals(網站核心指標) 的影響與重要性
Core Web Vitals(網站核心指標) 的定義
Core Web Vitals(網站核心指標) 測量方法

Core Web Vitals(網站核心指標) 是什麼？

Core Web Vitals 是 Google 所提出的一組指標，用來衡量網站使用者體驗的三大面向，包括：

載入效能：網頁載入的速度有多快？
互動性：使用者是否能順暢地與網頁互動？
視覺穩定性：網頁內容在載入過程中是否穩定，不會造成閱讀困擾？

這些指標不僅影響用戶體驗，還直接關係到網站的 SEO 排名。

Core Web Vitals 並非一成不變，而是基於 Google 長期的用戶行為分析而持續優化的結果。目前，穩定的 Core Web Vitals 包括三個關鍵指標：LCP、INP 和 CLS。

值得注意的是，這些指標可能會因為準確性問題而被替換。例如，從 2024 年 3 月起，INP 正式取代了 FID 成為 Core Web Vitals 之一。其他的 web vitals 還有如 TTFB 和 FCP，但大部分人只需要專注於 Core Web Vitals 的指標來優化即可。

為什麼 Core Web Vitals(網站核心指標) 重要？

Core Web Vitals 不僅影響使用者對網站的第一印象，更直接關係到網站的 SEO 排名。

提升使用者體驗：符合 Core Web Vitals 的網站能提供更流暢、穩定的瀏覽體驗，讓使用者更願意停留和互動。
改善 SEO 排名：Google 已將 Core Web Vitals 納入搜尋引擎演算法的排名因素之一，符合這些指標的網站更容易在搜尋結果中獲得更好的排名。
增加網站流量和轉換率：良好的使用者體驗有助於吸引更多使用者造訪網站，並提升他們在網站上停留的時間、瀏覽的頁數以及轉換的可能性。

Core Web Vitals(核心指標) 的定義

目前的 Core Web Vitals 包含以下三個指標：

LCP (Largest Contentful Paint,最大內容繪製): 衡量頁面主要內容載入所需的時間，建議在 2.5 秒內完成。
INP (Interaction to Next Paint, 與下一個顯示內容的互動): 從使用者與頁面進行互動(點擊、鍵盤輸入等)到瀏覽器對該互動作出響應並更新畫面所需的時間，建議分數為 200 ms 以下。
CLS (Cumulative Layout Shift, 累積版面配置偏移): 衡量頁面元素在載入過程中發生位移的程度，建議分數低於 0.1。

各個指標會分成三種等級 (不良、需要改善、良好)，Google 建議第 75 個百分位數的建議目標為良好。

舉例來說，假設你的網頁主要內容載入時間在 2.5 秒內，那就符合 LCP 指標為「良好」的標準。

三個指標的標準如下圖所示：

Core Web Vitals(核心指標) 測量方法

以下推薦的三個工具，都是 Google 官方所推出的，也是最常見而且免費可以來測量網站 Core Web Vitals 的方法：

1. PageSpeed Insights

PageSpeed Insights 是 Google 提供的工具，可分析網頁速度並提供優化建議。例如下圖為 ExplainThis 首頁在 PageSpeed Insights 所測得的各項指標分數，都在良好的範圍內。

2. Lighthouse

Google 開發的開放原始碼工具，可自動化審核網頁品質，包含 Core Web Vitals 和 SEO 等。常見的使用方法包括安裝 Lighthouse 的 Google 插件，或者直接打開開發者工具，點選「Lighthouse」的 Tab 進行測量。如下圖所示：

3. Search Console

第三種方法是 Google 所提供的網站管理工具 - Search Console。除了可以看 SEO 的相關數據之外，也可查看網站的 Core Web Vitals 統整報告。

它會詳細列出所有網站中有性能問題的頁面，並提供調整建議。如下圖所示，它顯示了哪些頁面有 LCP 的問題，供你調整。

透過這些測量工具，我們可以了解自己的網頁在哪些指標上需要加強。常見的做法是在網頁有重大改動時測量這些指標，以確保改動不會造成嚴重的性能影響。更謹慎的做法是透過 web-vitals 的套件。

如果你對網站優化有興趣，建議深入研究這些指標並應用相關工具進行分析和改善，下幾篇我們會繼續來討論三個重要的核心指標。

參考資料

Web Vitals