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

Brendan Kenny
Brendan Kenny
GitHub Bluesky
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：

PSI 報告顯示實際環境中的 Core Web Vitals，其中醒目顯示的部分為新的 INP 指標值，標記則顯示該值在「快速」、「平均」和「緩慢」值區中的位置

歡迎前往 PageSpeed Insights 試用。

從欄位收集自己的 INP 值

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

import {onINP} from 'web-vitals';

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

進一步瞭解web-vitals，以及如何在開發人員工具控制台中評估。

Web Vitals Chrome 擴充功能

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

擴充功能產生的報表，顯示各項 Core Web Vitals 的值，現在也包含 INP 值

安裝 Chrome 的 Web Vitals 擴充功能。

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

使用 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 欄位資料，會顯示為「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 面板：在 Chrome Canary (104) 的「時間範圍」模式中，可測量 INP
    • Lighthouse npm 模組：INP 評估功能可在特定時間範圍內使用 (使用 Puppeteer 進行合成輸入)

後續工作和意見回饋要求

未來，Chrome 工具團隊將持續投入資源，為 INP 提供偵錯功能和最佳化建議。

如果您對指標的實用性或評估難易度有任何意見，歡迎前往 web-vitals-feedback Google 群組提出。