我有一个静态网站，我的移动端 INP 在 200-300 范围内，刚好在“需要改进”类别中。我尝试使用 web-vitals.js 进行调试，以找出延迟的来源。在缩小交互来源范围后，我最终构建了一个超小的概念验证。当我在 Chrome 中单击移动端按钮时，以下代码会导致 248 毫秒的延迟：
<!-- test.html -->
<!DOCTYPE html>
<html lang="en">
<body>
<button>Share</button>
</body>
</html>
页面上没有运行 CSS、Javascript 或任何其他脚本，但我仍然看到延迟高达 240 毫秒。我正在使用 Chrome 的“性能”选项卡来测量结果。有什么改进建议吗？
正如评论中所讨论的，如果您没有设置元视口（或将其设置为缩小），则移动设备会假定您的网站没有响应，并启用特殊的“双击缩放”模式。
它最多会给出 300 毫秒的时间来判断您是否会再次点击。这会严重影响 INP，因为它超过了 200 毫秒的良好阈值！
告诉设备您有一个响应迅速、适合移动设备的网站将禁用此功能并避免出现此问题。
另请参阅：developer.chrome.com/blog/300ms-tap-delay-gone-away