Core Web Vital 中的 INP(Interaction to Next Paint) 是什麼?

2024年4月3日

💎 加入 E+ 成長計畫 與超過 300+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

作為一名網站開發者或前端工程師,絕大多數會以 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) 的生命週期是由一系列的事件組成。使用者的某個行為,可以被視為一連串的事件。舉例來說:當使用者觸控螢幕時,包含的事件有:pointeruppointerdown 事件,互動的延遲時間是由一組促成互動的事件處理常式所構成的最長「持續時間」,從使用者開始互動起,到下一個影格出現視覺回饋的那一刻起。

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

互動中持續時間最長的事件被視為該互動的延遲時間
互動中持續時間最長的事件被視為該互動的延遲時間
圖片來源:web.dev/articles/inp

INP 分數

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

  • INP 等於或小於 200 ms 表示頁面具有良好的回應能力
  • INP 在 200 ms 到 500 ms 之間的頁面的反應能力需要改進
  • INP 大於 500 ms 表示頁面回應能力較差
INP 分數
INP 分數
圖片來源:web.dev/articles/inp

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 開發者工具直接分析,當事件發生時響應的時間(請參考下圖)。

Chrome DevTools 開發者工具
Chrome DevTools 開發者工具
圖片來源:web.dev/articles/inp

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

INP 三個階段

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

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

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

INP 三階段
INP 三階段
圖片來源:web.dev/articles/inp

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


參考資料

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們