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

Brendan Kenny
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

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

建議的測量方式

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

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

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

前往 PageSpeed Insights

PageSpeed Insights 會從 Chrome 使用者體驗 (CrUX) 報告 API 提取現場資料，並提供網頁和來源在過去 28 天內的成效快照。這項資料現在包含 INP：

現場的 Core Web Vitals PSI 報表，其中醒目顯示部分顯示新的 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 以及如何在開發人員工具主控台中進行評估。

Web Vitals Chrome 擴充功能

網站體驗擴充功能可提供使用者網頁體驗的概略資訊 (來自 CrUX API)，以及網頁目前造訪的 CWV 和重要指標即時值。

擴充功能的報表，顯示每個 Core Web Vitals 的值，現在也包含 INP 的值

安裝 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 社群。