改善 Interaction to Next Paint (INP)

什么是 Interaction to Next Paint (INP)？

Interaction to Next Paint (INP) 是一个相对较新且重要的指标，用于衡量网页在所有交互过程中的响应速度。较低的 Interaction to Next Paint 确保页面始终保持可靠的响应能力。INP 将于 2024 年 3 月成为 Core Web Vitals 指标，届时 Google 将用 INP 指标替代 FID 指标。

为了计算 Interaction to Next Paint 指标，系统会记录每次用户交互与页面最终呈现变化之间的所有时间差。所有交互中的最高值（或第 98 百分位数）将成为最终的 Interaction to Next Paint (INP) 指标。

第 98 百分位数还是最差的 INP？

INP 是一个旨在通过选择用户访问页面时发生的最长单次交互之一来代表页面整体交互延迟的指标。对于总交互次数少于 50 次的页面，INP 是延迟最严重的交互。对于交互次数较多的页面，INP 通常是第 98 百分位数的交互延迟。

Interaction to Next Paint (INP) 究竟是如何工作的？

当访问者在页面上点击或轻触时，就会发生交互。该交互可能会导致屏幕上的呈现变化。Interaction to Next Paint (INP) 衡量的是从点击到呈现之间的时间。

单次交互的延迟由该交互中任何事件的最长持续时间组成，其中持续时间从用户与页面交互的时刻起，到所有相关事件处理程序执行完毕后下一帧呈现为止。持续时间是以下时间段的总和：

Interaction to Next Paint (INP) 的好值和差值是什么？

如何测量 Interaction to Next Paint (INP)？

Interaction to Next Paint 只能通过实际用户工具来测量。为了测量 Interaction to Next Paint，我们需要真实的用户交互。Google 会测量真实 Chrome 用户与页面的所有交互，并将其存储在 CrUX 数据集中。CrUX 数据集是 Core Web Vitals 的官方数据集。

获取官方 INP 指标

您可以在 PageSpeed Insights 或 CrUX 仪表板和 Google BigQuery 中获取官方 INP 指标。PageSpeed Insights 将为您提供过去 28 天的第 75 百分位分数。Google BigQuery（通过 Data Studio）将提供更多的历史数据。

使用 Real User Monitoring 追踪 Interaction to Next Paint

虽然官方 CrUX 数据集是 Interaction to Next Paint 指标的最终来源，但 CrUX 数据集并不太实用，因为它高度匿名化。CrUX 数据集不提供实时监控，也不支持太多筛选。这就是为什么 Web 性能顾问通常依赖 Real User Monitoring。

测量当前会话的 Interaction to Next Paint。

调试 Interaction to Next Paint 最简单的方法是通过 Lighthouse 的"时间跨度"模式。您也可以使用 Core Web Vitals Visualizer，或者如果您更喜欢动手操作，可以使用 Google 的 Web Vitals JavaScript Library

使用 Web Vitals JavaScript 库将 INP 记录到控制台

<script type="module">
 import {onINP} 
 from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
 onINP(console.log);
</script>

如何改善 Interaction to Next Paint？

Interaction to Next Paint 是一个复杂的指标。您的页面可能在大多数情况下非常快速并即时响应。不幸的是，如果只有一个交互很慢，它就会影响整个 Interaction to Next Paint。

请记住，INP 可以分解为 input delay、processing time 和 presentation delay。

PageSpeed 提示：大多数情况下，当用户在页面启动阶段进行交互时，INP 会差得多。这就是为什么在调试 INP 时，记录所有交互以及页面加载状态是有意义的！

1. 最小化 input delay - 防止主线程上的长任务

通常页面在启动阶段响应能力较差。这是因为大部分主线程工作都在此时进行（解析、解码、渲染和脚本执行）。为了尽可能保持主线程空闲，请考虑：

• 移除未使用的代码。这可以通过称为 tree shaking（移除未使用的代码）和 code splitting（将代码打包成许多小包，可以按需加载）的过程来完成。
• 在浏览器空闲时加载非必要代码。例如，您真的需要在页面加载的前 500 毫秒内加载聊天小部件吗？不，可能不需要！
• 识别需要大量资源的慢速脚本，并重写代码使其更高效。
• 确保您的页面"易于渲染"。避免过大的 DOM 大小、过多或过大的图片、过多的视频、CSS 动画等
  

2. 最小化 processing time - 提供即时反馈以确保页面直接响应用户输入

当访问者执行诸如提交表单或将购物商品添加到购物车等操作时，不要等待服务器端确认（您的表单已发送，您的商品已添加到购物车），而是提供即时反馈（我们正在发送您的表单，正在将商品 X 添加到购物车）。

同时尽快 yield 给主线程。因为 JavaScript 有一个叫做"运行至完成"的特性，它会阻塞主线程直到所有代码执行完毕。您可以手动创建一个断点，让浏览器更新布局（然后继续执行剩余代码），方法是"yielding 给主线程"。最简单的方式是将部分代码包装在 setTimeout() 中

const formfeedbackEl = document.getElementById("formfeedback");
const formEl = document.getElementById("form");

formEl.addEventListener("submit", (evt) => {
  evt.preventDefault();
  formfeedbackEl.innerText = "Submitting form ... please hold on";

  let headers = new Headers({ Accept: "application/json" });
  let formData = new FormData(formEl);
  fetch("/form-endpoint", { method: "POST", headers, body: formData })
    .then(function (response) {
      return response.json();
    })
    .then(function (jsonData) {
      formEl.reset();
      formfeedbackEl.innerText = jsonData.message;
    });
   setTimeout(other_code_that_needs_to_run(),0);
});

3. 最小化 presentation delay - 保持简单！