Interaction to Next Paint (INP)

Jeremy Wagner

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。在這種情況下，總封鎖時間 (TBT) 可能是 INP 的合理替代指標，但本身並非 INP 的替代方案。

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

如何改善 INP

我們提供一系列最佳化 INP 的指南，協助您瞭解如何在實務中找出互動速度緩慢的問題，並使用實驗室資料找出原因並加以改善。

變更記錄

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

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

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

學以致用