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

Web Vitals Chrome 扩展程序

Web Vitals 扩展程序可让您大致了解用户的网页体验（通过 CrUX API），以及 CWV 的实时值和当前网页访问的关键指标。

扩展程序生成的报告，其中显示每个 Core Web Vitals 指标的值，现在还包括 INP 的值

安装 适用于 Chrome 的 Web Vitals 扩展程序。

诊断性能问题（实验室数据）

使用 Lighthouse 用户体验流

借助 DevTools 中 Lighthouse 面板中的新时间跨度模式，您可以启动 Lighthouse，随意与测试页面互动，然后获取有关该时间段内发生情况的报告。此报告现在包含 INP 和审核，以帮助诊断任何响应速度问题。

您可以使用 Lighthouse 用户体验流程自动执行同一组互动。从 Lighthouse 9.6 开始，用户体验数据在用户体验流程中可用。

工具可用性详情

  • 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 群组。