Interaction to Next Paint（INP）是谷歌 Core Web Vitals 中最新增加的一项指标，对 WordPress 网站所有者来说非常重要。这是另一项衡量网站用户体验质量的指标，同时也会影响网站的搜索引擎优化。
INP 跟踪网站对用户输入的响应速度，例如，访问者点击按钮后多久就能看到效果。反应速度越快越好，这一点可能不足为奇。
为了帮助您了解如何在 Core Web Vitals 的这一部分中取得好成绩，就像最大内容绘制、累积布局偏移和首次输入延迟一样，我们为您准备了一份关于如何针对 WordPress 优化 INP 的详细指南。在本文中，我们将向您介绍什么是 INP、为什么要关注它、如何测量 INP，以及最重要的，如何改进它。
什么是 INP？
INP (即 Interaction to Next Paint) 是一个性能指标，对于网络开发人员来说正变得越来越重要。到 2024 年 3 月，它将取代首次输入延迟 (FID)，成为 Google Core Web Vitals 的一部分。
INP 从用户与网页的第一次交互开始进行测量。例如，交互就是鼠标点击或按键。测量一直持续到网页对该输入做出视觉响应为止。因此，INP 比 FID 更能全面地衡量网站的响应能力。
这两个指标的主要区别在于测量的范围和深度。FID 量化了从第一次用户交互到浏览器开始处理请求的延迟时间。INP 则更进一步。首先，它从访问者的角度测量了从用户交互到下一次页面更新的整个过程。这包括输入延迟、处理时间和展示延迟的整个周期。
图片来源：web.dev
此外，INP 观察用户访问页面整个过程中所有合格交互的延迟，而不仅仅是第一个交互。该指标报告最差的 2% 的用户界面响应，重点关注最慢的响应时间。这种方法确保了 INP 能够最真实地反映页面最差情况下的用户体验。
为什么 INP 很重要？
INP 对于了解和改善网站的用户体验至关重要。它是比 FID 更可靠的整体响应性指标。良好的 INP 值表示对用户交互的快速视觉响应。然而，如果得分较低，则会导致用户体验令人沮丧。
INP 的重要性还在于它对搜索引擎优化排名的影响。通过将 INP 纳入核心网站生命周期指标，谷歌强调了用户体验在网站性能中的重要性。在用户互动后表现出更快视觉反馈的网站很可能在搜索排名中获得青睐。但这也意味着相反的情况：有明显延迟的网站可能会对其排名产生负面影响。
哪些因素影响 INP 表现？
与网页对用户交互的响应速度有关的各种因素都会影响 INP 指标。您可以将这些因素大致分为三个阶段：输入延迟、处理时间和呈现延迟。
- 输入延迟：这一阶段主要受 JavaScript 中所谓的长任务影响。如果用户交互发生时浏览器已处于繁忙状态，它就必须在处理交互之前完成任务，从而导致明显的延迟。
- 处理时间：这一阶段包括浏览器响应用户输入所需的时间。这一阶段的延迟通常会导致挫败感，有时表现为“愤怒点击（rage clicks）”，即由于缺乏即时反馈，访问者会重复点击同一页面元素。
- 演示延迟：最后一个阶段是从事件回调完成到浏览器能够呈现下一帧交互结果的时间。
造成高 INP 的主要因素
在整个 INP 测量期间，有多种因素会导致延迟，包括
- 当 JavaScript 任务超过 50 毫秒时，它们被视为长任务。这些任务会阻塞主线程，延迟浏览器处理用户下一次交互的能力。
- 当交互处理完毕后，浏览器必须呈现下一帧以反映变化。如果网页较大或复杂，或存在布局混乱（浏览器过度重新计算样式和布局）等问题，就会延迟下一帧的呈现。
- 需要大量资源加载和交互的网页可能会出现 INP 延迟。这包括带有大图片、视频或大量使用 CSS 和 JavaScript 的页面。
- 使用第三方脚本和工具（如跟踪和分析脚本）会增加加载和处理时间，影响页面的响应速度。
- 缓慢的网络连接或高延迟也会产生影响。
如何测量 INP？
要了解和改进 WordPress 网站的交互性和响应性，关键在于测量 “下一步的交互”（INP）。值得庆幸的是，有几种工具可以帮助您了解网站在此方面的表现：
- PageSpeed Insights– 您可能对它不陌生。输入页面 URL 后，您会收到一份详细报告，其中包括您的 INP 值。
- Chrome DevTools： 浏览器开发工具默认内置在 Chrome 浏览器中，可提供 INP 的详细明细，包括输入延迟、处理时间和呈现延迟。
- SpeedVitals Core Web Vitals Checker：该工具提供的 Core Web Vitals Checker 可测量包括 INP 在内的各种性能指标。它通过 Chrome 用户体验报告 (CrUX) API 提供来自真实用户的现场数据。
- Lighthouse：Lighthouse 是 Chrome DevTools 中的另一款工具，可用于深入分析网站性能。
上述大多数解决方案只是简单地显示 INP 分数，以便于访问。
测量时，必须同时考虑实验室数据（在受控环境中进行的合成测试）和现场数据（来自用户的真实性能数据）。
这种综合方法可以让您更清楚地了解网站在不同场景和用户体验下的 INP 性能。
INP 得分多少才算好？
Chrome 浏览器团队为确定良好的 INP 得分提供了明确的基准。这些指南将 INP 分数分为三个不同的范围，以显示网页的响应能力水平。
图片来源：web.dev
如上图所示，INP 为 200 毫秒或更短是理想状态。如果 INP 在 200 至 500 毫秒之间，则表示还有提升空间。任何高于 500 毫秒的 INP 分数都被标记为差。
这些分数是对用户访问页面的整个生命周期进行评估后得出的，其中考虑了所有的点击、敲击和键盘交互。同样，INP 指标侧重于最差（或最慢）的交互，以便对页面的交互性进行真实的衡量。
如何提高 WordPress 网站的 INP
改进网站 INP 表现涉及几个关键策略，这些策略可以优化 WordPress 网站响应用户输入的速度和效率。现在让我们花点时间来看看这些策略，并提供有效实施这些策略的技巧。
提高总体性能
有时，您可以通过完成基本的网站改进任务来大大提高 INP。在进行更复杂的工作之前，请确保完成以下工作：
- 选择可靠高效的托管服务：这有助于确保更快地交付网站资源，提高 INP。
- 谨慎选择主题和插件：您选择的主题和插件应有助于提高网站的速度和效率，而不是降低网站的速度和效率。
- 尽可能减少网站上的插件数量：插件越少，加载的代码就越少。此外，定期更新网站及其插件，以保持最佳性能。
- 使用缓存策略并压缩数据：这将加快加载过程，改善用户体验。
- 使用 CDN：使用内容交付网络（CDN）可加快文件交付并缩短加载时间。
优化主线程可用性
主线程就是浏览器的工作管道。渲染和运行网站的所有必要流程都要经过它。
因此，它对于处理用户交互至关重要，为此优化其可用性至关重要。下面是一些相关策略：
- 拆分大型任务：将大型 JavaScript 任务分解成较小的、易于管理的块。这样可以防止单个任务长时间阻塞主线程，从而更快地处理用户交互。使用 setTimeout 或 requestIdleCallback 等技术可以有效地在空闲时段调度任务，从而减少输入延迟。
- 避免 Thrashing：当你的代码反复迫使浏览器重新计算样式或布局时，通常会在一个循环中发生迭代。尽量减少 DOM 操作和样式重新计算的次数，以避免出现故障。批量进行 DOM 读写操作，以减少回流和重绘周期。
(附注：如果您不太明白上述内容的意思，最好还是与开发人员讨论一下。）
添加懒加载
实施懒加载可大大提高性能。它可以在页面加载时延迟加载非关键资源，如在用户访问过程中不需要的图片或脚本。
这样可以减少主线程的初始负载，使其能够更高效地处理用户交互。
优化或删除 JavaScript
JavaScript 的执行会严重影响 INP。要优化 JavaScript
- 删除不必要的代码：网站上不再存在的任何东西都无法阻止它。因此，请花时间删除不使用的 JavaScript 和 CSS，以提高 INP 和整体性能。
- 最小化 JavaScript 文件：通过删除不必要的格式和注释来减小 JavaScript 文件的大小，这样可以加快加载速度，从而更快地释放主线程。
- 使用高效代码：优化 JavaScript 代码以提高性能。避免不必要的计算和长时间运行的任务。
- 推迟非关键 JavaScript：异步加载非关键脚本，或将其加载推迟到主要内容呈现之后。前面提到的分析脚本就是很好的例子。
查找速度变慢的根本原因
找出速度变慢的根本原因是有效优化的关键。使用 Google 的 Lighthouse 或 PageSpeed Insights 等工具对网站性能进行详细分析。它们可以帮助找出需要改进的具体方面，如 DOM 大或脚本执行效率低。
有助于提高 INP 的 WordPress 插件
以上是提高网站 INP 分数的一般技巧，可为您带来反应更灵敏、用户更友好的网站体验。要具体提高 WordPress 的 “Interaction to Next Paint”（INP），您还可以试试这些有用的插件：
- WPTurbo：借助该插件的 CDN+OSS ，及 WP 瘦身、预加载和懒加载等功能来实现 WordPress 网站加速。
- WP Rocket：WP Rocket 因其缓存功能而闻名，还提供代码优化、文件最小化和数据库优化功能。
- Flying Scripts：该插件可以将非关键脚本的执行时间延迟到用户不需要完成任务的时候。
- NitroPack：该插件为 WooCommerce、服务器级缓存和生成关键 CSS 提供高级选项。对于不太熟悉技术优化的用户来说，它非常方便。
- Asset CleanUp：这是另一个很好的选择，可对 Javascript 进行最小化、延迟脚本并执行一系列其他优化任务。
- WP-Optimize：该插件集数据库清理、图像压缩和缓存功能于一身。它的数据库优化功能尤其有用。
- Perfmatters：虽然 Perfmatters 与 WP Rocket 这样的一体化工具配合使用效果最佳，但它能高效处理许多较小的性能任务，是其他插件的良好补充。
- W3 Total Cache：W3 Total Cache 提供一系列缓存方法，是一款技术性更强的插件，可对各种优化方面进行详细控制。
- Autoptimize：处理图像优化和最小化等基本问题。将其与缓存插件搭配使用可获得最佳效果。
小结
Interaction to Next Paint (INP) 是核心网站生命力的一个超级重要方面，代表了网页的响应速度。
它的意义在于创造快速、引人入胜的在线体验，这是每个人都看重的。通过使用本文讨论的方法优化 INP，您的网站可以在提升用户体验、搜索排名和整体性能方面大有裨益。这不仅仅是一个技术调整的问题。这也是确保为受众提供愉快、流畅体验的一种方法。
但请记住，INP 的优化是一个持续的过程，需要根据用户交互模式和网站更新进行定期监控和调整。这不是一件一劳永逸的事情，但上述步骤应该能让你的网站达到一个良好的状态。
您对改进 WordPress 网站的 INP 得分有其他见解或技巧吗？欢迎在下面分享您的经验。
评论留言