Interaction to Next Paint (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 以及如何在 DevTools 控制台中进行衡量。

Web Vitals Chrome 扩展程序

Web Vitals 扩展程序可让您大致了解用户的网页体验（通过 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：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
  • DevTools 中的 Lighthouse 面板：Chrome Canary (104) 中的“时长”模式支持 INP 衡量
  • Lighthouse npm 模块：在时间段内提供 INP 衡量结果（使用 Puppeteer 进行合成输入）

后续工作和反馈请求

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

如果您有关于指标的实用性、衡量难易程度等任何方面的反馈，欢迎在 web-vitals-feedback Google 群组中提供。