与下一个油漆的互动：它是什么以及如何做？

您是否遇到过网站或应用程序缓慢且无响应的情况？

也许您单击了一个按钮，但过了很长时间屏幕上才出现一些内容。这是一次令人沮丧的经历，对吧？

这正是“与下一个绘画的交互”(INP) 的含义。

与 Next Paint 的交互 (INP) 是 Google 用来评估网站响应用户输入的速度的新兴指标。 2024 年 3 月 12 日，它成为影响 Google 排名的 Core Web Vitals 标准之一。

为什么这很重要？

在当今的数字时代，人们期望事情立即发生。如果网站或应用程序不能快速响应您的操作，您可能会感到不满意并退出。如今没有人有时间使用缓慢的应用程序！

优化 INP 对于提供无缝、愉快的用户体验、保持用户参与度和满意度至关重要。 INP 越低，您的网站或应用程序的感知性能就越高。

让我们深入研究 INP 并探索如何衡量它来提高您现有的分数。

什么是与下一个油漆的相互作用 (INP)？

下次绘制交互 (INP) 是一种 Web 性能指标，用于计算用户交互（例如单击、敲击或滚动）与由于该交互而在屏幕上绘制下一次像素之间的时间。

简单来说，INP 衡量网页或应用程序对用户交互的明显响应速度。较低的 INP 值表示响应速度更快的体验，而较高的 INP 值表示用户操作和屏幕上的视觉更新之间存在明显的延迟。

对于大多数用户交互，建议的 INP 值小于 200 毫秒 (ms)。 INP 值超过 300ms 被视为较差，并且会被用户视为慢

与 Next Paint 的交互作为核心网络至关重要

与 Next Paint 的交互于 2024 年 3 月 12 日作为三个 Google Core Web Vitals 指标之一引入。它取代了之前的“首次输入延迟”指标。

作为核心网络生命指标，与 Next Paint 的不良交互可能会影响您的 Google 搜索排名。

与下一次绘制的交互与第一次输入延迟有何不同？

INP 是第一输入延迟 (FID) 的后续测量。两者都是响应能力指标。

FID 和 INP 在两个方面有所不同：

• FID仅测量第一次处理延迟，而INP测量用户输入和UI更���之间的整个时间长度。
• FID 仅计算页面上的初始用户交互，但 INP 考虑（大约）最大延迟。

首次输入延迟估计浏览器开始处理用户输入所需的时间。不包括响应事件或更改用户界面所花费的实际时间。

顾名思义，FID 仅分析用户与网站的初始交互。这种初始接触可能无法准确反映整体用户体验，特别是对于长时间保持开放的网站（例如单页应用程序）。

与 Next Paint 的交互通常会评估页面上最差的输入延迟。但是，如果有大量用户遇到，异常值将被丢弃，Google 将评估交互延迟的第 98 个百分位。

因此，如果页面的 INP 为 250 毫秒，则 2% 的用户交互延迟时间大于该值。

与下一个油漆的交互 (INP) 如何工作？

INP 是一种响应度指标，重点关注用户交互之间所用的时间。它测量对网页元素执行特定操作时的响应速度。

INP 的工作原理如下：

• 用户通过单击按钮与网页进行交互。
• 浏览器从 Web 服务器请求新内容。
• Web 服务器向浏览器提供新的内容。
• 浏览器在页面上显示新内容。
• 浏览器计算创建新内容所需的时间并将其报告为 INP 分数。

较低的 INP 评级表明该页面对用户输入的响应非常灵敏。作为 Core Web Vitals 的一部分，INP 具有重要意义，原因如下：

• 改善了用户体验：高 INP 分数表明访问者必须等待很长时间才能让网页响应他们的活动，这可能会很烦人。

• SEO（搜索引擎优化）：INP 和其他核心网络生命是 Google 页面体验信号的一部分，它影响网站在搜索结果页面上的排名。这强调了 INP的重要性SEO 指标。

• 降低跳出率：加载时间缓慢可能会导致客户退出页面，从而降低公司的利润。

如何测量 INP？

INP 监视用户输入（例如单击和击键）与下一次 UI 更新之间经过的时间。该延迟由三个部分组成：

一个。输入延迟

等待网站上的后台操作以阻止事件处理程序运行。

b.处理时间

在 JavaScript 中执行事件处理程序。

c.演示延迟

处理其他待处理的操作、重新计算页面布局以及绘制页面内容。 INP 以毫秒 (ms) 为单位进行测量。一个好的基准是小于 200 毫秒，任何介于该值和 500 毫秒之间的时间都被认为需要改进。 500 毫秒或更长的延迟被视为较差。

有几个变量会影响 INP 值，包括网页的大小和复杂性，以及加载的 JavaScript 和 CSS 文件的数量。

您可以使用许多工具来评估与 Next Paint 的交互，例如：

• DebugBear 的网站速度测试
• Google 页面速度洞察
• 我们的网站速度 Chrome 扩展
• INP 调试器
• 谷歌搜索控制台
• 网络生命图书馆

网站速度测试工具可以帮助您确定网站的 INP 值。此类应用程序可以提供有关 Core Web Vitals 指标执行情况的信息，并提供有关如何优化它们的指导。

Google PageSpeed Insights 是一种流行的分析 INP 和的工具网站性能。它将评估站点并提出应用最佳实践的建议。您还可以检查您的网站在移动和桌面设备上的加载速度。

PageSpeed Insights 提出了两种类型的调查结果。顶部显示 Chrome UX 报告中网站的 Core Web Vitals 指标，这是 Chrome 用户的真实性能指标的集合。

下面报告中显示的值来自使用 Google Lighthouse 的受控实验室设置。这些数据可用于在新功能上线之前对其进行测试。

如果该网站的 INP 数据不可用，请查看其总阻塞时间 (TBT)。该指标评估一种新形式的响应能力。它重点关注网站在加载时无法响应用户交互的时间长度。

在底部，有一些关于如何增强 Core Web Vitals 指标的想法，如下所示：

如何优化与下一次绘制 (INP) 的交互？

因此，为了优化 INP，您需要尽可能简化主线程的待办事项列表并确定其优先级。以下是一些主要策略和方法，可优化以改进下次绘制交互 (INP) 值并提高响应能力：

一个。提高 JavaScript 性能

JavaScript是许多网站的关键组成部分。它提供了许多互动元素；但是，它也会降低网站的速度。

当 JavaScript 执行时，它在主线程上运行，负责渲染网页。如果代码效率低下，可能会导致线程停止并阻止网站响应用户输入。

要提高响应能力，请优化 JavaScript。您可以通过以下方式实现此目的：

• 缩小 JavaScript 文件减少 JavaScript 的数量，使其能够加载更多迅速地。

• 启用 GZip 压缩。压缩网站文件和数据的另一种常见方法。

• 使��� JavaScript 框架。该工具可以帮助您组织 JavaScript 代码并使其更加高效。 AngularJS 和 jQuery 是众所周知的例子。

• 使用CDN。这项技术称为内容交付网络，将从位于目标受众附近的服务器分发 JavaScript 文件，从而加快加载时间。

低效的 JavaScript 可能会阻塞主线程，导致渲染延迟。代码分割、延迟加载、使用 Web Worker 以及避免在主线程上长时间运行操作都是减少 JavaScript 延迟的选项。

b.使用网络工作者

Web Worker 是一种允许 JavaScript 独立于主线程运行的服务。它们可以方便地在后台运行复杂的任务。

假设您有一个加载了照片、视频和数据的 WordPress 网站。 Web Worker 可能会将这些昂贵的 JavaScript 操作转移到后台线程，从而防止界面停滞。

避免主线程阻塞的另一种方法是将大型 JavaScript 作业划分为较小的作业。

c.分解长任务

分解大型任务允许网络浏览器一次将它们分成较小的部分来处理。结果，主线程可以自由地执行更重要的职责。

如您所知，冗长的任务会阻塞主线程，从而阻止浏览器执行交互事件。至提高网站的响应能力，减少主线程的压力，并尝试拆分大型操作。

通过将大型活动分解为较小的部分，主线程可以执行其他作业并更快地响应用户交互。

此外，分解长任务有助于最大限度地减少“卡顿”效应，即网站上的动画和过渡由于而变得不稳定或卡顿。到一个重载的主线程。通过确保每个活动在更短的时间内完成，网站可以为用户提供更加无缝的视觉体验���

d.优先考虑输入准备情况

输入就绪性是指网页响应用户交互的能力。如果不是，通常表示浏览器的主线程正忙于其他任务。

以下是如何优先考虑输入准备情况并提升 INP：

1. 非关键 JavaScript 将被推迟

初始页面加载不需要某些 JavaScript，可以在主之后执行内容。这使得主线程能够优先考虑用户交互并提高整体页面响应能力。

2. 节流

该策略决定了函数执行的频率。例如，当用户向下滚动时，相同的代码可能每秒执行数百次。限制允许它每毫秒左右只运行一次，无论事件被触发多少次。

3. 去抖动

这会禁止函数再次执行，直到经过一定时间为止。例如，当用户调整浏览器窗口大小时，此事件可能会多次启动相同的过程。去抖动可用于推迟执行，直到用户在预定时间段内停止调整大小。

4. 不积极参与的事件监听者

事件侦听器是检测某些事件（例如滚动和点击）的计算机结构。使它们成为被动状态会指示浏览器跳过等待特定功能完成的过程，而是继续执行其他活动。

e.提供即时反馈

某些活动（例如填写包含多个数据输入的表单）可能会导致严重的响应延迟。

这就是即时反馈的用武之地。此策略为客户提供了一个可见的指示，表明网站已收到并正在处理他们的请求。

如果用户收到快速反馈，他们就不会怀疑网站是否记录了他们的输入。它可以给人更快性能的印象，即使它实际上并没有减少处理时间。

查看这些快速反馈提示的实例：

1. 负载指示器

当进程运行时，特别是在显示数据或切换到新页面时，显示微调器或进度条。

2. 弹出确认消息

最好显示一条消息，确认操作（例如将商品添加到购物车）已成功完成。

3. 表单字段验证

例如，如果用户输入格式不正确的电子邮件地址，请立即显示错误通知，而不是等到表单提交。

结论

在一天结束时，呈现一个良好的用户体验在网络上归结为一件事：响应能力。您的网站或应用程序响应用户事件（例如点击、点击和浏览）的速度可以决定它是令人愉快的体验还是令人沮丧的缓慢。

这就是为什么优化快速交互到下次绘制 (INP) 时间如此重要。 INP 监控某人与您的网站互动和他们在屏幕上收到视觉确认之间的重要时刻。 INP 越低，一切看起来就越快、反应越灵敏。

因此，继续释放优化 INP 的力量吧！

发现普通网站与那些看起来极其快速和流畅的网站的区别在于快速响应能力。用户的满意度和数字体验的成功都取决于此。

常见问题解答