與下一個顯示的內容 (INP) 互動 (INP) 是一項穩定的 Core Web Vitals 指標,可使用 Event Timing API 中的資料評估網頁回應速度。INP 會在整個生命週期中,觀察訪客在網頁點選、輕觸和使用鍵盤進行的所有互動,並回報最長持續時間 (忽略離群值)。如果 INP 偏低,表示網頁能持續快速回應絕大多數的使用者互動。
良好的回應速度表示網頁能快速回應互動。如果網頁回應互動,瀏覽器會在下一個轉譯的影格顯示視覺回饋,表示互動成功。例如,此工具可提供有關以下內容的意見回饋:
- 系統是否確實將您新增至線上購物車的商品納入購物車。
- 是否已開啟行動裝置導覽選單。
- 伺服器是否驗證登入資訊的內容。
某些互動所需時間會比其他互動更久,但對於互動特別複雜的互動而言,建議您快速呈現一些初始視覺回饋,藉此告知使用者正在發生某些事情。距離下次繪製 是最早可行的時間點因此,INP 的意圖是評估互動的所有最終影響 (例如從其他非同步作業的網路擷取和 UI 更新),而是封鎖「下一個」繪製時間。延遲視覺回饋會讓使用者認為網頁沒有回應他們的動作。
INP 的目標是盡量縮短從使用者開始互動到繪製下一個畫面為止,但對於使用者啟動的所有或大多數互動操作所需的時間。
INP 的計算方式是觀察與網頁進行的所有互動。針對大多數網站,系統會將延遲時間最差的互動回報為 INP。不過,如果網頁有大量互動,隨機出現小歇問題,或許會導致其他回應式網站的互動速度異常高。互動次數越多,這種情況就越高。為抵禦這個情況,並改善對這些類型網頁的實際回應速度,我們會忽略每 50 次互動中的一次最高互動。絕大多數的網頁體驗都沒有超過 50 次互動,因此瀏覽器幾乎一律會回報不良互動。然後照常回報所有網頁瀏覽次數的第 75 個百分位數,進一步移除離群值,讓值更能代表一般使用者體驗。
互動是指在同一個邏輯使用者手勢期間觸發的一組事件處理常式。舉例來說,觸控螢幕裝置上的「輕觸」互動包含多個事件,例如 pointerup
、pointerdown
和 click
。如要促成互動,您可以採用 JavaScript、CSS、內建瀏覽器控制項 (例如表單元素),或是綜合這些控制項。
互動的延遲時間是由一組促成互動的事件處理常式所構成的最長「持續時間」,從使用者開始互動起,到下一個影格出現視覺回饋的那一刻起。
重點提示:如要進一步瞭解 INP 的評估方式,請參閱「互動是什麼?」一節。
何謂良好的 INP 分數?
為確保使用者能提供良好的回應體驗,要評估的良好門檻是記錄的第 75 個百分位數,在行動裝置和電腦裝置上區隔出去:
- 如果 INP 等於或小於 200 毫秒,表示您的網頁回應速度良好。
- 如果 INP 介於 200 毫秒到 500 毫秒之間,表示網頁的回應時間需要改善。
- 如果 INP 超過 500 毫秒,表示您的網頁回應速度較慢。
互動是什麼?
互動的主要驅動因素通常為 JavaScript,但瀏覽器卻可透過「非」JavaScript 技術的控制項 (例如核取方塊、圓形按鈕和由 CSS 技術提供的控制項) 提供互動功能。
就 INP 而言,系統僅觀察到下列互動類型:
- 以滑鼠點擊。
- 輕觸有觸控螢幕的裝置。
- 在實體鍵盤或螢幕小鍵盤上按下按鍵。
重點:懸停和捲動不會考量 INP。不過,使用鍵盤捲動 (空格鍵、頁面向上、頁面向下等) 涉及按鍵動作,可觸發 INP「確實」測量的其他事件。任何產生的捲動都不會計入 INP 計算中。
互動會在主要文件或文件內嵌的 iframe 中發生,例如在嵌入的影片上點選播放。由於使用者不知道網頁的哪些部分位於 iframe 中,因此您必須評估 iframe 中的 INP,才能準確評估整個頁面的內容。不過,JavaScript Web API 無法存取 iframe 內容,也可能無法評估 iframe 中的 INP。這顯示出 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 最佳化歷程始於現場資料。最理想的狀況是, Real User Monitoring (RUM) 中的欄位資料不僅能提供網頁的 INP 值,還能指出針對 INP 值本身負責的特定互動,無論互動是在頁面載入期間或之後發生,互動的類型 (點擊、按鍵或輕觸) 和其他重要資訊。
如果您的網站符合 Chrome 使用者體驗報告 (CrUX) 的納入資格,您就能透過 PageSpeed Insights 的 CrUX 快速取得 INP 欄位資料,以及其他網站體驗核心指標的資料。至少您可以取得網站 INP 的來源層級相片,但在某些情況下,您也可以取得網頁層級資料。
不過,CrUX 可以告訴您高層級「有」問題,但通常不夠詳盡,無法全盤瞭解問題所在。RUM 解決方案可協助您深入瞭解互動速度緩慢的網頁、使用者或使用者互動情形。能將 INP 歸因於個別互動,有助於免除猜測和浪費心力。
實驗室
如果取得足以顯示互動速度緩慢的欄位資料,不妨在研究室中開始測試。在沒有現場資料的情況下,在研究室中可重現緩慢互動的一些策略。策略包括遵循常見的使用者流程和測試互動,並在載入期間與網頁互動 (當主執行緒通常處於活躍狀態時),以便揭露在使用者體驗的關鍵部分,導致互動緩慢的互動。
如何改善 INP
請參閱最佳化 INP 指南,瞭解如何找出現場緩慢的互動,以及如何使用研究室資料進行最佳化。
變更記錄
有時候,我們在測量指標的 API 中會發現錯誤,有時則在指標本身定義中發現錯誤。因此,有時確實需要進行變更,而這些變更可能會在內部報表和資訊主頁中顯示為改善或迴歸。
為協助您管理,這些指標的導入或定義的所有變更,都會顯示在這份變更記錄中。
如果您有這些指標的意見回饋,請透過 web-vitals-feedback Google 群組提出。