Interaction to Next Paint (INP) 工具

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

我们很高兴为新的 待定响应速度指标“Interaction to Next Paint (INP)”提供第一轮工具支持。如需了解该指标本身，请查看官方 INP 指标指南。

建议的衡量方式

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

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

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

访问 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以及如何在开发者工具控制台中进行衡量。

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
    • 开发者工具中的 Lighthouse 面板：INP 衡量可在 Chrome Canary 版 (104) 的“时间段”模式下使用
    • Lighthouse npm 模块：INP 衡量可在时间段内使用（使用 Puppeteer 进行合成输入）

未来工作和反馈请求

未来，Chrome 工具团队将继续投入资源，为 INP 提供调试功能和优化建议。

如果您对任何方面有反馈，例如指标的实用性或衡量的简易性，请将其提交到 web-vitals-feedback Google 群组。