與下一個顯示的內容互動 (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 中的 CrUX 進行操作 (以及其他 Core Web Vitals)，迅速取得 INP 的欄位資料。您至少可以取得網站 INP 的來源層級圖片，但在某些情況下，您也可以取得網址層級資料。

不過，雖然 CrUX 可以告訴您是否有問題，但無法告訴您問題的原因。RUM 解決方案可協助您進一步瞭解網頁、使用者或使用者互動發生回應速度問題的詳細情況。能夠將 INP 歸因於個別互動，不僅省時省力，也不必費心處理。

實驗室

在理想情況下，您應該在取得表示網頁互動速度緩慢的實地資料後，才開始在實驗室中進行測試。實驗室中重現有問題的互動行為時，實地資料可讓這項工作變得更簡單。

不過，您也可能沒有任何地點資料。雖然部分研究室工具「可以」評估 INP，但實驗室測試期間網頁的 INP 值將取決於評估期間發生的互動。使用者行為可能難以預測且變動，也就是說，研究室中的測試可能不會以實際欄位資料的方式呈現問題互動情形。此外，部分實驗室工具只會觀察網頁的載入情形，不會記錄任何互動，因此不會回報網頁的 INP。在這種情況下，總封鎖時間 (TBT) 可能是 INP 的合理替代指標，但本身並非 INP 的替代方案。

儘管使用研究室工具評估網頁的 INP 時設有限制，但仍有一些策略可在研究室中重現緩慢的互動。策略包括追蹤常見的使用者流程並測試互動情形，以及在頁面載入時與其互動 (此時主執行緒通常最繁忙)，以便在使用者體驗的關鍵部分找出互動速度緩慢的問題。

如何改善 INP

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

變更記錄

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

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

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

學以致用