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

傑瑞米.瓦格納 (Jeremy Wagner)

瀏覽器支援

  • 96
  • 96
  • x
  • x

資料來源

Chrome 使用資料顯示，使用者有 90% 的時間花在某個網頁載入「之後」，因此謹慎評估網頁生命週期「整個」版本的回應時間至關重要。這是 INP 指標的評估結果。

「良好回應」是指網頁能快速回應與網頁的互動。當網頁回應互動時，系統會提供視覺回饋，瀏覽器會在瀏覽器的下一個頁框顯示該回應。視覺回饋可讓您瞭解是否有項目確實已加入線上購物車、行動導覽選單是否已開啟、伺服器正在驗證登入表單的內容等等。

有些互動要花較長時間才會自然完成，但對於特別複雜的互動來說，建議您快速顯示一些初始視覺回饋，讓使用者知道有正在發生事情。下次繪製出下一個顏料的時間，是最早可行做到這一點的時間點。因此，INP 的用意並非評估互動的所有最終影響 (例如從其他非同步作業的網路擷取和 UI 更新)，而是封鎖「下一個」繪製時間。如果延遲視覺回饋，使用者可能會誤以為網頁沒有回應他們的操作。

INP 的目標是確保從使用者開始互動到繪製下一個畫面為止，盡可能縮短使用者進行的所有或大多數互動操作的時間。

在以下影片中的示例，右手可得知摺疊式裝置正在開啟的視覺回饋。這也能展示使用者認為體驗故障的原因，導致多次收到回覆。

回應速度過慢與良好回應示例。左邊的工作會封鎖摺疊元素，這會導致使用者多次點選，因而認為體驗中斷。當主要執行緒連上網路時，就會處理延遲輸入，導致意外開啟和關閉。

本文將說明 INP 的運作方式、評估方式，並提供改善方式。

什麼是 INP？

INP 是一種指標，可評估使用者造訪網頁期間發生的所有點擊、輕觸和鍵盤互動次數，藉此評估網頁回應使用者互動的整體效能。最終 INP 值是指觀測到的最長互動時間，忽略離群值。

INP 計算方式說明

如上所述，INP 的計算方式是觀察與網頁進行的所有互動。對於大多數與最延遲的互動，系統會將此情況回報為 INP。不過，如果網頁有大量互動，隨機出現問題可能會導致回應式網站過度頻繁互動。互動次數越多，這種情況就越高。為了反觀並更有效地衡量這類網頁的實際回應速度，我們針對每 50 次互動忽略了一次最高的互動。絕大多數的網頁體驗都沒有超過 50 次互動，因此會回報不良互動。然後照常回報所有網頁瀏覽量的第 75 個百分位數，進一步移除離群值，為絕大多數使用者提供或更優質的體驗。

互動是一組在相同的邏輯使用者手勢中觸發的事件處理常式。舉例來說，觸控螢幕裝置上的「輕觸」互動包含多個事件，例如 pointerup、pointerdown 和 click。互動次數可帶來 JavaScript、CSS、內建瀏覽器控制項 (例如表單元素)，或兩者結合。

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

何謂良好的 INP 分數？

很難在回應時間指標中將「良好」或「不佳」等標籤固定。一方面，您更想鼓勵學生實踐，優先提升回應速度的開發方法。另一方面，您也必須考量到使用者在設計應用程式時，使用的裝置能力有很大的差異。

為確保你提供良好的使用者體驗，評估的門檻是欄位中記錄的網頁載入量的第 75 個百分位數，在行動裝置和電腦裝置上區隔如下：

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

互動是什麼？

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

其中的主要驅動因素通常是 JavaScript，但瀏覽器卻是透過「非」JavaScript 技術的控制項 (例如核取方塊、圓形按鈕和 CSS 技術控制項) 實現互動。

截至 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 更能準確反映整體回應速度。

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

網頁有可能不會傳回 INP 值。有幾個原因可能導致這種情況：

  • 網頁已載入，但使用者從未點選、輕觸或按下鍵盤上的按鍵。
  • 網頁已載入，但使用者利用不涉及點擊、輕觸或鍵盤的手勢與網頁互動。舉例來說，即使捲動元素或將滑鼠遊標懸停在元素上，系統也不會考量 INP 的計算方式。
  • 搜尋檢索器 (例如搜尋檢索器) 或未以指令碼編寫與網頁互動的無頭瀏覽器 (例如搜尋檢索器) 正在存取網頁。

如何評估 INP

可以透過各種工具在實際環境和研究室中評估 INP。

在領域

最理想的 INP 最佳化歷程應從現場資料開始。最理想的狀況是，即時使用者監控 (RUM) 中的欄位資料不僅提供網頁的 INP 值，還會顯示內容相關資料，說明對 INP 值本身負責的特定互動、無論互動是發生在頁面載入期間還是之後，互動類型 (點擊、按鍵或輕觸) 和其他重要資訊。

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

不過，CrUX 可告知您「有」大層面的問題，但通常無法提供足夠的細節來深入瞭解問題所在。RUM 解決方案可協助您深入瞭解互動速度緩慢的網頁、使用者或使用者互動，能將 INP 歸因於個別互動，可避免不必要的麻煩和浪費。

實驗室

如果有實際資料顯示互動速度緩慢，不妨在研究室中開始測試。在沒有現場資料的情況下，在研究室中可以重現一些緩慢的互動過程。這類策略包括遵循常見的使用者流程和測試互動，以及在載入期間與網頁互動 (主要執行緒最忙碌時)，以便顯示使用者在這類重要體驗中的緩慢互動。

如何改善 INP

INP 是最佳化 INP 的指南，可引導您找出領域中緩慢的互動，以及使用研究室資料深入研究並以各種方式最佳化。

變更記錄

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

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

如果您對這些指標有任何意見，可以前往 web-vitals-feedback Google 群組提出。