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

Jeremy Wagner

瀏覽器支援

  • Chrome：96.
  • Edge：96。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

Chrome 使用資料顯示，使用者在網頁上花費的時間有 90% 是在網頁載入後才花費，因此，您必須仔細評估網頁生命週期期間的回應速度。這就是 INP 指標評估的項目。

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

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

因此，INP 的用途並非測量互動的「所有」最終效果 (例如其他非同步作業的網路擷取和 UI 更新)，而只會測量「下一波」繪製作業遭到封鎖的時間。因此，延遲視覺回饋可能會讓使用者覺得網頁回應速度不夠快，因此設計 INP 可以協助開發人員評估這部分的使用者體驗。

在下方影片中，右側的示例會立即提供摺疊式面板開啟的視覺回饋。左例為回應速度慢的例子，說明這類反應會如何造成不良的使用者體驗。

回應速度緩慢和回應速度良好的示例。左邊的長時間任務會阻礙溝通，這會造成使用者多次點擊，造成體驗不佳。當主執行緒趕上時，它會處理延遲的輸入內容，導致摺疊式展開圖案意外開啟和關閉。畫面右側會顯示回應速度更快的頁面，讓您快速開啟指示，而且不會發生任何事件。

本指南將說明 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 毫秒以上，介於兩者之間的值則需要改善。
良好的 INP 值為 200 毫秒以下。不良的值大於 500 毫秒。

互動是什麼？

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

互動的主要驅動力通常是 JavaScript，但瀏覽器會透過「非」以 JavaScript 技術提供的控制項 (例如核取方塊、圓形按鈕和 CSS 提供的控制項) 提供互動。

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

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

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

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

包含兩項互動的更複雜互動。第一個是 mousedown 事件，會在放開滑鼠按鈕前產生影格，並啟動更多工作，直到另一個影格顯示為結果為止。
這張圖片顯示與多個事件處理常式互動的情形。使用者按下滑鼠按鈕時，互動的前半段會收到輸入內容。不過，在使用者放開滑鼠按鈕之前，系統會顯示一個影格。當使用者放開滑鼠按鈕時，必須在下一個影格顯示前執行另一組事件處理常式。

系統會在使用者離開網頁時計算網頁的 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 群組提供。

學以致用

INP 指標的主要目標為何？

評估網頁最初內容需要多少時間才能顯示。
不正確 - 以上說明是首次顯示內容所需時間
量化網頁的視覺穩定性，並盡量減少意外的版面配置變動。
錯誤：這項資訊是用來描述累積版面配置位移
評估網頁進入完整互動狀態前所需的時間。
錯誤：這項指標與「互動時間」相關，但 INP 特別著重於對使用者輸入內容的回應速度
針對使用者發起的所有或大多數互動，盡可能縮短從使用者發起互動到下一個影格繪製完成的時間。
答對了！

下列哪些互動類型會用於計算 INP？(請選取所有適用選項。)

使用滑鼠點擊。
答對了！
使用滑鼠滾輪或觸控板捲動頁面。
錯誤：INP 不會考量捲動
輕觸觸控螢幕。
答對了！
將滑鼠遊標停在元素上。
錯誤：INP 不會考量滑鼠游標
按下鍵盤上的按鍵。
答對了！
放大或縮小網頁。
不正確 - INP 不會考慮縮放

INP 互動的「延遲時間」如何定義？

瀏覽器處理互動事件處理常式所需的時間。
不正確 - 這個指標只考量處理時間長度，而非顯示下一個影格的輸入延遲時間或時間
網頁上所有互動產生視覺回應所需的平均時間。
答錯了 - INP 著重於最長的互動時間，而非平均值
瀏覽器開始處理與互動相關聯的事件處理常式所需的時間。
不正確 - 這項資訊僅考慮輸入延遲，不會說明處理和轉譯時間
從互動開始到下一個影格完整顯示的時間。
答對了！

INP 和 FID 有何不同？

INP 會評估網頁最初內容需要多久時間才會顯示，FID 則會評估回應使用者輸入內容的回應速度。
不正確 - 這是指首次顯示內容繪製，而非 INP
INP 會考量所有互動的完整持續時間，而 FID 只會測量最初互動的輸入延遲時間。
答對了！
INP 和 FID 會評估網頁進入互動狀態的不同時間戳記。
錯誤：INP 和 FID 是用來評估網頁回應互動速度的測量指標，不論互動發生的時間為何
兩者之間並無差別；INP 和 FID 是同一項指標的兩個不同名稱。
答錯了，這兩者有明確的定義

在什麼情況下，PageSpeed Insights 等工具可能無法為網頁提供 INP 資料？

網頁使用的自訂成效評估資料庫不會記錄 INP 資料。
答錯了。INP 會自動使用網路平台 API 進行評估，不仰賴網頁透過自訂程式庫自行回報成效。
Chrome 使用者的互動資料不足，無法在 CrUX 資料集中計算有意義的 INP 值。
答對了！
使用者只透過捲動和游標懸停與網頁互動，這類互動不計入 INP。
答對了！
這個網頁是使用自動為 INP 進行最佳化的架構建構而成，因此不需要回報。
錯誤：架構可協助處理 INP，但指標仍與之相關，且在可取得資料時會回報

在實驗室環境中重現互動速度緩慢的情況，最有效的策略為何？

模擬高階裝置的網路連線速度緩慢且不穩定，以便測試嚴苛的情況。
答錯了：網路雖然重要，但裝置功能較有可能曝露出緩慢互動
僅在網頁完全載入並處於閒置狀態後測試互動。
不正確：這可能會遺漏載入期間速度較慢的互動
在載入期間與網頁互動，並遵循常見的使用者流程，找出潛在的瓶頸。
答對了！
著重在極少數使用者不太可能遇到的複雜性互動。
錯誤：常見的使用者流程更能有效找出常見的 INP 問題

✨ 本測驗是由 Gemini 1.5 生成，並經過人工審查。歡迎提供意見