使用 INP 重新定义 Web 性能标准

介绍

网络性能不再是技术细节，而是用户体验互联网方式的游戏规则改变者。 核心网络生命体上的最新成员是与下一个绘制的交互（INP）。这个新指标弥补了衡量网页响应速度的差距，有望成为交互延迟的最终衡量标准，它实际上可以取代首次输入延迟（FID）。

我们将深入探讨INP的含义、为什么您应该关心它、如何衡量INP，以及一些您可以立即应用来推动改进的可行技巧.

什么是INP？

那么，什么是INP？简而言之，它测量从用户与网站交互（例如单击按钮或在表单中键入）到屏幕上弹出下一个视觉更新所花费的时间。这里的想法是捕捉用户在访问网站时实际感受到的延迟。

与仅查看浏览器响应用户输入所需时间的FID不同，INP 的视野更广阔。它检查整个过程，从最初的延迟到视觉响应，从而更全面地了解网站的响应能力。

为什么 INP 很重要？

1、用户体验

让我们面对现实：当我们与网站交互时，我们希望事情能够快速发生。如果有明显的滞后，那就令人沮丧。高延迟可能会导致用户不满意、参与度降低，甚至完全放弃网站。

2. 整体响应

FID仅显示了谜题的一部分：浏览器主线程有多繁忙。但这仅仅是开始。 INP 通过测量用户感知的总延迟来填补空白，使其比 FID 更可靠地衡量响应能力。

3. 面向未来的指标

Google 将把 INP 集成到其排名算法中，因此现在掌握 INP 可以让您在以后的搜索排名中处于领先地位。

如何测量 INP？

要测量单个页面浏览量的 INP，请执行以下操作：

1. 跟踪会话期间的所有用户交互 - 单击、敲击和按键。
2. 注意每次交互在屏幕上产生视觉更新所需的时间。
3. 该页面的 INP 分数基于您测量的最长交互延迟。

通过这种方式，您将看到响应能力的最坏情况，这对于用户感知至关重要。

INP评分指南：

• 良好： INP ≤ 200ms
• 需要改进： 200ms
• 差：INP> 500 毫秒

诊断和改善 INP

现在我们知道了什么是INP，让我们讨论如何让它变得更好！以下是一些优化处理用户交互的不同阶段的策略：

1. 减少输入延迟

• 审核您的主线程：使用 Chrome DevTools 等工具来发现阻塞主线程的任务，并将其分解为更小的、可管理的块。
• 优化 JavaScript： 清理代码 — 最小化、压缩和消除任何未使用的 JavaScript。如果您使用 React 等工具，请利用并发渲染来帮助更有效地分配任务。

2. 改进事件处理

• 反跳和限制：对于滚动或调整大小等高频事件，使用技术来限制它们触发其他进程的频率。
• 使用被动事件监听器：通过应用被动监听器提高触摸和滚动事件的性能。

3.优化绘画

• 减少布局转换：尽可能避免更改 DOM，并始终使用 CSS 过渡而不是 JavaScript。
• 专注于优先绘制： 使用 Lighthouse 确定站点的哪些部分需要优先绘制，并专注于这些路径。

4.使用浏览器优化

• 预加载基本资源：提前准备好字体、图像和脚本，以便在用户需要时提供它们。
• 使用 Web Workers： 将繁重的计算推送给 Web Workers，以防止阻塞主线程。

INP 测量工具

要密切关注您的 INP，请考虑使用这些方便的工具：

• Lighthouse：此工具会审核您网站的响应能力，并提供有关如何改进的实用建议。
• Chrome DevTools 性能面板： 分析交互时间线和延迟。
• PageSpeed Insights：为您提供来自现场的实时数据以测量 INP 并提供改进建议。

结论

INP 或 与下一次绘制的交互，是一种变革性指标，它将 UX 置于 网络性能 领域的首位。它代表您的网站对现实交互的响应程度，使其成为用户满意度和搜索引擎优化的重要因素。通过了解 INP 并制定策略来增强它，您不仅可以跟上不断发展的性能标准，还可以确保您的用户每次访问您的网站时都能享受无缝、愉快的体验。如果你喜欢这个博客并且想了解更多关于前端开发和软件工程你可以在Dev.to上关注我。

以上是使用 INP 重新定义 Web 性能标准的详细内容。更多信息请关注PHP中文网其他相关文章！