首頁 » SEO 優化行銷 » 網站體驗核心指標 (Core Web Vitals):INP 指標是什麼?
INP 指標是什麼?

網站體驗核心指標 (Core Web Vitals):INP 指標是什麼?

為了更準確的評估使用者在網頁上的互動情形,2023年5月時,Google 宣布將於 2024年3月對核心體驗指標 (Core Web Vitals) 進行更新,其中一項重要變更,就是將現有的 FID (First Input Delay) 指標改為 INP (Interaction to Next Paint) 指標。同時這一項變動,也會同步更新於 Google Search Console 核心指標頁面中顯示。

到底 FID 與 INP 兩者間的差異是如何?為何 INP 能夠更準確評估使用者在網頁上的狀況?今天就讓將能帶大家一起來了解,這個 2022年新竄起的核心指標吧!

什麼是 INP 指標?

INP 這個指標會觀察使用者在網頁造訪期間發生的點擊、輕觸和鍵盤互動所經歷的延遲時間,評估網頁回應使用者互動的整體效能。最終 INP 值是觀測到最長的互動時間,忽略離群值。 ______ Google

INP 指標是用來衡量網頁在使用者互動後,下一次畫面更新的時間。這個數值越低,代表網頁回應的速度越快,使用者體驗越好。

過去,Google 使用 FID 指標來衡量網頁的互動性,而 FID 指標只測量使用者首次與網頁互動時的延遲時間。

根據 Google Chrome 瀏覽器的資料,使用者在網頁上花費 90% 的時間都是在頁面讀取完成之後。因此,評估網頁在使用者互動後的回應速度非常重要,而INP 指標就是用來衡量這個回應速度的。

INP 指標是以使用者在網頁上的所有互動為基準,計算出整體的回應速度,具備良好回應速度的網站,應在網頁與使用者互動後,能夠立即提供視覺回饋,例如:當使用者點擊按鈕時,按鈕應該立即變色、當使用者輸入資料時,網頁應該立即更新顯示內容。

INP 指標會根據下一個畫面更新的時間來計算的,如果網頁在使用者互動後立即更新畫面,使用者可能會覺得網頁沒有反應,會按下「立即更新」,這樣的舉動也就告訴Google 使用者在該頁面體驗不佳。

INP 與 FID 有何不同?

INP FID
數值計算基準考量所有網頁互動僅計算初始互動的輸入延遲時間
評估要點更全面地評估整個互動過程中的回應速度重視的是網頁載入後初次互動的使用者體驗

簡而言之, INP 指標比 FID 指標能更準確的整體回應速度評估,更貼近使用者在網頁上的實際體驗。

INP 指標如何計算

INP(Input Timing)是一項衡量網頁互動反應速度的指標,它收集網頁上的所有互動行為並為每個互動事件分配一個分數。

當用戶離開頁面時,系統開始計算 INP值,較低的 INP值表示頁面的互動響應速度較快,用戶體驗較佳。

  • 對於互動較少的頁面,使用最差的互動時間(即第100百分位數)。
  • 對於互動較多的頁面,選擇互動時間分佈在百分位99或98的數值作為INP的結果。

根據目前的公開文檔,INP 的計算僅考慮三種互動方式:使用滑鼠進行點擊、觸碰觸控螢幕以、按下鍵盤上的任意鍵。

值得注意的是,滑鼠的停留(hover)和頁面的滾動(scrolling)不會納入INP的計算,但使用鍵盤進行頁面滾動可能會觸發INP的測量。

INP 的計算從用戶互動開始,包含後續的處理延遲和顯示延遲,直到下一個畫面被繪製為止。有些互動事件因為本身就比較複雜,需要較長的處理時間,例如從網路獲取遠端資料或進行複雜的瀏覽器內部資料處理,當遇到這種情況時,只要在處理完成前提供即時的視覺反饋給用戶,這些處理時間就不會被計入INP值中。

合格的 INP 指標 

合格的 INP 指標 

如上圖所示,Google 對 INP 指標的基準點,是200毫秒、500毫秒,各項指標還會以綠、橘、紅,做為分界:

  • INP 低於或等於 200 毫秒:綠色(良好)
  • INP 超過 200 毫秒,低於 500 毫秒:橘色(需要改善)
  • INP 超過 500 毫秒:紅色(不佳)

如何改善 INP指標?

先找出造成 INP 不佳的原因

優化網頁的前,需要先了解網頁哪裡需要優化,大家可以使用以下幾個工具,或者手動來找尋 INP 指標不佳的頁面,再進行問題修正。

  1. PageSpeed Insights
  2. Chrome User Experience Report
  3. Web Vital JavaScript Library

優化網頁互動

INP的計算,主軸都圍繞著「互動」,而互動可分為三個階段,就是我們可以進行優化調整的地方:

  1. 輸入延遲 (Input Delay)

網頁在使用者操作後,需要一些時間才能做出反應,這個時間就是輸入延遲時間。輸入延遲時間越長,使用者體驗就越差。

輸入延遲時間可能會受到多種因素的影響,包括:

  • 網頁上的其他活動
  • 指令碼的載入、解析和編譯
  • 資料的擷取和處理
  • 計時器函式的執行
  • 快速連續的互動

為了改善使用者體驗,應儘量縮短輸入延遲時間。

  1. 改善回呼(Callback )效能

要改善事件回呼的效能,最好的方法就是減少回呼中需要執行的程式碼量,但是,互動的邏輯有時很複雜,可能無法大幅減少程式碼量。

在這種情況下,可以嘗試將回呼中的程式碼分割成多個部分。這樣可以避免回呼佔用主執行緒過長的時間,讓其他互動可以更快地執行。

setTimeout 函式可以用來分割程式碼,它也會在新工作中執行指定的回呼程式碼,您可以直接使用 setTimeout 函式,也可以將其封裝成獨立的函式,以便更方便地使用。

  1. 減少降低顯示延遲  (Presentation Delay)

降低顯示延遲的方法有幾個,各項詳細的優化技巧,請參考 改善與下一個顯示的內容的互動方式

  • 最小化 DOM 大小
  • 使用 content-visibility 延後轉譯畫面外元素
  • 使用 JavaScript 轉譯 HTML 時請降低效能成本
什麼是-INP指標的網頁互動

結語

希望透過本文,各位讀者能更了解 INP 指標的意義、計算方式以及對網站優化和 SEO 的影響,在 2024年3月過後,這項指標將會對「提升網站的使用體驗」和「關鍵字排名」有更大影響。

優化 INP 指標是一個疊代程序,需要仔細找出欲優化的頁面、並嘗試不同方法測試,可能優化速度緩慢,需要很多時間與精力,但總的來說,面對未來的 SEO 環境,是非常值得投入的項目。

延伸閱讀:

讓「將能」成為您的商業夥伴

用搜尋幫助企業成功

Scroll to Top

謝謝您訂閱我們的電子報,我們會把簡報寄送至您的信箱,若多日未收到,請到促銷信件查看!