Optimización de las interacciones en el sitio web: estrategias clave para mejorar el INP y la experiencia del usuario

什么是Interaction to Next Paint（INP）？

Interaction to Next Paint(INP) ，是一个 Core Web Vitals 指标，用于测量网页响应时间。它在2024年3月取代了之前的首次输入延迟（FID）。了解FID与INP，FID只在网站第一次加载时测量响应速度，而INP则关注整个访问过程中网站对用户操作的响应时间。

INP是一个用来衡量网页如何快速响应用户操作的指标，比如当你点击一个按钮时。它的工作流程是这样的：

1. 用户操作：你在网页上做了一个动作，比如点击一个按钮。
2. 发送请求：你的浏览器向网站的服务器发送请求，要求加载新的内容。
3. 获取内容：服务器处理这个请求，并把新的内容发送回你的浏览器。
4. 显示内容：你的浏览器收到内容后，会在页面上显示出来。
5. 测量时间：浏览器计算从你点击到内容完全显示需要多少时间，并把这个时间作为INP分数报告出来。

为什么INP很重要？

• Mejorar la experiencia del usuario：一个低的INP分数意味着网页反应迅速，用户不需要等待就能看到结果，这让用户体验更加流畅。
• 有助于搜索引擎优化（SEO）：INP是Google评价网站体验的因素之一，影响网站在搜索结果中的排名。一个好的INP分数可以帮助你的网站在搜索结果中排名更高。
• Reducir la tasa de rebote：如果网页响应速度快，用户更可能留在网页上浏览更多内容，而不是因为等待而离开。

INP与其他核心网络指标的区别

INP与其他指标如累积布局转移（CLS）和最大内容绘制（LCP）不同。CLS测量网页内容移动的频率和幅度，而LCP则关注页面最大内容元素加载完成的速度。

如何测量INP？

INP的值是用毫秒（ms）来表示的。理想的INP值应该低于200毫秒，这反映出网站反应非常快。如果INP值在200毫秒到500毫秒之间，说明性能有待提高；超过500毫秒，则认为响应速度较慢，需要进行优化。

什么影响INP值？

INP值，即网站对用户操作响应的速度，可能会受到几个因素的影响：

• 网页的大小和复杂性：更大或更复杂的网页可能需要更长时间来响应用户的操作。
• 加载的JavaScript和CSS文件数量：加载的文件越多，网站响应用户操作的时间可能就越长。

如何测量网站的INP值？

hacer uso deGoogle PageSpeed Insights工具，用于测量INP和其他网站性能指标。这个工具会检查你的网站，并提供改进建议，帮助你按照最佳实践进行优化。它还会显示你的网站在移动设备和桌面电脑上的加载速度。

PageSpeed Insights的结果说明

PageSpeed Insights提供两种类型的结果：

• 实际用户数据：来自真实Chrome用户的数据，显示在报告顶部，帮助你了解你的网站在现实世界中的表现。
• 实验室数据：这部分数据基于控制条件下的测试，提供详细的技术见解和优化建议。

下面的报告显示了相同的指标，但它们来自在 Google Lighthouse 上运行的受控实验室环境。这些数据可用于在发布新功能之前对其进行测试。

如果网站的INP数据不可用，你可以查看总阻塞时间（TBT）。这个指标帮助我们了解网站加载过程中，页面有多少时间是无法响应用户操作的。

在诊断结果部分，你还会找到一些改善网站核心网络指标的建议，这些建议可以帮助你提升网站的用户体验和性能。

如何优化INP

1、优化JavaScript

JavaScript是许多网站的关键部分，负责添加交互功能。然而，如果JavaScript代码执行效率不高，它可能会拖慢网站的响应速度，因为它在浏览器的主线程上运行，这个线程也负责渲染网页。

如何优化JavaScript，加快网站响应速度？

1. 缩小JavaScript文件：通过减小文件大小，可以让JavaScript更快地加载和运行。
2. 启用GZip压缩：这是一种流行的方法，用于减少网站文件的大小，加快数据传输速度。
3. 使用JavaScript框架：框架如AngularJS或jQuery可以帮助你更有效地组织和管理JavaScript代码，提高执行效率。
4. Uso de redes de distribución de contenidos (CDN)：CDN可以从靠近用户的服务器提供JavaScript文件，这样可以大大减少加载时间。

2、使用Web Worker

假如你的网站包含很多图像、视频和数据处理任务，这些都是计算密集型的工作。使用Web Worker，你可以把这些繁重的任务转移到一个后台线程，这样就不会造成网页卡顿或冻结，用户体验更流畅。

如何设置Web Worker？

要使用Web Worker，你需要准备两个JavaScript文件：

1. main.js：这个文件用于启动Web Worker和管理与它的通信。
2. worker.js（Web Worker脚本）：这个文件包含将在后台执行的代码。

以下为main.js的示例：

// main.js
if (window.Worker) {
  // Create a new worker instance
  const myWorker = new Worker('worker-script.js');
  // Send a message to the worker
  myWorker.postMessage('Hello Worker!');
  // Listen for messages from the worker
  myWorker.onmessage = function(e) {
    console.log('Message received from worker', e.data);
  };
} else {
  console.log('Your browser does not support Web Workers.');
}
// main.js
if (window.Worker) {
  // Create a new worker instance
  const myWorker = new Worker('worker-script.js');
  // Send a message to the worker
  myWorker.postMessage('Hello Worker!');
  // Listen for messages from the worker
  myWorker.onmessage = function(e) {
    console.log('Message received from worker', e.data);
  };
} else {
  console.log('Your browser does not support Web Workers.');
}
// main.js
if (window.Worker) {
  // Create a new worker instance
  const myWorker = new Worker('worker-script.js');
  // Send a message to the worker
  myWorker.postMessage('Hello Worker!');
  // Listen for messages from the worker
  myWorker.onmessage = function(e) {
    console.log('Message received from worker', e.data);
  };
} else {
  console.log('Your browser does not support Web Workers.');
}

另一个是worker.js，它包含网络工作者的任务。以下为示例：

// worker.js
onmessage = function(e) {
  console.log('Message received from main script', e.data);
  // Perform heavy computation or data processing here
  // Then send a message back to the main script
  postMessage('Hello Main Script!');
}
// worker.js
onmessage = function(e) {
  console.log('Message received from main script', e.data);
  // Perform heavy computation or data processing here
  // Then send a message back to the main script
  postMessage('Hello Main Script!');
}
// worker.js
onmessage = function(e) {
  console.log('Message received from main script', e.data);
  // Perform heavy computation or data processing here
  // Then send a message back to the main script
  postMessage('Hello Main Script!');
}

要将这些脚本包含在你的网站中，请检查你的特定技术或平台的文档并遵循标准流程。

对于 WordPress 用户，请使用wp_enqueue_script函数将 Web Worker 脚本包含在主题的 Functions.php 文件中。

3、分解长任务

当用户浏览一个充满大量产品数据和图片的电子商务网站时，如果网站的JavaScript任务过于庞大且未经优化，会占用大量资源并拖慢网站。这会导致网页加载缓慢，甚至无法及时响应用户的点击或滚动操作。

为了避免这种情况，我们可以将这些大任务分解成许多小任务，这样浏览器就能更灵活地处理，不会被单个大任务阻塞。

如何分解长任务？

1. 设置超时：使用JavaScript的setTimeout函数，可以将任务推迟到未来某个时间点执行，这样就不会连续占用主线程。
2. 请求空闲回调: UsorequestIdleCallback API，这允许你的任务在浏览器空闲时运行，而不会影响到网页的主要功能。

4、优先考虑输入响应性

确保网页可以迅速响应用户操作是提供良好用户体验的关键。以下是一些技术，可以帮助网站更快地响应用户的输入：

1. 推迟非关键JavaScript：有些JavaScript代码并不需要在页面加载时立即执行，可以将其延后，先处理用户的交互。
2. 节流：控制函数的调用频率。比如在滚动事件中，限制函数每几百毫秒只能执行一次，避免过于频繁的执行拖慢页面响应。
3. 去抖：在事件（如调整窗口大小）频繁触发时，使用去抖技术可以延迟函数的执行，直到事件停止一段时间后再执行。
4. 使用被动事件监听器：对于滚动和点击等事件，标记为被动的事件监听器可以告诉浏览器不必等待事件处理函数执行完成即可继续处理其他任务，从而改善页面的滚动性能和响应性。

5、提供即时反馈

为什么即时反馈重要？

当网站在处理用户请求时，如果没有任何反馈，用户可能会感到不确定，甚至重复提交表单或点击按钮。提供即时反馈不仅可以增强用户体验，还可以给用户一种网站反应迅速的感觉。

即时反馈的一些常见方式包括：

1. 加载指示器：在数据加载或页面跳转时，显示一个旋转的加载图标或进度条，告诉用户过程正在进行中。
2. 确认弹窗：当用户执行特定操作，如添加商品到购物车时，弹出一个消息框确认操作已成功。
3. 表单验证反馈：在用户输入数据时即时校验，如检查电子邮件地址是否符合格式，并在格式错误时立即显示提示信息，避免用户提交后才知道错误。

INP的商业效益

existe《经济时报》的一项研究发现，提高INP能显著减少网站的跳出率——减少了50%。这意味着用户更可能停留在网站上，浏览更多内容。一个低的跳出率通常与更高的用户参与度和满意度相关联，这对任何商业网站来说都是有利的。

Resumen:

INP 是一个重要的性能指标，用于衡量网站对用户操作的响应速度。一个优化良好的INP不仅能提升用户体验，还能提高搜索引擎排名，降低跳出率。

为了优化INP，我们讨论了几种策略，包括优化JavaScript执行，使用Web Worker来处理后台任务，以及分解长任务以避免主线程阻塞。此外，我们还强调了即时反馈的重要性，它可以通过加载指示器、确认弹窗和表单验证反馈等方式，让用户感知到网站是活跃且响应迅速的。