Interaction to Next Paint (INP) 定义及重要性
Interaction to Next Paint (INP) 是一个衡量网页响应用户交互能力的性能指标，它代表了用户与网页进行交互后到下一帧画面渲染完成的时间。INP 是一个相对较新的指标，它取代了先前的 First Input Delay (FID) 成为 Core Web Vitals 中的响应能力指标。INP 的测量范围包括所有用户与页面的交互，而不仅仅是第一次交互，它考虑了用户交互和页面上的下一次视觉更新之间的整个时间。
INP 的计算方式
INP 的计算方式是通过观察与页面进行的所有交互计算的，最差延迟的交互则为 INP。对于一些存在大量交互的页面，随机的故障可能会导致出现异常高的交互，为了更好地衡量这些类型页面的实际响应能力，通常会忽略每50次交互中的一个最高交互。然后像其他指标一样报告所有页面浏览量第75%的数据，这样进一步消除了异常值，以给出绝大多数用户体验或更好的值。
INP 的满意度范围
INP 的满意度范围通常按照以下标准划分：
- 良好：低于 200 毫秒
- 需要改进：200 到 500 毫秒之间
- 较差：500 毫秒以上
这些阈值基于第 75 个百分位数的实时用户数据，并且适用于桌面和移动流量。
INP 的优化建议
为了优化 INP，网站开发者需要关注页面的响应速度，确保用户的交互能够及时得到视觉上的反馈。这可能涉及到减少JavaScript的执行时间、优化CSS和HTML的加载、减少重绘和重排等技术手段。此外，使用现代的前端框架和库，以及合理的代码拆分和懒加载策略，也有助于提高 INP 的表现。
深入研究
INP 相比于 FID 有哪些优势？
INP相对于FID的优势
INP（Interaction to Next Paint，即交互到下一次绘制）是一个新的Web性能指标，它在2024年3月取代了之前的FID（First Input Delay，即首次输入延迟）作为核心Web指标之一。INP相比于FID有以下几个显著优势：
- 全面性：INP考虑了页面的所有交互，而不仅仅是首次交互。这意味着它能够更全面地反映用户在整个页面生命周期内的体验。
- 时效性：INP不仅仅测量输入延迟，还包括事件处理时长和渲染延时，确保从用户开始交互到下一帧绘制的时间尽可能短。
- 用户体验：INP的目标是确保用户发起交互到下一帧渲染的时间尽可能短，以提供良好的用户体验。这对于长时间保持打开的页面尤为重要，如单页应用程序。
- 性能评估：INP的计算基于用户在页面上的所有交互，而不仅仅是第一次交互。这使得INP成为一个更可靠的整体响应能力指标。
- 优化重点：INP的优化不仅关注事件排队时间和主线程可用性，还包括处理事件处理程序、重新计算布局和将更新绘制到屏幕上，所有这些都是INP指标的关键组成部分。
- 搜索引擎优化（SEO）：INP是Google评价网站体验的因素之一，影响网站在搜索结果中的排名。一个好的INP分数可以帮助你的网站在搜索结果中排名更高。
- 跳出率：如果网页响应速度快，用户更可能留在网页上浏览更多内容，而不是因为等待而离开。
综上所述，INP作为一个更全面、更精确的性能指标，能够更好地反映用户的实际体验，并指导网站性能的优化，从而提高用户满意度和网站的搜索引擎排名。
如何测量网页的 INP？
如何测量网页的 INP？
INP（Interaction to Next Paint）是衡量网页响应用户交互速度的性能指标。它关注的是用户与页面进行的所有交互的延迟，包括点击、触摸和键盘输入等。INP的计算基于Event Timing API，通过观察事件处理程序的延迟来确定交互的响应时间。
使用Google Chrome用户体验报告（CrUX）
您可以通过Google Chrome用户体验报告（CrUX）来检查网页的INP测量值。CrUX数据集基于在Chrome浏览器上与您的网站进行交互的真实用户。要查看您的网页INP值，请输入要测试的页面或域的URL，然后向下滚动到正确的指标。
使用PerformanceObserver API
您也可以使用PerformanceObserver API手动计算INP。以下是一个简化的代码示例，它创建了一个观察者来收集所有交互事件，并记录最长的交互延迟：
let maxDuration = 0;
const observer = new PerformanceObserver(entryList => {
const entries = entryList.getEntries();
entries.forEach(entry => {
if (!entry.interactionId) return;
if (entry.duration > maxDuration) {
maxDuration = entry.duration;
}
});
const inp = maxDuration;
// 上报 INP
});
observer.observe({
type: 'event',
durationThreshold: 16,
buffered: true
});
注意事项
- INP的评分标准是：良好（低于200毫秒）、需要改进（200-500毫秒）、较差（500毫秒以上）。
- 访问者的设备和网络连接会影响INP。
- Google建议网站所有者实现良好的核心Web指标，以确保用户获得良好的体验。
以上信息综合自最新的搜索结果，以确保您获得最准确的指导.
INP 在网页开发中应该如何被优化？
INP优化策略
INP（Interaction to Next Paint）是一个衡量网页响应用户交互能力的核心Web Vitals指标。为了优化INP，您可以采取以下几种策略：
- 减少不必要的交互：避免添加复杂的交互效果，这些可能会延长页面加载时间，影响用户体验。
- 代码精简：减少冗余代码，使用现代前端框架和库，如Bootstrap 5，以减少JavaScript编写量。
- 监测加载进程：使用性能监控工具，如Lighthouse或Chrome DevTools，来跟踪页面加载和交互的性能。
- 分割大型任务：使用构建工具如WebpACK或Rollup将大型任务分割成更小的部分，以便主线程可以更快地响应用户输入。
- 延迟加载非关键任务：只有在主线程空闲时才加载非关键资源，以保持快速的用户交互。
- 减少JavaScript和第三方脚本：减少不必要的JavaScript和第三方脚本，以减轻主线程的负担。
- 优化处理时间：减少CSS动画和第三方字体的使用，优化JavaScript执行效率。
- 最小化呈现延迟：优化DOM结构，减少渲染工作量，确保页面元素能够迅速响应用户交互。
通过实施上述策略，您可以显著改善网站的INP表现，从而提升用户体验和网站性能。
