导语：在数字化年代，用户体会的优化已成为技能领域的关键追求。观测云，作为国内首家引进谷歌INP目标的公司，正引领这一革命。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目标保持在杰出和待改善的范围内。这标明在多数状况下，用户体会是可接受的。
上面咱们经过排行榜方式出现了最近15分钟用户交互体会欠安的前5个页面。这些数据不只展现了页面功能的详细状况，还为咱们供给了优化的方向。
经过这些剖析，咱们能够看出，虽然谷歌供给了INP的根底规范，但在实践使用中，每个网站或平台都需求结合本身的用户体会数据来进行更深化的评价和优化。”
总结
在本文中，咱们深化探讨了谷歌在2023年开发者大会上提出的INP（交互到下一帧的百分比）目标，并详细剖析了观测云作为国内首家使用该目标的公司，怎么经过多元化的数据展现办法有用地衡量和提高用户体会。咱们详细介绍了怎么获取和采集INP数据，包含在实践环境中对网页加载的评价，以及怎么经过时序图、直方图和蜂窝图方式直观展现用户交互推迟。此外，咱们还对观测云平台中特定页面的INP表现进行了剖析，提醒了用户交互体会的详细表现和优化空间。
经过这些实践事例，咱们能够看到，INP目标不只为咱们供给了一种更准确的用户体会评价东西，也为网站和使用的功能优化指明晰方向。特别值得注意的是，观测云在采用和展现这一目标方面的创新做法，不只在国内市场中占据了先导地位，更为整个研制领域供给了宝贵的参阅和启示。跟着技能的不断进步和市场的开展，咱们等待看到更多相似的创新使用，共同推进数字化年代的用户体会优化和技能革新。
