了解如何将现场数据带入实验室，以便通过手动测试重现并找出互动缓慢背后的原因。
发布日期：2023 年 5 月 9 日
优化 Interaction to Next Paint (INP) 时，最具挑战性的部分是找出导致 INP 较低的原因。导致此问题的潜在原因有很多，例如在主线程上调度许多任务的第三方脚本、DOM 大小过大、开销大的事件回调以及其他罪魁祸首。
提高 INP 可能很困难。首先，您必须了解哪些互动通常会导致网页的 INP。如果您不知道从真实用户的角度来看，您网站上哪些互动往往最慢，请参阅在现场查找运行缓慢的互动。有了实地数据作为指导，您就可以在实验室工具中手动测试这些特定互动，以找出这些互动运行缓慢的原因。
如果没有实地数据，该怎么办？
拥有实地数据至关重要，因为这可以为您节省大量时间，让您不必费心确定哪些互动需要优化。不过，您可能没有实地数据。如果您遇到这种情况，仍然可以找到可以改进的互动，但需要付出更多努力并采用不同的方法。
Total Blocking Time (TBT) 是一个实验室指标，用于评估网页在加载期间的响应能力，并且与 INP 高度相关。如果您的网页具有较高的 TBT，则可能表明您的网页在加载时对用户互动可能没有很好的响应。
如需了解网页的 TBT，您可以使用 Lighthouse。如果网页的 TBT 较高，则主线程在网页加载期间可能会过于繁忙，这可能会影响网页在网页生命周期中这一关键时刻的响应速度。
如需查找网页加载后互动缓慢的问题，您可能需要其他类型的数据，例如您可能已在网站分析中识别到的常见用户流程。例如，如果您在电子商务网站上工作，常见的用户流程就是用户在将商品添加到在线购物车并结账时执行的操作。
无论您是否有现场数据，下一步都是手动测试并重现互动缓慢的问题，因为只有能够重现互动缓慢的问题，您才能解决它。
在实验室中重现互动缓慢的问题
您可以通过多种方式在实验室中通过手动测试重现互动缓慢的问题，但您可以尝试使用以下框架。
开发者工具“性能”面板的实时指标
建议使用 DevTools 性能分析器来诊断已知速度缓慢的互动，但如果您不知道哪些互动存在问题，可能需要一些时间才能找出速度缓慢的互动。
首次打开“效果”面板时，您会看到实时指标视图。您可以先使用此功能快速试用多种互动，找出存在问题的互动，然后再使用更详细的性能分析器。在您互动时，诊断数据会显示在“互动”日志中（其中 INP 互动会突出显示）。您可以展开这些互动，以查看相应阶段的细分数据：