如何在 WordPress 上优化 Next Paint (INP) 的交互

与下一次绘制的交互 (INP) 是一种网页响应度指标，用于测量页面上所有用户交互的延迟。 优化网站的 INP 指标对其速度、用户体验和 SEO 起着至关重要的作用。

Google 于 2022 年宣布将 INP 作为一项实验性指标，以解决首次输入延迟 (FID) 指标的诸多限制，并宣布 INP 将在 2024 年 3 月取代 FID，成为核心 Web 重要指标。

这篇文章将探讨 INP 的基础知识、为什么它要取代 FID，以及如何衡量和改进网站的 INP 指标。

兴奋的？ 我们走吧！

测量网页响应能力的重要性

没有人喜欢速度慢的网站（包括 Google！）。 没有什么比缓慢的网站更快地将用户从您的网站上赶走的了。

最大内容绘制 (LCP) 等指标是页面加载速度的重要指标，这就是为什么它是核心 Web Vitals 指标的原因。

但是页面加载并且用户停留后会发生什么？ LCP 不测量页面的交互性。 根据 Google 的说法，用户 90% 的时间都花在页面加载后。 因此，衡量页面整个生命周期（从打开到关闭）的响应能力至关重要。

页面加载速度快但响应能力差的网站仍然是一个缓慢的网站，其结果是糟糕的用户体验。 例如，花费很长时间打开移动导航菜单或更新在线购物车中的商品。

这就是衡量网页响应能力的用武之地。具有良好响应能力的网站可以快速响应用户交互。 这种反应必须以视觉反馈的形式出现。

即使对于需要较长时间的复杂交互，向用户呈现一些视觉提示（例如加载动画）对于维持出色的用户体验也非常重要。

与下一次绘制的交互 (INP) 与首次输入延迟 (FID)：有什么区别？

衡量网页的用户体验非常棘手。 您可以使用总阻塞时间 (TBT) 和交互时间 (TTI) 等指标来了解页面的响应能力，但它们并不表示实际的用户体验。

例如，一个页面可能具有快速的 TBT 或 TTI，但由于用户与其交互的方式，用户仍然感觉缓慢。 反过来也是如此。

输入 FID——它直接测量用户在网页上的首次交互。 具体来说，它衡量该领域的真实用户体验。

首次输入延迟 (FID) 限制

顾名思义，FID 仅测量浏览器对“第一个输入”的响应中的“延迟”。

简而言之，它是一个页面加载响应指标（JavaScript 代码加载和执行的速度），而不是运行时响应指标（页面加载后页面响应用户交互的速度）。

虽然第一印象很重要，但它们并不一定能提供全面的信息！ FID 改进了我们衡量网页响应能力的方式，但它并不能准确衡量用户与网页的交互方式（从打开网页到关闭网页）。

例如，FID 不会测量在呈现下一帧的延迟时运行事件处理程序所需的时间。

与 Next Paint (INP) 有何相互作用？

INP 衡量页面对用户交互（点击、敲击、按键等）的整体响应能力。

交互可以包括多个组处理程序。 例如，点击手机的触摸屏可以在页面背景中启动一系列事件。 无论哪种方式，INP 是从用户开始交互到浏览器呈现带有视觉反馈的下一帧的页面最长延迟。

与仅测量浏览器响应用户首次交互所需的时间的 FID 不同，INP 会观察页面上的所有用户交互并提供总体分数。

因此，INP 超越了第一印象，并对所有用户交互进行了采样，使其成为页面响应能力的更可靠指标。

就像 FID 一样，低 INP 分数意味着页面对用户输入的响应更好。

INP是如何计算的？

对于大多数网站来说，最终的 INP 指标是最长的交互。 然而，存在一些异常值。

例如，如果您的网页主要包含文本和图像，则不会有太多用户交互。 但如果它是一个具有许多交互元素（例如文本编辑器和游戏）的动态页面，它将有大量的交互。 在这种情况下，随机延迟可能会降低页面在高响应网站上的 INP 分数。 为了克服这个问题，INP 会在每 50 次用户交互中忽略一次最高交互。

大多数页面的交互次数都少于 50，所以这不应该是一个问题。 另外，INP 仅考虑所有页面浏览量的 75%，进一步消除了意外的异常值。

最终，最终的 INP 分数反映了大多数用户的体验。

注意： INP 不考虑悬停和滚动操作。 但是，使用键盘滚动可能会触发 INP 测量的事件。 不管怎样，页面滚动不是由 INP 来衡量的。 如果用户不与页面交互，则该页面加载也可能不返回 INP 分数。

什么是好的 INP 分数？

用户可能在各种设备上浏览网站。 每个网站都可以是独一无二的。 因此，很难根据单一指标来标记网站的响应能力“好”或“差”。 但这正是 INP 想要实现的目标。

Google 有一个简单的图表来确定您的网站的 INP 分数是好还是差：

• 良好的响应能力： INP 分数低于200 毫秒。
• 需要改进： INP 分数在200 到 500 毫秒之间。
• 响应能力差： INP 分数高于500 毫秒。

如前所述，INP 考虑分布在桌面和移动设备上的所有记录页面加载的第 75 个百分位。

如何测量 INP

您可以在现场（来自实际用户的数据）和实验室（来自速度测试工具的数据）测量 INP。

现场测量 INP

现场衡量 INP 的方法有两种：Chrome 用户体验报告 (CrUX) 和真实用户监控 (RUM)。

CrUX 数据是从选择加入的 Chrome 浏览器用户收集的。如果您的网站符合 CrUX 评估的条件，您可以使用 Google 的 PageSpeed Insights 速度测试工具来测量其 INP。

谷歌使用 CrUX 作为其官方数据集来评估其 Core Web Vitals 计划的网站。 但是，如果您的网站由于某种原因（主要是访问者很少）不符合 CrUX 的资格，那么您需要通过向网站添加代码来收集自己的现场数据。 然后，您可以将此字段数据提供给 RUM 提供商以进行更深入的分析。

对于大多数网站来说，PageSpeed Insights 是一个足够好的工具来衡量 INP 和所有相关的 Core Web Vitals 指标。

但是，CrUX 不会向您提供有关其结果的详细信息。 如果您想进一步了解和改进指标，建议投资 RUM 解决方案。 介绍如何使用这些工具超出了本文的范围。 您可以查看 Datadog 和 New Relic，这是两种流行的免费 RUM 解决方案。

注意：测量 INP 时，您可能会发现现场数据和实验室数据之间存在明显差异。 理想情况下，您应该从现场收集指标，因为这可以让您衡量实际用户体验。 然后您可以使用此数据进一步优化您的 INP。 我们将在后面的部分中介绍这一点。

在没有现场数据的情况下测量 INP

您无法在实验室中测量 INP，但如果您由于某种原因无法测量现场数据（有资格参加 CrUX 的网站访问者很少，或者您没有足够的资源来投资 RUM），您仍然可以通过以下方式提高潜在的 INP 分数：发现实验室中的互动缓慢。

注意：如上所述，在实验室中测量 INP 是不可能的。 以下建议仅让您粗略了解实际 INP 指标。 您不能依靠实验室测量来预测 INP 等现场指标，因为它们不能模拟真实用户如何准确地使用您的网站。

Web Vitals Chrome 浏览器扩展程序是测试用户交互延迟的最简单方法。 启用后，测试您网站的典型交互。 该扩展会将每次交互的详细诊断信息输出到控制台。

安装扩展程序后，您需要识别网页上的常见用户交互流，并单独测试这些交互的响应能力。 例如，提交表单或将商品添加到购物车。 您可以按照 web.dev 的分步说明开始操作。 这不是一个完美的解决方法，但在缺乏现场数据的情况下，它是一个很好的选择。

另一种选择是测量网站的总阻塞时间 (TBT) 指标。 它与 INP 相关性非常好，并且可以暗示您可以关注的互动。 Lighthouse 和 PageSpeed Insights 是衡量页面 TBT 的两个出色工具。

但是，请记住，TBT 不会测量页面加载后的缓慢交互。

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

提高网站 INP 的第一步是确定其最慢的交互。 前面的部分重点介绍了如何收集现场数据来诊断网站最慢的交互。

一旦你明白了这一点，你就可以在实验室中分析这些缓慢的相互作用并找到合适的解决方案。

每个用户交互都包含三个阶段。 您可以单独查看这些阶段，以找出如何优化整体交互延迟。

1. 输入延迟：这在用户发起交互时开始，在交互的事件回调开始运行时结束。
2. 处理时间：事件回调完成所需的时间。
3. 呈现延迟：浏览器通过视觉反馈更新下一帧所花费的时间。

用户交互的每个阶段都会影响最终的交互延迟，从而影响 INP 分数。 了解如何优化每个阶段是加快响应速度的关键。

优化输入延迟

输入延迟是任何用户交互的第一部分。 任何玩电子游戏的人都知道输入延迟是多么令人沮丧。 这同样适用于网站交互。

根据交互的不同，输入延迟可以从几毫秒延长到数百毫秒。 这可能是由于多种原因造成的：繁忙的主线程活动、错误、重叠交互等。

无论出于何种原因，您都必须将输入延迟保持在最低限度，以便事件回调可以尽快开始运行。 以下是减少输入延迟的三种方法：

• 减少页面发挥全部功能所需的资源数量。
• 避免加载大型脚本，因为它们需要浏览器进行占用大量资源的脚本评估，从而阻塞主线程。 考虑将脚本分解为多个块并将它们分散开。
• 在代码中包含尽可能少的 JavaScript。

减少事件回调处理时间

优化 INP 分数的下一部分涉及减少处理交互事件回调所需的时间。

除了优化事件回调的代码之外，您还可以采取一些操作来减少处理时间：

• 不要阻塞主线程。 将长任务（>50 毫秒）分解为较小的任务。
• 如果您要在页面上嵌入某些内容，请避免在不使用时加载它们。 例如，如果用户不打算播放 YouTube 视频，则加载它们的效率很低。

这就是 WP Rocket（最好的 WordPress 性能插件之一）可以提供巨大帮助的地方。 您可以启用“用预览图像替换 YouTube iframe”功能，以用缩略图替换任何 YouTube iframe。

仅当访问者单击缩略图后，iframe 标记才会加载并播放视频。 WP Rocket 的强大功能可以缩短您的加载时间并改善您的核心网络生命力。

• 避免在代码中使用第三方脚本。 对于您使用的第三方脚本，Google 跟踪代码管理器或 Cloudflare Zaraz 等工具可以帮助您简化这些脚本的加载。
• 推迟不必要的任务以稍后异步执行。 您可以使用 WP Rocket 的内置加载 JavaScript 延迟功能来启用此功能。

网页的主线程在浏览器内一次只能处理一项任务。 这些任务可以包括解析 HTML/CSS、渲染页面和运行 JS 代码等活动。 当任务运行很长时间（例如 50 毫秒或更长）时，它将阻止所有其他任务，包括用户交互

在某些情况下，您可能会发现主题或插件会减慢主线程的速度。 由于您对其代码没有太多控制权，因此您可以联系主题或插件作者以找到合适的修复程序。

通过将长任务分解为更小的块，您可以释放主线程来处理高优先级任务，其中包括用户交互。 这会产生一个活泼的网站！

最大限度地减少演示延迟

用户交互的最后一部分是呈现延迟。 这是完成事件回调和使用视觉反馈绘制下一帧之间的时间。

通常，呈现延迟占用用户交互的时间最少。 然而，可以通过多种方式来阻止它。 以下是一些将其保持在最低限度的方法：

• 保持 DOM 大小最小。 页面渲染任务根据 DOM 大小放大或缩小。 对于浏览器来说，为每次用户交互更新大型 DOM 的成本可能会非常高。 此外，较大的 DOM 需要更多时间来渲染页面的第一个状态。 有关更多详细信息，请参阅我们方便的 DOM 大小指南。
• 延迟渲染屏幕外元素。 如果用户在页面加载时看不到大部分页面内容，则延迟渲染屏幕外元素可以加快与屏幕内容的交互。 您可以使用 CSS content-visibility属性轻松实现此目的，而无需添加任何额外的代码或插件。
• 避免使用 JavaScript 渲染 HTML。 浏览器以最佳方式解析和呈现 HTML，以提供最佳的用户体验。 使用 JS 渲染部分 HTML 很好，并且是大多数用户交互不可或缺的一部分。 然而，使用 JS 渲染大块 HTML 会显着影响网站的渲染性能，包括用户交互的呈现延迟。

使用 WP Rocket 提高网站的 INP 分数

WP Rocket 包含许多选项，可以为您的网站提供即时的性能优势。 从自动启用页面缓存和缓存预加载到 GZIP 压缩和电子商务优化，它应用了 80% 的 Web 性能最佳实践，让您的网站在激活后即可快速运行！

除了在激活时应用大多数 Web 性能最佳实践之外，WP Rocket 还提供强大的功能，例如延迟加载、删除未使用的 CSS 和优化 JavaScript。

最重要的是，您可以使用 WP Rocket 的内置功能将 JS 脚本的执行延迟到用户交互为止。 这减少了初始页面加载时间并提高了交互性。 它还会影响核心网络生命指标，例如最大内容绘制 (LCP)、首次输入延迟 (FID) 以及即将到来的下次绘制交互 (INP)。

包起来

随着 INP 于 2024 年 3 月取代 FID 成为核心 Web 重要指标，您的网站处理用户交互的方式可能对其 SEO 产生重大影响。

如果您有一个高度互动的网站，优化网站的 INP 似乎是一个永无休止的过程。 总是还有一种交互需要优化。 添加新功能只会进一步增加负担。 然而，你必须从某个地方开始。 希望这篇文章能让您迈出正确的一步。

更好的 INP 分数也意味着更好的用户体验，这是值得所有时间和精力的！