Interaction to Next Paint (INP)

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有以下几个显著优势:

  1. 全面性:INP考虑了页面的所有交互,而不仅仅是首次交互。这意味着它能够更全面地反映用户在整个页面生命周期内的体验。
  2. 时效性:INP不仅仅测量输入延迟,还包括事件处理时长和渲染延时,确保从用户开始交互到下一帧绘制的时间尽可能短。
  3. 用户体验:INP的目标是确保用户发起交互到下一帧渲染的时间尽可能短,以提供良好的用户体验。这对于长时间保持打开的页面尤为重要,如单页应用程序。
  4. 性能评估:INP的计算基于用户在页面上的所有交互,而不仅仅是第一次交互。这使得INP成为一个更可靠的整体响应能力指标。
  5. 优化重点:INP的优化不仅关注事件排队时间和主线程可用性,还包括处理事件处理程序、重新计算布局和将更新绘制到屏幕上,所有这些都是INP指标的关键组成部分。
  6. 搜索引擎优化(SEO):INP是Google评价网站体验的因素之一,影响网站在搜索结果中的排名。一个好的INP分数可以帮助你的网站在搜索结果中排名更高。
  7. 跳出率:如果网页响应速度快,用户更可能留在网页上浏览更多内容,而不是因为等待而离开。

综上所述,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,您可以采取以下几种策略:

  1. 减少不必要的交互:避免添加复杂的交互效果,这些可能会延长页面加载时间,影响用户体验。
  2. 代码精简:减少冗余代码,使用现代前端框架和库,如Bootstrap 5,以减少JavaScript编写量。
  3. 监测加载进程:使用性能监控工具,如Lighthouse或Chrome DevTools,来跟踪页面加载和交互的性能。
  4. 分割大型任务:使用构建工具如WebpACK或Rollup将大型任务分割成更小的部分,以便主线程可以更快地响应用户输入。
  5. 延迟加载非关键任务:只有在主线程空闲时才加载非关键资源,以保持快速的用户交互。
  6. 减少JavaScript和第三方脚本:减少不必要的JavaScript和第三方脚本,以减轻主线程的负担。
  7. 优化处理时间:减少CSS动画和第三方字体的使用,优化JavaScript执行效率。
  8. 最小化呈现延迟:优化DOM结构,减少渲染工作量,确保页面元素能够迅速响应用户交互。

通过实施上述策略,您可以显著改善网站的INP表现,从而提升用户体验和网站性能。

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
在线客服
云加速客服
哈喽,欢迎光临云加速!
2024-07-16 02:14:06
您好,有什么需要帮助的吗?
您的工单我们已经收到,我们将会尽快跟您联系!
[业务咨询]
176363189
业务咨询
[紧急咨询]
17307799197
[投诉建议]
sudu@yunjiasu.cc
取消

选择聊天工具: