导语：在数字化时代，用户体验的优化已成为技术领域的关键追求。INP，即交互到下一帧（Interaction to Next Paint），是由谷歌在2023年推出的一项创新指标，旨在更精确地衡量用户界面的响应性和流畅度，而且通过其多元化的展示方式，为用户交互延迟的可观测性树立了新的标杆。这一跨越性的进展，为提升用户体验提供了新的视角和工具。

本文以INP为背景，写出一系列获取和采集展示的实践。具体背景：在2023年的谷歌开发者大会上，正式宣布INP在2024年3月将取代FID。来源：web.dev/articles/in…

简介

Interaction to Next Paint (INP) 是最新的网站核心指标，用于评估网站对用户输入的响应能力。良好的响应速度意味着网页可以快速响应用户互动。网页的 INP 越低，就越能更好地响应用户互动。

来源

在用户体验的优化中，响应速度是至关重要的。传统上，开发者通过监控长任务（Long Tasks）来评估网站对用户输入的响应能力。长任务是那些执行时间超过50毫秒的任务，它们可能阻塞主线程，从而延迟网页对用户互动的响应。通过使用PerformanceObserver API，开发者能够捕获这些可能影响用户体验的事件。

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('long-task')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'long-task', buffered: true});

然而，仅监控长任务并不足以全面评估用户体验。这种方法虽然能够识别出可能导致用户体验不佳的问题点，但它无法准确量化这些问题对用户互动响应的具体影响。在2023年上海站的谷歌开发者大会上，问了Jeremy Wagner一个问题，如何量化和评估页面长任务的数量和时长，当时他回复了TBT。

TBT测量的是在首次内容绘制（FCP）之后，主线程被阻塞的总时间，其中的阻塞足以阻止输入响应。这为开发者提供了一个量化页面响应能力的有效工具。

总阻塞时间 (TBT) 指标测量在首次内容绘制 (FCP) 之后所用的总时间，其中主线程被阻塞的时间足够长，足以阻止输入响应。

然而单纯使用TBT，存在偏颇，这种方法主要关注于单个任务的时长，但它并未全面地反映用户交互的实际体验。因此，长任务监控虽然重要，但它对于衡量用户体验的完整性和响应速度来说是不够的。然而，这个INP完全不是这样。在2023年谷歌开发者大会上正式提出的，它旨在衡量用户与网页交互后到下一个画面渲染完成的时间，这样的度量更贴近用户实际体验。与传统的长任务监控和TBT相比，INP为开发者提供了一种更综合、更精确的方式来评估和优化网站的用户体验。

谷歌INP的标准

以下内容来自谷歌为了确保提供良好的响应速度体验，不妨衡量一下实际中记录的网页加载第 75 个百分位数（按移动设备和桌面设备细分）：

INP 低于或 200 毫秒表示您的网页具有良好的响应速度。
INP 高于 200 毫秒且低于或等于 500 毫秒表示您的网页响应能力需要改进。
INP 高于 500 毫秒表示您的网页响应速度慢。

以上内容来自谷歌的推荐，然而我个人感觉这个标准还是远远太低了。

个人观点

在谷歌2023年提出的INP指标建议中，它们为网站的响应速度设定了具体的评估标准。按照谷歌的定义，INP低于或等于200毫秒意味着网站具有良好的响应速度，而介于200至500毫秒之间表明响应能力需要改进，超过500毫秒则表示响应速度慢。尽管这些指标为网站性能提供了基准，但在实际应用中，这些标准或许并不充分。

实际数据提供了一个更具体的视角。我们分析了最近15分钟的时序图，发现大部分时间内INP指标保持在良好和待改善的范围内。这表明在多数情况下，用户体验是可接受的。

基本最近6h内，INP都在良好和待改善的范围内。注意这是未聚合的数据，我们看一下最近15分钟的P75的时序图：

但进一步的数据视图，如直方图和蜂窝图，展示了更细致的情况。直方图显示了相当数量的用户交互体验未达到理想标准。特别是蜂窝图，揭示了某些特定页面，例如rum/list页面的INP表现并不理想。这种详细的视图帮助我们更好地理解用户体验的细微差别。

我们还可以以排行榜的形式进行展示最近15分钟用户交互体验不佳的5个页面：

上面我们通过排行榜形式呈现了最近15分钟用户交互体验不佳的前5个页面。这些数据不仅展示了页面性能的具体情况，还为我们提供了优化的方向。

通过这些分析，我们可以看出，虽然谷歌提供了INP的基础标准，但在实际应用中，每个网站或平台都需要结合自身的用户体验数据来进行更深入的评估和优化。"

总结

在本文中，我们深入探讨了谷歌在2023年开发者大会上提出的INP（交互到下一帧的百分比）指标，并详细分析，如何通过多元化的数据展示方式有效地衡量和提升用户体验。我们详细介绍了如何获取和采集INP数据，包括在实际环境中对网页加载的评估，以及如何通过时序图、直方图和蜂窝图形式直观展示用户交互延迟。此外，我们还对特定页面的INP表现进行了分析，揭示了用户交互体验的具体表现和优化空间。

通过这些实践案例，我们可以看到，INP指标不仅为我们提供了一种更精确的用户体验评估工具，也为网站和应用的性能优化指明了方向。尤其值得注意的是，在采用和展示这一指标方面的创新做法，为整个研发领域提供了宝贵的参考和启示。随着技术的不断进步和市场的发展，我们期待看到更多类似的创新应用，共同推动数字化时代的用户体验优化和技术革新。