Skip to content

Core Web Vitals 是什麼?LCP、INP、CLS 三大指標總覽

Core Web Vitals:LCP、INP、CLS 三大指標

Core Web Vitals(網站體驗核心指標)是 Google 挑出來量化網頁使用者體驗的三項指標。它們刻意只有三個,各自對應使用者最有感的三個問題:

使用者的疑問對應指標
「主要內容什麼時候看得到?」LCP 最大內容繪製
「我點了為什麼沒反應?」INP 互動到下次繪製
「畫面怎麼一直跳?」CLS 累積版位偏移

這三項與 CSS 效能優化 談的檔案大小不同,它們量的不是資源多大,而是 使用者實際感受到的延遲與干擾

三個指標與門檻

指標量什麼良好待改善不佳
LCP最大內容元素繪製完成的時間≤ 2.5 秒2.5-4.0 秒> 4.0 秒
INP從互動到下次繪製的延遲≤ 200 毫秒200-500 毫秒> 500 毫秒
CLS非預期版面位移的累積量≤ 0.10.1-0.25> 0.25

三項都要落在「良好」,這一頁才算通過。任一項不佳,整頁就算不通過,不會互相抵銷。

第 75 百分位是什麼意思

指標不是量一次就算,而是收集真實使用者的造訪紀錄,取 第 75 百分位 的值。

為什麼不用平均值

假設 100 次造訪中,20 次在高階裝置上 1 秒完成、80 次在中階手機上要 3.5 秒。平均值大約 3 秒,看起來只是「待改善」;但事實是八成的人都在 3.5 秒以上,屬於「不佳」。

取第 75 百分位表示 四分之三的造訪都達到這個水準以上,既不被少數極快的裝置美化,也不被極端值綁死。

另外要注意的是,行動裝置與桌機 分開計算。桌機通常輕鬆過關,行動裝置才是真正的戰場。

在排名中的權重

不要高估它

Core Web Vitals 是排名訊號之一,但權重明顯低於內容相關性。官方一貫的說法是:內容品質優先,體驗指標在兩個結果相關性接近時才成為區分依據。

一篇內容不相關的頁面,速度再快也不會贏過一篇切題但稍慢的頁面。

真正值得投入的理由不在排名,而在轉換:載入慢、版面跳、點了沒反應,使用者會直接離開。這部分的損失遠比排名差幾名明顯。

優化順序建議

三項的修正成本差很多,照這個順序做最有效率:

順序指標為什麼先做典型手法
1CLS成本最低,改動明確替圖片與廣告版位補上寬高、字型加 size-adjust
2LCP影響第一印象最大首屏圖片改 fetchpriority="high"、不要延遲載入
3INP常需要調整架構切分長任務、減少水合成本

CLS 尤其值得先做:多數網站的 CLS 問題只是 圖片沒標寬高 ,補上之後分數立刻改善,而且不會影響其他部分。

這一組還有這些主題

主題說明
最大內容繪製 LCPLCP 元素怎麼判定、四段時間拆解與實作手法
互動到下次繪製 INP長任務切分、輸入延遲與呈現延遲的差別
累積版位偏移 CLS版面跳動的六種成因與逐一修法
伺服器回應 TTFB 與 FCPTTFB 的組成、CDN 與快取標頭的影響
資源提示 preload 與 preconnect四種 rel 提示的差異與濫用的後果
指標量測與 CrUX 數據實驗室數據與真實使用者數據的判讀

兩種數據不要搞混

同一個指標會有兩種來源,用途完全不同:

實驗室數據真實使用者數據
來源Lighthouse、PageSpeed Insights 的模擬CrUX 收集的實際造訪紀錄
特性條件固定、可重現反映真實裝置與網路,有延遲
用途除錯、找出是哪個資源拖慢評分依據、判斷有沒有真的改善
陷阱分數好不代表使用者體驗好資料要累積 28 天,改完不會馬上反映

用實驗室數據除錯,用真實數據驗收。 詳細判讀方式見 指標量測與 CrUX 數據

常見問題

Core Web Vitals 的權重有多大?

它是排名訊號之一,但權重明顯低於內容相關性。官方的說法是內容品質仍然優先,體驗指標在兩個結果相關性接近時才成為區分依據。實務上它更大的價值在於降低跳出率與提升轉換。

為什麼用第 75 百分位而不是平均值?

平均值會被少數極快的裝置拉低,掩蓋掉多數人的實際體驗。取第 75 百分位表示四分之三的造訪都達到這個水準以上,是一個對多數使用者負責的標準,也不會被極端值綁死。

INP 和 FID 有什麼不同?

FID 只量第一次互動的輸入延遲,而且不計算處理與繪製的時間,容易低估問題。INP 觀察整個造訪期間的所有互動,取接近最差的那一次,並涵蓋從輸入到畫面更新的完整過程,因此更貼近真實感受。INP 已在 2024 年正式取代 FID。

Lighthouse 的分數和 Search Console 的數據為什麼不一樣?

兩者的資料來源不同。Lighthouse 是在固定條件下模擬一次載入的實驗室數據;Search Console 呈現的是真實使用者在各種裝置與網路下的實際紀錄。實驗室數據用來除錯,真實數據才是評分依據。

三個指標該先修哪一個?

先修 CLS ,通常成本最低而且改動明確,多半只是替圖片與廣告版位補上尺寸。接著修 LCP ,它影響第一印象最大。INP 留到最後,因為它往往需要調整程式架構。

延伸閱讀

參考資料:web.dev:Core Web Vitals