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

Brendan Kenny
Brendan Kenny
X GitHub
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

好消息！我們推出了新的待處理回應指標「與下一個顯示的內容互動 (INP)」工具正式支援，如要瞭解指標本身，請參閱 官方 INP 指標指南。

建議的測量方式

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

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

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

前往 PageSpeed Insights

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

一份有關核心網站體驗核心指標的 PSI 報告，有醒目顯示的部分顯示新的 INP 指標值，以及一個標記顯示其快速、平均值和緩慢值區的位置

前往 PageSpeed Insights 試用。

自行收集欄位中的 INP 值

如果您想自行收集網站的 INP 資料，最簡單的方法就是使用 web-vitals 程式庫，該程式庫現已具備完整的 INP Beta 版支援。

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 欄位資料，顯示為「與下一個顯示內容互動」
    • 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 社群。