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

Brendan Kenny

Elizabeth Sweeny

我們很高興宣布，第一輪工具支援已開放，可用於新的待定回應速度指標「Interaction to Next Paint」(INP)。如要瞭解指標本身，請參閱 官方 INP 指標指南。

建議的測量方式

測量 INP 的目的是瞭解網頁回應使用者輸入內容的速度。要取得實際資料的唯一方法，就是使用實地資料來評估網頁對造訪網站的實際使用者做出的回應。

接著，您可以在實驗室中評估 INP，進一步瞭解事件時間點和需要進行最佳化的部分。實驗室工具不會自動與網頁互動，因此在評估時需要手動輸入，或是使用 Puppeteer 等自動化工具編寫指令碼。在典型使用者歷程中找出關鍵互動後，您可以嘗試找出問題或編寫指令碼，並將其納入 CI 測試，以防迴歸。

瞭解實際使用者體驗 (實際資料)

前往 PageSpeed Insights

PageSpeed Insights 會從 Chrome 使用者體驗 (CrUX) 報告 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 專用 Web Vitals 擴充功能。

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

使用 Lighthouse 使用者流程

DevTools 中 Lighthouse 面板的全新時間範圍模式可讓您啟動 Lighthouse，隨意與測試網頁互動，然後取得該期間發生的事件報告。這份報表現在包含 INP 和稽核功能，可協助診斷任何回應速度問題。

您可以使用 Lighthouse 使用者流程，自動執行相同的一系列互動。自 Lighthouse 9.6 起，使用者流程中就支援 INP。

工具可用性詳細資料

• Chrome 使用者體驗報告 (CrUX)
  • BigQuery：INP 可用於 interaction_to_next_paint
  • CrUX API：可使用 interaction_to_next_paint 的 INP
  • CrUX 資訊主頁：包含 INP 資料
• PageSpeed Insights
  • pagespeed.web.dev：CrUX API 的網頁層級和網域層級 INP 欄位資料，以「Interaction to Next Paint」的形式顯示
  • PSI API：INP 可用於 INTERACTION_TO_NEXT_PAINT_MS
• web-vitals JS 程式庫
  • web-vitals 包含 INP 支援
• Web Vitals Chrome 擴充功能
  • 納入本機 INP 評估結果和 INP 欄位資料 (如果可從 CrUX API 取得)
• Lighthouse
  • 開發人員工具中的 Lighthouse 面板：Chrome Canary (104) 的「timespan」模式可使用 INP 評估
  • Lighthouse npm 模組：可在時間範圍內使用 INP 評估 (使用 puppeteer 進行模擬輸入)

未來的工作和意見回饋要求

日後，Chrome 工具團隊將持續投入 INP 的偵錯功能和最佳化建議。

如果您對指標的實用性、測量便利性等方面有任何意見，歡迎前往 web-vitals-feedback Google 社群。