Google报告INP超300，但实测及工具检测均低于100，原因何在？

一、排查Google报告的采样维度差异 #

• 确认Google报告的数据时间范围：Google的INP数据基于过去28天的真实用户行为，可能包含你未覆盖的边缘场景——比如性能极低的用户设备、特定旧版浏览器、弱网/高延迟网络环境。
• 查看交互类型细分数据：检查Google报告中不同交互（点击、输入、滑动）的分位数统计，确认是否是某类连续交互（比如快速滑动、长文本连续输入）拖高了整体值，而你实测仅关注了单次点击。
• 核对用户群体特征：某些地区的网络波动、运营商资源劫持可能导致页面资源加载延迟，进而影响交互响应，这类场景在本地测试难以复现。

二、复现真实用户的复杂交互场景 #

• 模拟连续高频交互：真实用户可能快速连续点击按钮、在输入框中快速打字，这种情况下浏览器任务队列会积压，INP会被拉高。尝试1秒内连续点击同一按钮3-5次，或在输入框快速输入长文本，观察INP变化。
• 引入后台资源竞争：在交互发生时，页面可能正在加载广告、第三方脚本、图片等资源，抢占主线程。测试时可同时触发资源加载（如刷新页面后立即点击按钮），或用Chrome DevTools模拟Slow 3G/4G网络，同时执行交互。
• 模拟低性能设备环境：Google的真实用户数据包含大量低端安卓设备或旧版浏览器，这类设备主线程处理能力弱，简单交互也可能产生高INP。用Chrome DevTools的Performance面板设置CPU节流（如4x减速），模拟低端设备性能。

三、优化工具测试方式 #

• 导入真实用户RUM数据：如果页面集成了RUM工具，可在Chrome DevTools中导入真实用户的性能数据，定位具体的高INP交互事件。
• 启用INP现场调试：在Chrome DevTools的Performance面板勾选“Interaction”选项，录制完整交互流程，查看交互触发后主线程的任务执行情况，排查是否有超过50ms的长任务阻塞渲染。
• 用Web Vitals扩展记录真实场景：安装Chrome的Web Vitals扩展，在日常浏览页面时自动记录INP数据，模拟真实用户的使用路径，捕捉测试工具未覆盖的场景。

四、代码层面的排查方向 #

• 检查第三方脚本的影响：广告、分析工具、聊天插件等第三方脚本可能在后台执行长任务，恰好抢占用户交互时的主线程资源。临时移除第三方脚本后重新测试，确认是否是第三方代码导致的问题。
• 分析事件监听器执行逻辑：查看click、input等交互事件的处理函数，是否存在同步执行的复杂操作（如大量DOM修改、重型数据计算、同步网络请求），这类操作会阻塞主线程，推高INP。
• 校验防抖/节流实现：如果交互事件使用了防抖，但防抖时间设置不合理，可能导致用户多次交互后，延迟任务集中触发，拉高INP。

内容的提问来源于stack exchange，提问作者John Smith