与下一个油漆的相互作用 (INP)

随着网络开发的不断发展，网站性能衡量也必须不断发展，以便继续优先考虑用户体验。 下次绘制交互 (INP) 是一项核心 Web 重要指标，用于评估网页对用户交互的响应能力。 它使用对用户访问页面的整个生命周期中发生的所有单击、敲击和键盘交互的响应时间的观察。 最终的 INP Web Vitals 基于最长的交互，忽略异常值。 Google 很快将使用 INP 作为新的 Core Web Vital 衡量标准，衡量网站处理用户交互的速度。 由于 Google 是最受欢迎的网络浏览器，在美国拥有 2.46 亿唯一 Google 用户，因此您的网站必须针对其算法进行优化。

更换 FID

首次输入延迟 (FID) 将于 2024 年 3 月被交互到下一次绘制所取代。由于 FID 仅考虑第一次交互的输入延迟，因此它不考虑整个画面。 事实上，FID 甚至没有考虑运行事件处理程序所需的时间或呈现下一帧的延迟。

从 FID 到 INP 的转变表明衡量网络性能的方式发生了转变。 不只关注第一次交互，而是考虑网站的整体效率。 由于用户体验不会在第一次交互后结束，因此确认所有后续交互非常重要。 这将要求网络开发人员全面提高整个网站的性能。 研究表明，只需将网站加载时间缩短十分之一秒，零售网站的转化率就会提高 8.4%。

如何衡量

对于大多数网站，会报告具有最差延迟的 Interaction to Next Paint 值。 然而，对于具有大量交互的网站，随机错误可能会导致无响应网站上的 INP 异常高。 为了解决此问题，如果网站的交互次数超过 50 次，它将忽略每 50 次交互中最高的一次。 如果网站的交互次数为 50 次或更少，则将使用最高值。 除此之外，它还将使用所有页面浏览量的 75% 作为进一步删除异常值的方法，这意味着如果 75% 的页面获得良好分数，那么它将通过 INP 标准。 这样可以更好地衡量响应能力。

INP 可以在现场和实验室进行测量。 但值得注意的是，来自现场实际用户的数据将使您对性能有更全面的感受。

在该领域

除了 INP Web Vitals 之外，来自真实用户监控 (RUM) 的现场数据还可以为您提供重要数据，突出显示哪些特定交互对 INP 值本身负责、交互是否发生在页面加载期间或之后、交互类型 (单击、按键或点击）。

此外，如果您的网站可以包含在 Chrome 用户体验报告中，则可以在 PageSpeed Insights 中从 CrUX 获取 INP 字段数据。 所提供的信息包括 INP 的原始级别图片，如果可能，还包括页面级别数据。 CrUX 的主要缺点是，虽然它可以帮助您发现问题，但它没有为您提供足够的信息来找出问题所在。 同时，RUM 可以帮助您检查导致交互缓慢的网页、用户或用户交互的详细信息。 将 INP 归因于特定的相互作用可以防止浪费精力和猜测。

在实验室

理想情况下，一旦您的现场数据得出您的网站交互速度缓慢的结论，就应该开始实验室测试。 如果没有现场数据，可以通过一些方法在实验室中复制缓慢的交互。 例如，您可以跟踪用户流程并一路测试交互，或者可以在页面加载时（这是主线程最繁忙的时候）与页面交互。

优化您的网站

优化您的网站与 Next Paint 的交互将使其在 SERP 上排名靠前。 优化的第一步是识别问题。 运行现场和实验室测试，以了解您网站上的哪些交互最慢。

输入延迟

当用户在网页上发起交互时，输入延迟开始；当交互开始运行的事件回调时，输入延迟结束。 输入延迟的长度可能取决于页面上的其他活动，例如脚本加载、解析、获取处理、计时器函数或彼此重叠发生的其他交互。 无论原因如何，Web 开发人员的目标都是减少输入延迟以改善 INP Web Vitals。

缩短输入延迟的一种主要方法是减少页面加载期间与脚本评估相关的长任务的可能性。 即使在 JavaScript 执行之后，浏览器也必须在后台完成多项不可避免的任务，例如语法验证、将其编译为 1 和 0 以供机器理解，然后最终完成任务。 采取措施减少完成每个步骤所需的时间将减少输入延迟。

事件回调

与 Next Paint 测量的交互不会因输入延迟而结束。 优化事件回调以快速运行以响应用户交互也将改善 INP Web Vitals。 一般来说，分配尽可能少的工作将最有效地缩短事件回调。 但是，如果您网站的交互逻辑过于复杂，您可以尝试分离事件回调，以避免聚合工作成为阻塞主线程的长任务。

另一种让步技术是在事件回调中构造代码以限制运行的内容。 尽管这是一种更先进的技术，但仅运行应用视觉更新所需的逻辑并将所有其他内容推迟到后续任务可以保持回调轻量并减少渲染时间。

另一件可能导致渲染问题的事情是，在同一个任务中读取和更新元素的样式，而两个任务之间没有任何暂停。 为了避免这个问题，Web 开发人员应该首先读取样式，然后使用 window.requestAnimationFrame 函数对写入操作进行排队，这有助于避免渲染问题。

演示延迟

呈现延迟是事件回调结束与浏览器绘制下一帧之间的时间。 减少呈现延迟可显着提高“与下一个绘制的交互”值。

最小化文档对象模型 (DOM) 大小可以使页面快速呈现。 最小化 DOM 大小的最简单方法是减小初始大小。 减小 DOM 大小可以使网站速度更快，因为浏览器需要读取的代码更少，这也意味着可以更快地处理 DOM 的更新。

结论

INP 取代 FID 表明 Web 开发发生了重要变化。 全球有 51.8 亿互联网用户，很明显，网站性能必须变得越来越高效。 其中许多用户的互联网速度也低于平均水平，并且设备规格较低。 这就是 Google 首先发布 Core Web Vitals (CWV) 报告的原因 - 因此可以优化网站以覆盖每个用户，而不仅仅是具有高速功能的用户。 通过跳转到 INP，交互性和用户体验现在被优先考虑，因为优化现在必须超越首次输入延迟。

INP Web Vitals 是根据网站上的最差延迟期进行分配的，同时考虑了用户访问页面的整个生命周期中发生的所有点击、敲击和键盘交互的响应时间。 与 Next Paint 的交互可以在现场进行更真实的测量，或者在实验室中进行更多分析。 要针对 INP 优化您的网站，请通过减少长任务来减少输入延迟，使用让步技术缩短事件回调并避免布局抖动，并通过最小化 DOM 大小来减少呈现延迟。 自我了解 INP 是为了让您的网站为 2024 年 3 月即将发生的重大变化做好准备。

如需优化您网站的帮助，请立即联系 Coalition Technologies 专家！