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

Jeremy Wagner

瀏覽器支援

• 96
• 96
• x
• x

資料來源

注意：「與下一個顯示的內容互動」(INP) 是「穩定版」Core Web Vitals 指標，可根據 Event Timing API 的資料評估回應速度。INP 會記錄使用者與網頁互動時發生的所有延遲，並回報所有 (或幾乎所有) 互動中的最長延遲時間。INP 值越低，表示網頁能持續快速回應所有 (或絕大多數) 使用者互動。

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

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

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

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

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

回應速度緩慢和回應速度良好的示例。在左側，長時間工作會阻止摺疊式面板開啟。這會造成使用者多次點擊，造成體驗不佳。當主執行緒趕上時，就會處理延遲的輸入內容，導致摺疊式展開圖案意外開啟和關閉。在右側，回應速度更快的網頁可快速開啟摺疊式面板，且不會發生任何問題。

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

什麼是 INP？

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

INP 計算方式的詳細說明

INP 的計算方式是觀察使用者在網頁進行的所有互動。對大多數網站而言，延遲時間最長的互動會以 INP 回報。

不過，如果是含有大量互動的網頁，隨機發生當機問題可能會導致其他回應式網頁發生異常高延遲的互動。在特定網頁上發生的互動次數越多，發生這種情況的機率就越高。

為了更準確評估互動次數眾多的網頁實際回應速度，我們會忽略每 50 次互動中最高的一次互動。絕大多數的網頁體驗互動次數不會超過 50 次，因此最糟糕的互動次數通常會回報。接著，系統會照常記錄所有網頁瀏覽的第 75 個百分位數，進一步排除離群值，以便為大多數使用者或更高體驗創造價值。

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

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

重點：如要進一步瞭解 INP 的評估方式，請參閱「互動是什麼？」一節。

什麼是良好的 INP 分數？

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

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

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

良好的 INP 值為 200 毫秒以下。值大於 500 毫秒則屬於不良。

互動內容

互動活動的生命週期。在事件處理常式開始執行之前，輸入作業會發生延遲，這可能是主執行緒上長時間工作等因素造成的。接著執行互動事件的事件處理常式回呼，並在顯示下一個影格之前發生延遲。

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

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

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

重點：使用者也可以透過其他方式與網頁互動，例如懸停、縮放或捲動。我們不會為了 INP 目的觀察這些互動。不過，這些互動行為的某些變化可能包含 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 的最佳做法，是收集實際使用者的指標。如果您已經習慣依賴研究室資料評估成效，請花點時間閱讀「為何研究室和實際資料可能存在差異 (及因應方式)」一文。

實地

在理想情況下，您應先從實地資料著手，才能有效提升 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 群組提供意見。

學以致用

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 產生，並經過人工審查。提供意見回饋