網站使用體驗核心指標（CWV）：LCP、FID、CLS、INP 白話文介紹

若網站達到網站體驗核心指標的門檻要求，使用者放棄載入網頁的可能性會降低 24%。
最大內容繪製 (LCP) 指標每縮短 100 毫秒，Farfetch 的網站轉換率就會提高 1.3%。
將累計版面配置位移 (CLS) 指標降低 0.2，讓 Yahoo!Japan 的單次工作階段網頁瀏覽量提高 15%，工作階段持續時間延長 13%，跳出率則降低 1.72%。

LCP (Largest Contentful Paint)

想像你正在打開一個遊戲，但是你最期待的遊戲主要畫面 (好比如主角或主要場景)，這個主要畫面出現的時間非常慢，是不是體驗會很糟糕？

LCP 就像等待主角或主場景完整出現在你面前的時間。

回到網頁的使用情境上，LCP 叫做 Largest Contentful Paint，中文叫做最大內容繪製，當一個網頁開始載入畫面中主要內容的載入時間，就是 LCP 的時間，也就是跟 Loading、載入相關。

Google 官方說法：「從使用者要求網址時開始，轉譯可視區域中最大可見內容元素所需的時間。

最大元素通常是圖片或影片，也可能是區塊層級大型文字元素。這項指標的重要性在於可以看出訪客多快能看到該網址實際載入。」

LCP 標準

LCP 標準：2.5 秒以下為良好，4 秒以下需要改善，4 秒以上不良。

LCP 優化方法

更換成處理更快的伺服器主機
使用網頁快取
刪除不必要的 JavaScript
優化 JavaScript 與 CSS
預先載入重要資源，例如字體等
改善圖片檔案大小

詳細內容可以參考 Google 提供的更多建議。關於更多調整方式，可以參考 Google 官方的《優化 Largest Contentful Paint 最大內容繪製》。

工商時間

如果你想要更系統化、更輕鬆的學好 SEO，推薦你參考我與知識衛星合作的 SEO 線上課程《SEO 排名攻略學：從產業分析到落地實戰，創造翻倍流量》。

這是我的 SEO 集大成之作，讓你從入門到精通，附贈實戰模板跟檢核表，讓你真正學好 SEO。

CLS (Cumulative Layout Shift)

當你玩遊戲時，遊戲畫面突然不停的跳動或移動，敵人也在不正常的移動，讓你沒辦法正確控制角色或看清楚畫面，使你很難繼續遊戲，這樣體驗太糟糕了。

回到網頁的使用情境上，CLS 叫做 Cumulative Layout Shift，中文叫做累計版面配置位移，也就是如果有不正常的元素位移，都會影響到 CLS 分數。

Google 官方說法：「CLS 能針對使用者開啟網頁期間，加總計算每一次非預期版面配置位移的評分。

分數評分範圍為 0 到任何正數，其中 0 表示沒有任何位移，而數字越大表示網頁上發生的位移越多。

這項指標的重要性在於，如果網頁元素在使用者嘗試與網頁互動時移動了位置，會對使用者體驗造成負面影響。如果你找不到評分過高的原因，請嘗試與網頁互動，就能瞭解獲得該評分結果的原因。」

CLS 標準

CLS 標準：位移 0.1 以下為良好，0.25 以下需要改善，超過 0.25 不良。

CLS 優化方法

指定圖片大小 (避免無尺寸的圖片)
嵌入的內容設定尺寸 (避免無尺寸的 iframe)
預留廣告或其他動態元素的空間 (避免動態加入的內容)
使用第三方字型，因其載入的時間，有可能會影響 CLS，若其他項目調整後，仍未改善，亦可參考調整此項

關於更多調整方式，可以參考 Google 官方的《優化 Cumulative Layout Shift 累積佈局偏移》。

FID (First Input Delay)

當你試著控制遊戲角色移動或跳躍時，遊戲沒有馬上回應你的操作。

也就是說，你按下了鍵盤或控制器的按鈕，但角色等了一下才開始動作，這段時間就是 FID 時間；如果 FID 時間太長，這種 Lag 的感覺就會很難受。

回到網頁使用情境上，如果今天按下某個按鈕，但卻過了一小段時間才有動作，如果這個等待時間太長，就代表 FID 時間太長了，中文意思是首次輸入延遲。

在 2024 年 FID 指標會被 INP 指標取代，但在之前 FID 仍然是重要指標，因此在這裡我還是會介紹。

Google 官方說法：「自使用者首次與網頁互動起算 (例如點選連結、輕觸按鈕等)，到瀏覽器回應該互動所需的時間。這項測量作業是針對使用者首次點選的互動式元素進行。

對於需要使用者主動操作的網頁來說，這項指標非常重要，因為網頁要經過這段延遲時間才會變為互動式網頁。」

FID 標準

FID 標準：100 毫秒以下為良好，300 毫秒以下需要改善，超過 300 毫秒不良。

FID 優化方法

分割長任務
優化 JavaScript
使用 WebWorker
減少 JavaScript 執行時間

關於更多調整方式，可以參考 Google 官方的《優化 First Input Delay 首次輸入延遲》。

INP (Interaction to Next Paint)

想像你在遊戲中完成了一個任務，然後馬上想進入下一個任務或場景。但是，當你試著進入下一個場景時，遊戲讓你等了很久才開始。

這段等待的時間，你急著想玩下一關，但遊戲卻讓你等待、無法進行互動的時間，這就是 INP 的概念。

INP 的概念與 FID 很接近，而 Google 認為 FID 有些缺陷，因此推出了涵蓋面向更完整的 INP，會在 2024 年 3 月取代 FID。

在網頁使用中，點擊、按鍵行為會觸發網頁，Google 會將過程中最長的互動時間作為 INP，中文暫譯下次繪製的互動。

「最長的互動時間」這是與 FID 是最大的不同，因為 FID 只計算「首次」互動時間，有可能首次好，但後面的互動狀況不好，而 INP 就不會有這個問題，會更完整的評估使用者跟網頁互動的狀況是否有過分的延遲。

Google 官方：「INP 是一個用來評估網頁對於用戶互動整體反應速度的指標。它觀察網頁對於所有點擊、觸摸和鍵盤互動所需的反應時間，這些互動都是在用戶訪問該頁面期間發生的。」

INP 標準

INP 標準：200 毫秒以下為良好，500 毫秒以下需要改善，超過 500 毫秒不良。

INP 優化方法

分割長任務
減少頁面加載時間
壓縮圖片尺寸
壓縮 JavaScript 文件的大小
延遲加載較不重要的 JavaScript

關於更多調整方式，可以參考 Google 官方的《優化 Interaction to Next Paint》。

INP 與 FID 比較

FID 曾是核心指標之一，但自 2024 年 3 月起，INP 正式取代 FID，成為新的穩定指標。

Google 為何改用 INP 取代 FID？兩者有什麼差別，請參考這篇文章《INP、FID 介紹：Google 為何改用 INP 取代 FID？》。

怎麼檢視網站體驗核心指標狀態

以下兩個最實用的方法，可以幫助你檢視網站體驗核心指標狀態。

PageSpeed Insights

將網址放到 PageSpeed Insights，就會跑出這些指標的健康狀態跟建議調整方式。

Google Search Console

點開 Google Search Console 的「體驗＞網站使用體驗核心指標」，裡面會列出指標的健康狀態，以及分別是哪些網址有狀況，推薦使用此功能瀏覽整個網站的健康狀態。

關於 Google Search Console 的討論，可以參考《Google Search Console 教學：GSC 介紹以及常用功能講解》。

網站體驗核心指標的綜合整理表

各指標的標準如下表所示，盡可能要達到中間分數。

	良好	需要改善	不良
LCP	2.5秒以下	4秒以下	超過4秒
FID	100毫秒以下	300毫秒以下	超過300毫秒
CLS	0.1以下	0.25以下	超過0.25
INP	200毫秒以下	500毫秒以下	超過500毫秒

工商時間

如果你想要更系統化、更輕鬆的學好 SEO，推薦你參考我與知識衛星合作的 SEO 線上課程《SEO 排名攻略學：從產業分析到落地實戰，創造翻倍流量》。

這是我的 SEO 集大成之作，讓你從入門到精通，附贈實戰模板跟檢核表，讓你真正學好 SEO。

網站使用體驗核心指標（CWV）：LCP、FID、CLS、INP 白話文介紹