Core Web Vitals 中的 INP(Interaction to Next Paint) 是什麼？

作為一名網站開發者或前端工程師，絕大多數會以 Google 訂定的 Core Web Vitals，作為評估網站效能的參考標準。

Core Web Vitals 包括了眾多指標，例如：LCP、FID、CLS 等。而 Google 會定期評估這些指標的存在與否，從 2024 年 3 月起，INP 取代了 FID，成為評估網站互動性能的新穩定指標。

在本文中，我們將深入探討 INP(Interaction to Next Paint) 的定義、其重要性。

了解 INP (Interaction to Next Paint)

INP 全名為 Interaction to Next Paint，中文直譯為「與下一個顯示內容的互動」。它是 Core Web Vitals 中一個全新的指標，專門用來衡量頁面對使用者「互動」的響應速度。

INP 的定義

INP 測量的是：從使用者與頁面進行互動(點擊、鍵盤輸入等)到瀏覽器對該互動作出響應並更新畫面所需的時間。舉例來說，當使用者點擊一個按鈕，INP 就會記錄從點擊到按鈕狀態改變並重新繪製的時間。

INP 會在整個生命週期中，觀察使用者在網頁點選、輕觸和使用鍵盤進行的所有互動，並回報最長持續時間(忽略離群值)。

在 Google 官方文件 中，有清楚定義 INP 會計算的互動類型，包含以下三項：

• 滑鼠點擊事件
• 輕觸有觸控螢幕的裝置
• 在實體鍵盤或螢幕鍵盤上按下按鍵

在這邊互動(Interaction) 的定義有兩點要特別注意：

1. 滑鼠懸停(hover) 與捲動(scrolling)的互動並不包括在 INP 中

2. 互動(Interaction) 的生命週期是由一系列的事件組成。使用者的某個行為，可以被視為一連串的事件。舉例來說：當使用者觸控螢幕時，包含的事件有：pointerup 和 pointerdown 事件，互動的延遲時間是由一組促成互動的事件處理常式所構成的最長「持續時間」，從使用者開始互動起，到下一個影格出現視覺回饋的那一刻起。

   INP 會是在使用者離開網頁時計算，得出的一個值，針對大多數網站，系統會將延遲時間最差的互動回報為 INP（可參考下圖）。

INP 分數

如果 INP 偏低(200ms 以下)，表示網頁能持續快速回應絕大多數的使用者互動。

• INP 等於或小於 200 ms 表示頁面具有良好的回應能力
• INP 在 200 ms 到 500 ms 之間的頁面的反應能力需要改進
• INP 大於 500 ms 表示頁面回應能力較差

INP 對使用者體驗的影響

INP 的目標是縮短從使用者開始互動到繪製下一個畫面為止的響應時間。良好的 INP 意味著網頁能夠快速回應使用者的互動操作; 相反的，如果 INP 不佳，使用者會感受到體驗低落。想像一下，當我們在使用網站時點擊按鈕，但畫面沒有即時的反應回饋，這種情況下，我們通常會認為網頁出現了問題。

INP 與 FID(First Input Delay, 首次輸入延遲時間) 有什麼不同？

開頭有提到，INP 在 2024 年 3 月取代了 FID 成為 Core Web Vital 中的穩定衡量指標。這兩者都是屬於「回應指標」，但最大的不同為，FID 只會衡量「第一次」的互動的輸入延遲時間，但 FID 的問題會是，第一次交互不一定會是最慢的、也不一定會是最主要的的操作。因此，若以 FID 還衡量網頁「互動」的品質，並不能反應網頁整體的情況。而 INP 則是會衡量「所有」的頁面互動。因此 INP 跟 FID 相比，會更為全面和可靠。

如何測量 INP 的值？

可以透過 Google 的網站 PageSpeed Insights 來評估 INP 的數值，但只有符合 CrUX 的資格的網站，才會出現 INP 的分數（詳情可以參考這篇文章）; 或者我們也可以透過 Chrome DevTools 開發者工具直接分析，當事件發生時響應的時間（請參考下圖）。

此外，Google 也提供 web-vitals 的套件，可以讓開發者直接從真實用戶端中，獲取實際資料結果。

INP 三個階段

優化 INP 通常會先分析互動緩慢的原因，分析完之後再進行最佳化，而互動可分為三個階段：

1. 輸入延遲時間(input delay)：從使用者開始與網頁互動時起算，並在互動事件回呼（callback function）開始執行前
2. 事件處理時間(processing time)：執行事件回呼完成所花費的時間
3. 顯示延遲時間的時間(presentation delay)：瀏覽器顯示包含互動結果顯示的下一偵所需的時間

這三個時間段加起來就會是整個互動時間，因此在分析緩慢問題時，建議會先了解是哪一個階段緩慢，而再針對不同情況去優化。（可參考下圖）

我們會在下一篇文章中，繼續討論優化 INP 的策略。

參考資料

• Interaction to Next Paint (INP)
• Optimize Interaction to Next Paint