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

Chrome 使用資料顯示，使用者有 90% 的時間在載入網頁「之後」會花費更多時間，因此在網頁生命週期中謹慎評估回應速度相當重要。這就是 INP 指標評估的項目。

反應速度快表示網頁可迅速回應互動。網頁回應互動時，瀏覽器會在下一個顯示的畫面中提供視覺回饋。視覺回饋會告訴您，例如您新增至線上購物車的商品是否確實已加入、行動導覽選單是否已開啟、登入表單內容是否已通過伺服器驗證，等等。

有些互動自然會比其他互動耗時更久，但對於特別複雜的互動，請務必快速提供一些初步的視覺回饋，讓使用者知道發生了什麼事。瀏覽器繪製的下一個影格是最佳機會。

因此，INP 的意圖並非評估互動全部的最終效果 (例如網路擷取和其他非同步作業的 UI 更新)，而是評估下一個顯示作業遭到阻斷的時間。延遲顯示視覺回饋可能會讓使用者誤以為網頁反應速度不夠快，因此我們開發了 INP，協助開發人員評估這部分的使用者體驗。

在下方影片中，右側的示例會立即提供摺疊式面板開啟的視覺回饋。左側範例說明了回應速度不佳的情況，以及這會如何導致使用者體驗不佳。

本指南說明 INP 的運作方式、評估方式，並提供改善 INP 的資源。

什麼是 INP？

INP 是一種指標，用於評估網頁回應使用者互動的整體效能，方法是觀察使用者造訪網頁期間，網頁對於所有點擊、輕觸和鍵盤互動的延遲時間。最終 INP 值是指觀測到的最長互動時間，忽略離群值。

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

互動延遲時間是指從使用者開始互動到瀏覽器下次能夠繪製影格之間，驅動互動的一組事件處理常式單一最長持續時間。

什麼是良好的 INP 分數？

針對反應指標，固定「良好」或「不佳」等標籤並不容易。一方面，您希望鼓勵開發人員採取優先考量回應速度的開發做法。另一方面，您必須考量到使用者使用的裝置功能差異甚大，因此必須設定可行的開發預期值。

為確保您提供良好的回應式使用者體驗，建議您在欄位中記錄的網頁載入時間，以第 75 個百分位數做為評估門檻，並區分行動裝置和電腦裝置：

• 如果 INP 低於或等於 200 毫秒，表示網頁反應速度良好。
• 如果 INP 超過 200 毫秒，或低於或等於 500 毫秒，表示網頁的回應速度需要改善。
• 如果 INP 超過 500 毫秒，表示網頁反應速度緩慢。

互動內容

互動功能的主要驅動力通常是 JavaScript，但瀏覽器確實會透過不由 JavaScript 支援的控制項提供互動功能，例如核取方塊、圓形按鈕，以及由 CSS 支援的控制項。

為了計算 INP，系統只會監控下列互動類型：

• 使用滑鼠點選。
• 輕觸搭載觸控螢幕的裝置。
• 按下實體鍵盤或螢幕小鍵盤上的按鍵。

互動行為發生在主要文件或內嵌在文件的 iframe 中，例如點擊內嵌影片的次數。使用者不會知道 iframe 中是否有內容，因此需要在 iframe 中使用 INP，才能評估頂層網頁的使用者體驗。由於 JavaScript Web API 無法存取 iframe 的內容，因此這可能顯示為 CrUX 和 RUM 之間的差異

互動可能包含多個事件。舉例來說，按鍵動作包含 keydown、keypress 和 keyup 事件。輕觸互動包含 pointerup 和 pointerdown 事件。在互動中，時間最長的事件會影響互動的總延遲時間。

系統會在使用者離開網頁時計算網頁的 INP。顯示的結果是單一值，用來代表網頁在整個生命週期的回應速度。INP 低代表網頁回應使用者輸入時的反應品質良好。

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

INP 是 首次輸入延遲時間 (FID) 的後續指標。雖然兩者都是回應速度指標，但 FID 只會評估網頁上首次互動的輸入延遲時間。INP 會觀察網頁上的所有互動，從輸入延遲時間開始，到執行事件處理常式所需的時間，最後到瀏覽器繪製下一個影格為止，藉此改善 FID。

這些差異意味著 INP 和 FID 都是不同類型的回應度指標。FID 是用來評估網頁對使用者的第一印象的載入回應時間指標，而 INP 則是整體回應時間的指標，不論網頁互動發生在何時，都適用於評估整體回應時間。

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

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

• 頁面已載入，但使用者從未點按、輕觸或按下鍵盤上的按鍵。
• 頁面已載入，但使用者使用未納入評估的動作與頁面互動，例如捲動或將游標懸停在元素上。
• 網頁遭到機器人存取，例如搜尋檢索器或無頭瀏覽器，但這些機器人並未設定指令碼，無法與網頁互動。

如何評估 INP

INP 可在實地和實驗室中進行評估，以模擬真實的使用者互動情形。

實地

在理想情況下，您應先從實地資料著手，才能有效提升 INP。最理想的情況是，即時使用者監控 (RUM) 中的欄位資料不僅提供網頁的 INP 值，還會列出哪些特定互動對 INP 值本身負責、互動期間或之後的互動、互動類型 (點擊、按鍵或輕觸)，以及其他有利於您識別互動方面影響回應的寶貴時機。

如果您的網站符合 Chrome 使用者體驗報告 (CrUX) 的收錄資格，您就能透過 PageSpeed Insights 中的 CrUX (以及其他 Core Web Vitals) 快速取得 INP 的現場資料。您至少可以取得網站 INP 的來源層級圖片，在某些情況下，您也可以取得網址層級資料。

不過，雖然 CrUX 能告訴您是否「是否」發生問題，但無法告訴您問題成因。RUM 解決方案可協助您進一步瞭解網頁、使用者或使用者互動發生回應速度問題的詳細情況。能夠將 INP 歸因於個別互動，可避免您在沒有根據的情況下進行猜測，並浪費心力。

實驗室

理想情況下，一旦有能指出網頁互動速度緩慢的基礎資料，建議您先在研究室中進行測試。實驗室中重現有問題的互動行為時，實地資料可讓您更輕鬆地完成這項工作。

不過，您完全可能沒有欄位資料。雖然 INP 可以在某些實驗室工具中進行評估，但實驗室測試期間網頁的 INP 值結果，取決於測量期間執行的互動。使用者行為難以預測且變化多端，因此實驗室測試可能無法像實地資料一樣，找出有問題的互動。此外，部分實驗室工具只會觀察網頁的載入情形，不會記錄任何互動，因此不會回報網頁的 INP。在這種情況下，Total Blocking Time (TBT) 或許是 INP 的合理替代指標，但不能取代 INP 本身和其本身。

雖然實驗室工具在評估網頁的 INP 時有一定限制，但您還是可以透過實驗室重現互動速度緩慢的情況。這些策略包括追蹤常見的使用者流程，並在過程中測試各種互動，並在載入網頁時 (主執行緒通常最忙碌時) 與網頁互動，以便找出使用者體驗的關鍵階段中緩慢的互動。

如何改善 INP

我們彙整了最佳化 INP 指南，引導您逐步找出實際發生中緩慢互動的情況，並根據研究室資料來找出原因並加以改善。

變更記錄

有時，我們會在用於評估指標的 API 中發現錯誤，有時也會在指標定義中發現錯誤。因此，有時需要進行變更，這些變更可能會在內部報表和資訊主頁中顯示為改善或迴歸。

為協助您管理這項情況，我們會在這個變更記錄中顯示這些指標的導入方式或定義所做的所有變更。

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

學以致用