與下一個顯示 (INP) 工具的互動

我們很高興能推出第一輪工具，支援新的回應速度指標：「互動至下一個顯示的內容」(INP)。如要瞭解指標本身，請參閱官方的 INP 指標指南。

建議的測量結果

評估 INP 的目標，是瞭解網頁回應使用者輸入內容的速度。要獲得實際資料，唯一的方法就是使用欄位資料，評估網頁對實際造訪網站的使用者的回應方式。

評估研究室中的 INP 有助於進一步瞭解事件時間以及需要最佳化的階段。研究室工具不會自動與網頁互動，因此必須在評估時手動輸入，或是使用 Puppeteer 等自動化工具編寫指令碼。如果從一般使用者歷程辨識出關鍵互動，就可以嘗試找出問題或編寫指令碼，然後放入持續整合測試，避免發生迴歸問題。

瞭解實際使用者的情況 (現場資料)

造訪 PageSpeed Insights

PageSpeed Insights 會從 Chrome 使用者體驗 (CrUX) Report API 中提取欄位資料，並提供網頁和來源過去 28 天效能的數據匯報。這類資料現已包含 INP：

快試試 PageSpeed Insights。

從現場收集自己的 INP 值

如要自行收集網站的 INP 資料，最簡單的方法是使用 web-vitals 程式庫；這個程式庫現已在 Beta 版中提供完整 INP 支援。

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

請參閱這篇文章，進一步瞭解 web-vitals 以及如何在開發人員工具控制台中評估成效。

網站體驗指標 Chrome 擴充功能

網站體驗指標擴充功能提供使用者網頁體驗的總覽 (來自 CrUX API)、CWV 的即時值，以及目前造訪網頁的關鍵指標。

安裝 Chrome 的網站體驗指標擴充功能。

診斷效能問題 (實驗資料)

使用 Lighthouse 使用者流程

開發人員工具的 Lighthouse 面板推出全新的時間範圍模式，可讓你透過自己偏好的方式啟動 Lighthouse，以自己偏好的方式與測試頁面互動，然後取得這段時間的報告。這份報表現在包含 INP 和稽核功能，可用於診斷任何回應速度問題。

透過 Lighthouse 使用者流程，系統就可以自動執行同樣的一系列互動。自 Lighthouse 9.6 起，使用者流程中可以使用 INP。

工具適用國家/地區詳細資料

• Chrome 使用者體驗報告 (CrUX)
  • BigQuery：INP 以 interaction_to_next_paint 的形式提供
  • CrUX API：INP 以 interaction_to_next_paint 的形式提供
  • CrUX 資訊主頁：包含 INP 資料
• PageSpeed Insights
  • pagespeed.web.dev：CrUX API 的網頁層級和來源層級 INP 欄位資料，顯示為「與下一個顯示的內容互動」
  • PSI API：INP 以 INTERACTION_TO_NEXT_PAINT_MS 的形式提供
• web-vitals JS 程式庫
  • web-vitals 提供 INP 支援
• 網站體驗指標 Chrome 擴充功能
  • 包括本機 INP 測量資料和 INP 欄位資料 (如果 CrUX API 可用)
• Lighthouse
  • 開發人員工具中的 Lighthouse 面板：Chrome Canary (104) 的「時間範圍」模式提供 INP 評估功能
  • Lighthouse npm 模組：提供時間範圍的 INP 測量 (使用 puppeteer 合成輸入)

日後工作並徵詢意見

日後，Chrome 工具團隊會繼續投入資源，開發 INP 的偵錯功能和最佳化建議。

如果你有任何意見，包括該指標的實用性、評估便利性等，請前往 web-vitals-feedback Google 群組。