與下一個顯示的內容互動 (INP)

Jeremy Wagner

瀏覽器支援

  • 96
  • 96
  • x
  • x

資料來源

與下一個顯示的內容 (INP) 互動 (INP) 是一項穩定的 Core Web Vitals 指標，可使用 Event Timing API 中的資料評估網頁回應速度。INP 會在整個生命週期中，觀察訪客在網頁點選、輕觸和使用鍵盤進行的所有互動，並回報最長持續時間 (忽略離群值)。如果 INP 偏低，表示網頁能持續快速回應絕大多數的使用者互動。

良好的回應速度表示網頁能快速回應互動。如果網頁回應互動，瀏覽器會在下一個轉譯的影格顯示視覺回饋，表示互動成功。例如，此工具可提供有關以下內容的意見回饋：

  • 系統是否確實將您新增至線上購物車的商品納入購物車。
  • 是否已開啟行動裝置導覽選單。
  • 伺服器是否驗證登入資訊的內容。

某些互動所需時間會比其他互動更久，但對於互動特別複雜的互動而言，建議您快速呈現一些初始視覺回饋，藉此告知使用者正在發生某些事情。距離下次繪製 是最早可行的時間點因此，INP 的意圖是評估互動的所有最終影響 (例如從其他非同步作業的網路擷取和 UI 更新)，而是封鎖「下一個」繪製時間。延遲視覺回饋會讓使用者認為網頁沒有回應他們的動作。

INP 的目標是盡量縮短從使用者開始互動到繪製下一個畫面為止，但對於使用者啟動的所有或大多數互動操作所需的時間。

回應速度不佳與良好回應示例。左側的長時間工作會封鎖摺疊元素。這會導致使用者多次點選，因而認為體驗中斷。當主要執行緒連上網路時，就會處理延遲輸入，導致意外開啟和關閉。右側的回應式頁面會快速開啟摺疊元素，不會有任何事件。
INP 計算方式說明

INP 的計算方式是觀察與網頁進行的所有互動。針對大多數網站，系統會將延遲時間最差的互動回報為 INP。不過，如果網頁有大量互動，隨機出現小歇問題，或許會導致其他回應式網站的互動速度異常高。互動次數越多，這種情況就越高。為抵禦這個情況，並改善對這些類型網頁的實際回應速度，我們會忽略每 50 次互動中的一次最高互動。絕大多數的網頁體驗都沒有超過 50 次互動，因此瀏覽器幾乎一律會回報不良互動。然後照常回報所有網頁瀏覽次數的第 75 個百分位數，進一步移除離群值，讓值更能代表一般使用者體驗。

互動是指在同一個邏輯使用者手勢期間觸發的一組事件處理常式。舉例來說，觸控螢幕裝置上的「輕觸」互動包含多個事件，例如 pointerup、pointerdown 和 click。如要促成互動，您可以採用 JavaScript、CSS、內建瀏覽器控制項 (例如表單元素)，或是綜合這些控制項。

互動的延遲時間是由一組促成互動的事件處理常式所構成的最長「持續時間」，從使用者開始互動起，到下一個影格出現視覺回饋的那一刻起。

重點提示：如要進一步瞭解 INP 的評估方式，請參閱「互動是什麼？」一節。

何謂良好的 INP 分數？

為確保使用者能提供良好的回應體驗，要評估的良好門檻是記錄的第 75 個百分位數，在行動裝置和電腦裝置上區隔出去：

  • 如果 INP 等於或小於 200 毫秒，表示您的網頁回應速度良好。
  • 如果 INP 介於 200 毫秒到 500 毫秒之間，表示網頁的回應時間需要改善。
  • 如果 INP 超過 500 毫秒，表示您的網頁回應速度較慢。
良好的 INP 值介於 200 毫秒或更短的時間內，不佳的值必須超過 500 毫秒，而且需要改善。
良好的 INP 值不超過 200 毫秒。不佳的值會大於 500 毫秒。

互動是什麼？

說明主要執行緒互動的圖表。使用者在封鎖工作執行期間輸入內容。輸入會延遲輸入，直到這些工作完成之後，指標向上、滑鼠向上和點擊事件處理常式才會執行，然後啟動轉譯和繪製工作，直到顯示下一個影格為止。
互動的生命週期，輸入延遲會直到事件處理常式開始執行為止，原因可能是主執行緒上長時間的工作等因素所致。接著，互動的事件處理常式會執行，並在下一個影格顯示前發生另一個延遲。

互動的主要驅動因素通常為 JavaScript，但瀏覽器卻可透過「非」JavaScript 技術的控制項 (例如核取方塊、圓形按鈕和由 CSS 技術提供的控制項) 提供互動功能。

就 INP 而言，系統僅觀察到下列互動類型：

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

重點：懸停和捲動不會考量 INP。不過，使用鍵盤捲動 (空格鍵、頁面向上、頁面向下等) 涉及按鍵動作，可觸發 INP「確實」測量的其他事件。任何產生的捲動都不會計入 INP 計算中。

互動會在主要文件或文件內嵌的 iframe 中發生，例如在嵌入的影片上點選播放。由於使用者不知道網頁的哪些部分位於 iframe 中，因此您必須評估 iframe 中的 INP，才能準確評估整個頁面的內容。不過，JavaScript Web API 無法存取 iframe 內容，也可能無法評估 iframe 中的 INP。這顯示出 CrUX 與 RUM 之間的差異。

互動可包含多個事件。舉例來說，按鍵動作包含 keydown、keypress 和 keyup 事件，輕觸互動則包含 pointerup 和 pointerdown 事件。互動期間持續時間最長的事件會被選為互動延遲時間。

描述更複雜的互動，其中包含兩項互動。第一個是 mousedown 事件，它會在滑鼠按鈕啟動之前產生影格，這會啟動更多工作，直到結果出現另一個影格為止。
使用者按下滑鼠按鈕並點擊時，瀏覽器會處理互動，並顯示視覺回饋框架。使用者放開滑鼠按鈕時，系統會先執行一系列事件處理常式，然後瀏覽器才能夠顯示其他影格。

INP 會在使用者離開網頁時計算，得出一個值，代表網頁在整個生命週期中的回應時間。 如果 INP 偏低，表示網頁可以根據使用者輸入內容提供穩定回應。

INP 與首次輸入延遲時間 (FID) 有何不同？

INP 是首次輸入延遲時間 (FID) 的後續指標。雖然兩種是回應指標，但 FID 只會測量網頁上「第一個」互動的輸入延遲時間。INP 會考量「所有」頁面互動，包括從輸入延遲到執行事件處理常式的所需時間，最後直到瀏覽器繪製下一個頁框為止，藉此改善 FID 的品質。

這些差異表示 INP 和 FID 是不同類型的回應指標。如果 FID 是用來評估使用者對於網頁首次曝光的載入回應指標，則無論網頁互動的生命週期何時發生，INP 都是較可靠的指標。

如果未回報 INP 值，該怎麼辦？

網頁有可能不會傳回 INP 值。這可能由許多因素造成，包括：

  • 網頁已載入，但使用者從未與網頁互動。
  • 已載入頁面，但使用者透過未測量的手勢與其互動，例如捲動頁面或將滑鼠遊標懸停在元素上。
  • 機器人 (例如搜尋檢索器或無頭瀏覽器) 存取網頁時，並未以指令碼編寫與網頁互動。

如何評估 INP

無論在實際領域還是研究室，您都可以使用各種工具測量 INP。

重點提示：評估網站 INP 的最佳方法，就是收集實際使用者的指標。如果您習慣仰賴研究室資料來評估效能，建議您閱讀「為什麼研究室和現場資料可以不一樣 (以及該怎麼做)」。

在領域

最理想的 INP 最佳化歷程始於現場資料。最理想的狀況是， Real User Monitoring (RUM) 中的欄位資料不僅能提供網頁的 INP 值，還能指出針對 INP 值本身負責的特定互動，無論互動是在頁面載入期間或之後發生，互動的類型 (點擊、按鍵或輕觸) 和其他重要資訊。

如果您的網站符合 Chrome 使用者體驗報告 (CrUX) 的納入資格，您就能透過 PageSpeed Insights 的 CrUX 快速取得 INP 欄位資料，以及其他網站體驗核心指標的資料。至少您可以取得網站 INP 的來源層級相片，但在某些情況下，您也可以取得網頁層級資料。

不過，CrUX 可以告訴您高層級「有」問題，但通常不夠詳盡，無法全盤瞭解問題所在。RUM 解決方案可協助您深入瞭解互動速度緩慢的網頁、使用者或使用者互動情形。能將 INP 歸因於個別互動，有助於免除猜測和浪費心力。

實驗室

如果取得足以顯示互動速度緩慢的欄位資料，不妨在研究室中開始測試。在沒有現場資料的情況下，在研究室中可重現緩慢互動的一些策略。策略包括遵循常見的使用者流程和測試互動，並在載入期間與網頁互動 (當主執行緒通常處於活躍狀態時)，以便揭露在使用者體驗的關鍵部分，導致互動緩慢的互動。

如何改善 INP

請參閱最佳化 INP 指南，瞭解如何找出現場緩慢的互動，以及如何使用研究室資料進行最佳化。

變更記錄

有時候，我們在測量指標的 API 中會發現錯誤，有時則在指標本身定義中發現錯誤。因此，有時確實需要進行變更，而這些變更可能會在內部報表和資訊主頁中顯示為改善或迴歸。

為協助您管理，這些指標的導入或定義的所有變更，都會顯示在這份變更記錄中。

如果您有這些指標的意見回饋，請透過 web-vitals-feedback Google 群組提出。