目录
- 衡量网页响应能力的重要性
- 与下一次喷涂的交互 （INP） 与首次输入延迟 （FID）：有什么区别？
- 什么是 Interaction to Next Paint （INP）？
- INP 是如何计算的？
- 什么是好的 INP 分数？
- 如何测量 INP
- 如何优化与下一个绘制的交互 （INP）
- 结束语
与 Next Paint 交互 （INP） 是一个网页响应能力指标，用于衡量页面上所有用户交互的延迟。优化网站的 INP 指标在其速度、用户体验和 SEO 中起着至关重要的作用。
Google 于 2022 年宣布作为一项实验性指标，以解决首次输入延迟 （FID） 指标的许多限制，并于 2024 年 3 月决定取代 FID 作为核心 Web 重要指标。
这篇文章将探讨 INP 的基础知识、为什么它会取代 FID，以及如何衡量和改进网站的 INP 指标。
衡量网页响应能力的重要性
没有人喜欢慢的网站（包括 Google！)，没有什么比缓慢的网站更能使用户离开您的网站了。
像 Largest Contentful Paint （LCP） 这样的指标是页面加载速度的一个很好的指标——这就是为什么它是一个 Core Web Vitals 指标。
但是，在页面加载并且用户继续停留后会发生什么？LCP 不衡量页面的交互性。根据 Google 的说法，用户在页面加载后将 90% 的时间花费在页面上。因此，在页面的整个生命周期（从打开到关闭）中衡量页面响应能力至关重要。
页面加载速度快但响应能力差的网站仍然是一个缓慢的网站，结果是用户体验不佳。例如，需要很长时间才能打开移动导航菜单或更新在线购物车中的商品。
这就是衡量网页响应能力的用武之地。响应能力好的 Web 站点可以快速响应用户交互。而这种回应必须以视觉反馈的形式出现。
即使对于需要较长时间的复杂交互，向用户提供一些视觉提示（例如加载动画）对于保持出色的用户体验也非常重要。
与下一次喷涂的交互 （INP） 与首次输入延迟 （FID）：有什么区别？
衡量网页的用户体验是相当棘手的。您可以使用总阻塞时间 （TBT） 和交互时间 （TTI） 等指标来了解页面的响应能力，但它们并不表示实际的用户体验。
例如，一个页面可以具有快速的 TBT 或 TTI，但由于用户与它的交互方式，他们仍然会感到迟钝。反之亦然。
输入 FID — 它直接衡量用户在网页上的首次交互。具体来说，它衡量的是现场的真实用户体验。
首次输入延迟 （FID） 限制
顾名思义，FID 仅测量浏览器对 “first input” 响应的 “延迟”。
简而言之，它是一个页面加载响应能力指标 — JavaScript 代码加载和执行的速度 — 而不是运行时响应能力指标 — 页面在页面加载后响应用户交互的速度。
虽然第一印象很重要，但它们不一定能提供完整的画面！FID 改进了我们衡量网页响应能力的方式，但它并不能准确衡量用户与网页的交互方式（从打开网页到关闭网页）。
例如，FID 不会测量在延迟呈现下一帧时运行事件处理程序所花费的时间。
什么是 Interaction to Next Paint （INP）？
INP 衡量页面对用户交互（点击、点击、按键等）的整体响应能力。
一个交互可以包含多个组处理程序。例如，点击手机的触摸屏可以在页面的后台启动一系列事件。无论哪种方式，INP 都是页面从用户开始交互到浏览器显示带有视觉反馈的下一帧的最长延迟。
与 FID 不同，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。
Google 使用 CrUX 作为其官方数据集来评估其 Core Web Vitals 计划的网站。但是，如果您的网站由于某种原因（主要是访问者很少）不符合 CrUX 的条件，那么您需要通过向网站添加代码来收集自己的字段数据。然后，您可以将此字段数据提供给 RUM 提供商以进行更深入的分析。
对于大多数网站来说，PageSpeed Insights 是衡量 INP 和所有相关 Core Web Vitals 指标的足够好的工具。
但是，CrUX 不会为您提供有关其结果的详细信息。如果您想进一步了解和改进您的指标，建议投资 RUM 解决方案。介绍如何使用这些工具超出了本文的范围。您可以查看 DebugBear RUM、Datadog 和 New Relic，它们是一些流行的免费 RUM 解决方案。
注意：在测量 INP 时，您可能会发现现场和实验室的数据之间存在明显差异。理想情况下，您应该从现场收集指标，因为这可以衡量实际用户体验。然后，您可以使用这些数据进一步优化您的 INP。我们将在后面的部分中介绍这一点。
在没有现场数据的情况下测量 INP
您无法在实验室中测量 INP，但如果由于某种原因（有资格获得 CrUX 的网站访问者很少，或者您没有足够的资源来投资 RUM）而无法测量现场数据，您仍然可以通过在实验室中发现缓慢的交互来提高潜在的 INP 分数。
注意： 如上所述，在实验室中测量 INP 是不可能的。以下建议仅为您提供实际 INP 指标的粗略图片。您不能依靠实验室测量来预测 INP 等现场指标，因为它们无法模拟真实用户如何准确使用您的网站。
Web Vitals Chrome 浏览器扩展程序是测试用户交互延迟的最简单方法。启用后，测试您网站的典型交互。该扩展会将每次交互的详细诊断信息输出到控制台。
安装扩展后，您需要确定网页上的常见用户交互流，并单独测试这些交互的响应能力。例如，提交表单或将商品添加到购物车。您可以按照 web.dev 的分步说明开始使用。这不是一个完美的解决方法，但在没有现场数据的情况下，这是一个很好的选择。
另一种选择是衡量您网站的总阻塞时间 （TBT） 指标。它与 INP 非常相关，并且可以暗示您可以关注的交互。衡量页面 TBT 的两个很棒的工具是 Lighthouse 和 PageSpeed Insights。
但是，请记住，TBT 不会衡量页面加载后缓慢的交互。
如何优化与下一个绘制的交互 （INP）
提高网站 INP 的第一步是确定其最慢的交互。前面的部分重点介绍了如何收集字段数据以诊断网站最慢的交互。
一旦你掌握了这一点，你就可以在实验室中分析这些缓慢的相互作用并找到合适的解决方案。
每个用户交互都由三个阶段组成。您可以单独查看这些阶段，以了解如何优化整体交互延迟。
- 输入延迟：此操作从用户发起交互时开始，到交互的事件回调开始运行时结束。
- 审批时间：事件回调完成所花费的时间。
- 演示延迟：浏览器使用视觉反馈更新下一帧所花费的时间。
用户交互的每个阶段都会影响最终的交互延迟，从而影响 INP 分数。了解如何优化每个阶段是加快响应速度的关键。
优化 Input Delay
输入延迟是任何用户交互的第一部分。任何玩电子游戏的人都知道任何输入延迟是多么令人沮丧。这同样适用于网站交互。
根据交互，输入延迟可以从几毫秒到几百毫秒不等。这可能是由于多种原因造成的：繁忙的主线程活动、错误、重叠的交互等。
无论出于何种原因，您都必须将 input delay 保持在最低限度，以便事件回调可以尽快开始运行。以下是减少输入延迟的三种方法：
- 减少页面实现完全功能所需的资源数量。
- 避免加载大型脚本，因为它们需要浏览器对大量资源进行脚本评估，从而阻塞主线程。考虑将脚本分解为多个块并将它们分散开来。
- 在代码中包含尽可能少的 JavaScript。
减少事件回调处理时间
优化 INP 分数的下一部分涉及减少处理交互事件回调所花费的时间。
除了优化事件回调的代码外，您还可以采取一些措施来减少处理时间：
- 不要阻塞主线程。将较长的任务 （>50 毫秒） 分解为较小的任务。
- 如果要在页面上嵌入某些内容，请避免在不使用时加载它们。例如，如果用户不打算播放 YouTube 视频，则加载 YouTube 视频的效率会降低。
这就是 WP Rocket 的最佳 WordPress 性能插件之一可以提供巨大帮助的地方。您可以启用其 用预览图像替换 YouTube iframe 功能，将任何 YouTube iframe 替换为缩略图。
iframe 标记仅在访客单击缩略图后加载和播放视频。WP Rocket 的强大功能可以增加您的加载时间并改善您的 Core Web Vitals。
- 避免在代码中使用第三方脚本。对于您确实使用的第三方脚本，Google Tag Manager 或 Cloudflare Zaraz 等工具可以帮助您简化这些脚本的加载。
- 将不必要的任务推迟到以后异步执行。您可以使用 WP Rocket 的内置 Load JavaScript deferred 功能启用此功能。
网页的主线程在浏览器中一次只能处理一个任务。这些任务可以包括解析 HTML/CSS、呈现页面和运行 JS 代码等活动。当任务运行时间较长（比如 50 毫秒或更长时间）时，它将阻止所有其他任务，包括用户交互
在某些情况下，您可能会发现主题或插件会减慢您的主线程速度。由于您对其代码没有太多控制权，因此您可以联系主题或插件作者以找到合适的修复程序。
通过将长任务分解为较小的块，您可以释放主线程来处理高优先级任务，包括用户交互。这会导致网站活泼！
最小化演示延迟
用户交互的最后一部分是呈现延迟。这是完成事件回调和使用视觉反馈绘制下一帧之间的时间。
通常，演示延迟占用的用户交互时间最少。但是，可以通过多种方式阻止它。以下是一些将其保持在最低限度的方法：
- 将 DOM 大小保持在最小。页面渲染任务根据 DOM 大小进行放大或缩小。对于浏览器来说，为每个用户交互更新一个大型 DOM 可能会变得非常昂贵。此外，大型 DOM 需要更多时间来呈现页面的第一个状态。有关更多详细信息，请参阅DOM 大小指南。
- 延迟渲染屏幕外元素。如果页面内容的大部分在页面加载时对用户不可见，则延迟呈现屏幕外元素可以更快地与屏幕上内容交互。您可以使用 CSS content-visibility 属性轻松实现此目的，而无需添加任何额外的代码或插件。
- 避免使用 JavaScript 呈现 HTML。浏览器以最佳方式解析和呈现 HTML，以提供最佳的用户体验。使用 JS 呈现 HTML 的某些部分是可以的，并且是大多数用户交互不可或缺的一部分。但是，使用 JS 渲染大块 HTML 将显著影响您网站的渲染性能，包括用户交互的演示延迟。
结束语
随着 INP 在 2024 年 3 月取代 FID 成为核心 Web 重要指标，您的网站如何处理用户交互会对其 SEO 产生重大影响。
如果您有一个高度交互的网站，优化您网站的 INP 似乎是一个永无止境的过程。总有一个交互需要优化。添加新功能只会进一步增加负担。但是，您必须从某个地方开始。希望本文能让您从正确的角度开始。
更好的 INP 分数也意味着更好的用户体验，这是值得的！
发表回复