Google 搜尋於 2020 年 5 月宣布公佈了新的體驗指標：網站體驗核心指標 (Core Web Vitals) 來評估網頁的使用者體驗。
隨著 Google 演算法技術發展純熟，Google 也從傳統「理解內容」的演算法，進階到「理解體驗」的層次。究竟 Core Web Vitals 是如何評估使用者體驗呢？
文章大綱
網站體驗核心指標(Core Web Vitals)是什麼？
網站體驗核心指標(Core Web Vitals)是 Google 於 2020 年推出的指標，用來測量訪客在頁面的瀏覽體驗狀況。
Google 研究員歸納出了載入效能、互動性、視覺穩定性三大方向，評估網頁的體驗好與不好，而這三大方向也衍伸為網站體驗的三大核心指標：LCP、CLS、INP。
每個核心指標的檢查結果都有良好、需要改善、不良三個區間，網站中若是有過多的頁面體驗不良，就可能要擔心體驗分數輸給其他競爭對手的頁面而影響到排名！以下會個別介紹每個指標所代表的含義與改善方法。
Google 官方也有提供通俗白話版的 Core Web Vitals 介紹影片，竟然是全程用台語解說 (是的，你沒聽錯)，對於台灣人而言真的親切感十足！
LCP 最大內容繪製
最近想要買家電，於是到了某購物網站挑選，不知道是不是購物網站的資料太龐大了，每次切換新網頁，都要約 5 秒我才能看到產品的介紹畫面⋯⋯這網站真的跑很慢！我看還是去其他網站下單好了！
當你使用瀏覽器打開網頁時，網頁從開始等待畫面載入，直到主要畫面載入完成，這段過程所需要的時間，被稱為最大內容繪製 (LCP, Largest Content Paint)。
LCP 用來評估頁面的載入效能，Google 建議於開始載入網頁的 2.5 秒內完成 LCP。
如何優化 LCP？
由於網頁在顯示的過程中，背景會讀取大量的網頁原始碼與檔案，因此要能有效降低 LCP 使其低於2.5 秒，最好的方法就是加速網頁載入的速度，以及調整主要畫面的載入順序，讓主要內容可以更快的呈現在使用者面前。
能透過以下方法改善 LCP：
- 減少主機 Server 的載入時間
- 優化外部引用之資源 (CSS 與 JavaScript)
- 減少頁面元素載入時間
- 優化客戶端渲染 (Client Side Rendering)
CLS 累計版面配置位移
偶爾在讀網路文章的時候，才讀到前幾個字，因為前面的位置突然載入了圖片，害原本文章的位置跑掉了，常常讀到一半跳來跳去的好煩啊⋯⋯這些網站到底是怎麼設計的？
網頁是由許多大大小小的區塊所組成，頁面於開始到載入完成，過程中所有區塊移位分數的總和，稱為累計版面配置位移 (CLS，Cumulative Layout Shift)。
當版面發生偏移，Google 會給與每個偏移區塊一個位移分數，所有的分數加總便稱為 CLS，累計版面位移的分數越高，代表頁面的位移狀況越嚴重，畫面的穩定性也就越差。
CLS用來評估畫面的穩定性，Google 建議頁面之 CLS 分數應低於 0.1。
位移分數是如何計算的？
以下為位移分數的計算方式：
版面位移分數 (layout shift score) = 影響分數 (impact fraction) * 距離分數 (distance fraction)
*影響分數：造成偏移區塊＋原本區塊所佔螢幕 (viewport) 比例，以下圖為例，紅色部分為文章區塊＋偏移的區塊，佔比為 75%，故影響分數計算為 0.75。
*距離分數：造成偏移區塊相對於螢幕 (viewport) 的移動比例，以下圖為例，藍色箭頭空白部分為造成偏移區塊，其移動了全螢幕的 25%，故距離分數計算為 0.25。
因此版面位移分數為 0.75 * 0.25 = 0.1875。
版面位移分數的計算方式較為複雜，有興趣的可以閱讀官方文件介紹：
Cumulative Layout Shift (CLS) – Layout Shifts in detail
如何優化 CLS？
導致 CLS 過慢的原因為網頁在載入過程中，
能透過以下方法改善 CLS：
- 圖片元素使用固定百分比或設定寬高比 CSS
- 外部嵌入資源設定尺寸 (Ads, embeds, iframes)
- 避免使用動態插入內容
- 使用 Skeletor UI (先載入固定版位的前端技術)
- 使用 Preload 方法載入外部字體樣式
其中圖片與字體比較常造成 CLS 分數不佳，在網站管理上需留意幫圖片設定尺寸；字體如載入速度過慢，可能會同時拖累到 LCP 的時間，這時候就要改善網站字體的載入方式，詳細可參考字型的最佳化做法。
FID 首次輸入延遲時間 (已停用)
Google 官方已於 2024 年 3 月停用 FID 首次輸入延遲指標，並以新的指標 INP 取代，目的在更準確的衡量使用者的互動情形。
因為打算去國外唸書，於是到了某留遊學網站了解服務內容，在網頁中有看到一個「免費諮詢」的按鈕，我蠻有興趣的！點看看會發生什麼事情⋯⋯奇怪了？怎麼會沒有任何反應？
網頁上通常會有各式各樣的按鈕與互動功能 (點擊按鈕、下拉式選單、透過 JavaScript 控制的功能)，當使用者第一次與頁面進行互動，行為完成到瀏覽器成功回應給使用者的時間，稱為首次輸入延遲 (FID, First Input Delay)。
FID 用來評估頁面的互動性，Google 建議頁面之 FID 應低於 100 毫秒。
如何優化 FID？
導致 FID 過慢的主要原因為互動之 JavaScript 過於龐大，因此須優化 JS 程式碼執行速度，減少使用者行為所產生的延遲時間，讓互動過程更為順暢。
能透過以下方法改善 FID：
- 拆解執行過久的 JavaScript
- 優化頁面的 JavaScript 載入流程
- 使用 Web Worker 技術
- 減少 JavaScript 的執行時間
如何檢查網頁的網站體驗核心指標？
Google 官方提供了非常多的工具可以檢測體驗分數，由於 INP 是需要計算畫面載入完後的互動，因此部分工具是沒辦法檢測到 INP 分數。以下也推薦其中幾個較容易上手的檢查工具，輕鬆網頁的體驗指標計算出來：
Pagespeed Insight (推薦)
網站速度檢查工具 PageSpeed Insight 除了檢查網頁速度外，也能幫你計算各體驗指標的分數，系統會顯示過去 28 天的真實訪客體驗狀況與診斷結果，並會提供各指標的優化建議，照著官方提供的建議調整頁面就能改善體驗分數了！
Google Search Console
網站如有註冊 Google Search Console，便能在網站使用者體驗核心指標 (Core Web Vitals) 的功能中，觀察網站目前的體驗資料。由於資料來源是從使用者真實的瀏覽數據 (Chrome UX Report) 中取得，若網站為新網站或進站流量太少，便無法使用此報表。
Web Vitals Extension
想要更快速的得知網站體驗核心指標的檢查結果，可以安裝 Web Vitals Extension 這款 Chrome 擴充功能，安裝後便能即時顯示當前頁面的指標資料。
除了以上的工具外，還有如 Lighthouse、Chrome DevTools 與 Chrome UX Report，以及許多第三方網站健檢工具能幫你評估網頁體驗核心指標。檢查了方法百百種，好好調整才是最重要的！
網站體驗核心指標如何影響排名？
網站體驗核心指標 (Core Web Vitals) 目前為「網頁體驗」整體排名訊號的一部分，其他的排名訊號包含行動裝置友善、HTTPS、安全性問題、體驗不佳的插頁式廣告等因素。
2021 年 8 月中旬，Google 正式使用網頁體驗做為行動版的排名因素；桌面版則是在 2022 年 4 月被納入排名因素。
雖然網頁體驗很重要，但 Google 仍會優先關注網頁品質，故網頁體驗不佳並不會成為太大弱勢。但遇到許多網站競爭度不相上下的情況，網頁體驗就會變得較為重要，能夠決定網站在 Google 搜尋結果中的排名。
建議 SEO 人員可以先將優化重點放在內容本身。
Core Web Vitals 相關問與答
Ｑ: 我的網站體驗指標分數不佳，看了文章還是搞不懂，到底要怎麼優化呢？
Ａ: 體驗指標分數幾乎都要從網站系統中處理，因此優化方式必須得仰賴網站工程師；網站如果為外包，則需要請系統商與主機商協助。
Ｑ: 我的網頁檢查結果已經為良好，繼續優化追求速度能提升排名嗎？
Ａ: 不用，官方表示Web Core Vitals 分數只要範圍位於良好，給的排名權重是相同的。
Ｑ: 我的網站上頁面非常多，難道我每頁都要檢測嗎？
Ａ: 雖然每頁的檢測結果都不一樣，但其實網站中大多頁面都大同小異，只差在內容，基本上從不同類型的頁面 (首頁、服務頁、文章、商品) 中挑選並檢查即可。
Ｑ: 我的網站系統是使用 WordPress，同樣也能做體驗指標的優化嗎？
Ａ: 可以，但效果有限。通常有一定規模的 WordPress 網站會因圖片、外掛與佈景主題的使用影響到網站速度，特別是 LCP 這項指標，若要徹底優化 WordPress 系統的難度較高，通常需要做出取捨。
完整優化方式請參閱官方教學，建議具網頁前端經驗者閱讀：
Optimize Largest Contentful Paint (LCP) – web.dev
Optimize First Input Delay – web.dev
Optimize Cumulative Layout Shift – web.dev
參考資料
Web Vitals – web.dev
Core Web Vitals & Page Experience FAQs – Google Search Central Community
瞭解 Google 中的網頁體驗 | Google for Developers
評估網頁體驗以打造更美好的網路環境 | Google Developers
網頁體驗更新的更多時程、工具與詳細資料 | Google Developers