Interaction to Next Paint (INP) 工具

我们很高兴能够为新的待处理响应能力指标“Interaction to Next Paint (INP)”提供第一轮工具支持。如需了解该指标本身，请参阅官方 INP 指标指南。

建议的衡量指标

衡量 INP 的目标是了解网页对用户输入的响应速度。要想获得真实数据，唯一的方法是使用实测数据来衡量您的网页对访问您网站的真实用户所做出的响应。

这样，在实验室中衡量 INP 有助于更好地了解事件时间和需要进行优化的位置。实验工具不会自动与网页互动，因此它们在测量时需要手动输入，或者需要使用 Puppeteer 等自动化工具编写脚本。在从典型的用户体验历程中识别出关键互动后，可以尝试通过这些互动来发现问题或编写脚本，进行 CI 测试以防止出现回归。

了解真实用户的体验（实测数据）

访问 PageSpeed Insights

PageSpeed Insights 会从 Chrome User Experience (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 以及如何在开发者工具控制台中进行测量。

Web Vitals Chrome 扩展程序

Web Vitals 扩展程序可让您大致了解用户的网页体验（通过 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 字段数据显示为“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 版中“timespan”模式下提供 INP 衡量功能 (104)
  • Lighthouse npm 模块：按时间跨度提供 INP 衡量功能（使用 Puppeteer 进行合成输入）

后续工作和征求反馈

今后，Chrome 工具团队将继续投资于 INP 的调试功能和优化建议。

如果您对指标的实用性、易于衡量等方面有任何反馈，欢迎加入 web-vitals-feedback Google 网上论坛。