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

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

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

有些互動時間比較自然，但對於互動而言更是如此，請務必快速呈現一些初始視覺回饋，讓使用者知道發生了什麼事。瀏覽器會繪製的下一個頁框，是最早完成此操作的機會。

因此，INP 的用意不是測量互動的「所有」最終影響 (例如從其他非同步作業的網路擷取和 UI 更新)，而是封鎖「下一個」繪製的時間。因為延遲視覺回饋會讓使用者誤以為網頁沒有回應速度太快，而 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 (以及其他網站體驗核心指標)，快速取得 INP 的欄位資料。至少您可以取得網站 INP 的來源層級圖片，但在某些情況下，您也可以取得網址層級的資料。

不過，CrUX 可指出是否「出現」問題，但無法告訴您造成問題的原因。RUM 解決方案可協助您進一步瞭解發生回應問題的網頁、使用者或使用者互動。能將 INP 歸因於個別互動，可避免不必要的麻煩和浪費。

實驗室

取得可看出網頁互動速度緩慢的欄位資料後，建議您開始在研究室中進行測試。如果您沒有現場資料，可以運用一些策略來重現研究室中緩慢的互動。策略包括遵循常見的使用者流程和測試互動，並在網頁載入期間與網頁互動 (主要執行緒通常最忙碌)，以便識別使用者在操作體驗的重要部分，以及緩慢的互動行為。

如何改善 INP

INP 是最佳化 INP 的指南，可引導您找出領域中緩慢的互動，以及運用研究室資料找出原因並加以改善。

變更記錄

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

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

如要針對這些指標提供意見，請前往 web-vitals-feedback Google 群組。

測試您的瞭解程度