研究INP问题 (#博客文章)
内容提要
最近我在做客户性能工作，发现Next.js项目的有机搜索排名下降。修复明显问题后，仍然需要解决INP问题。通过Web-vitals Chrome扩展的控制台记录功能，可以更好地测量和解决慢交互问题。
延伸解读
INP 为何成为性能瓶颈
文章指出，该 Next.js 项目采用 JS 重的技术栈，包含大量库、大型水合数据块以及在 React 中使用 SVG，这些因素共同导致 INP 指标不佳。INP 关注真实用户交互的响应速度，而复杂的 JavaScript 执行会延长主线程占用时间，使得交互延迟。因此，在修复明显问题后，INP 仍是主要障碍，需要针对性优化。
利用 Chrome 扩展控制台日志定位慢交互
作者发现，Web-vitals Chrome 扩展的“控制台日志”功能可以直接在浏览器控制台输出性能指标和交互详情，包括用户交互目标、类型等。这比打开扩展界面更便捷，尤其适合在需要反复操作以测量 INP 的场景下使用。通过实时日志，开发者能快速识别哪些交互导致了延迟，从而缩小排查范围。
web-vitals 归因模块提供脚本级洞察
web-vitals.js 新增的归因模块（attribution）能提供更细粒度的数据。通过 onINP 回调，可以获取 processingDuration、长动画帧条目以及具体执行脚本的信息，如脚本 URL、函数名和调用类型。这有助于定位是哪个脚本或函数导致了交互延迟，为优化提供明确方向，而无需依赖猜测。
从测量到修复的实践路径
文章强调，解决 INP 不能仅靠 Lighthouse，必须测量真实交互。作者计划先通过手动操作结合扩展日志来发现性能问题，并考虑后续设置 RUM 监控。这种从手动探查到持续监控的路径，适合在修复初期快速验证，但最终可能需要 RUM 来覆盖更广泛的用户场景，确保优化效果。
Q&A
INP问题是什么？
INP是一个新的性能指标，主要用于衡量用户交互的响应时间，尤其是在使用重JavaScript技术栈的网站上。
如何使用Web-vitals Chrome扩展来解决慢交互问题？
可以通过Web-vitals Chrome扩展的控制台记录功能，实时测量和记录用户交互的性能指标，从而更好地解决慢交互问题。
为什么Next.js项目的有机搜索排名下降？
Next.js项目的有机搜索排名下降是因为INP问题影响了用户交互的响应时间，尽管修复了一些明显问题，但仍需解决INP。
如何监控当前项目中的性能问题？
可以通过RUM（真实用户监控）来监控当前项目中的实际性能问题，帮助识别性能瓶颈。
Web-vitals.js的新归因模块有什么作用？
Web-vitals.js的新归因模块可以记录交互的详细信息，包括交互的目标、类型和性能指标，帮助开发者分析性能问题。
修复INP问题后有什么计划？
修复INP问题后，计划报告进展，以便跟踪性能改善的效果。
