独立站如何优化INP页面指标?
独立站优化INP页面指标
Interaction to Next Paint (INP) 它是 Core Web Vital主要页面的核心指标。简单来说是客户点击页面交互效果的时间。通过观察页面生命周期内客户与页面互动的延迟,评估页面对用户交互的整体响应。INP值是看到的交互时间。例如,常见的faqs通常是折叠的,点击标题显示更多的内容,从点击标题到完全显示内容,此时就是INP值。
为了提供良好的用户体验,网站 Interaction to Next Paint 尽量不要超过 200 ms。INP 等于或低于 200 ms表示自己的网页有更好的响应时间。假如 INP 处于 200 ms到 500 ms之间,意味着自己的网页响应能力需要提高。INP 超过 500 ms表示网页响应时间慢。根据网站的不同,互动可能很少,或者没有互动,比如基于文字和图片的网页,互动元素很少,或者根本没有。或者对于文本编辑器或游戏等网站,可能会有数百次或上千次的互动。不管是哪种情况,如果是哪种情况, INP 更高,客户体验将面临风险。
为什么IND为何会被INP取代?
FID 考虑到顾客第一次与网页页面互动交流(即点链接、点击图标或者使用 JavaScript 适用自定义控件)到电脑浏览器可以逐步处理程序处理脚本制作,为相对应之间的互动时长。当 INP 在决定全部网页页面互动时,FID 只关注第一次互动交流。除此之外,它只精确测量第一次交互的输入延迟,且不精确测量实际操作事故脚本制作所花费的时间或表明下一帧的延迟时间。因为FID 它也是一个载入响应能力指标,因此可以根据输入延迟来确定网站页面对客户的第一印象。INP 它将考虑整个页面生命期中的所有交流的全部一部分,使之成为比FID 更可靠的总体响应能力指标值。
如何优化INP?
1、减少不必要的沟通交流
有些朋友喜欢为网站增加高大上的互动,但他们不知道这些互动会延长网页加载的速度,有些可能得好几秒才能显示完成,这类用户体验就不友好。在企业网站制作初期,最开始交流与沟通要求,考虑功效优点和缺点,随后再决定是否做,如何做得更好。
2、代码精简
有些互动可能是通过使用jquery插件和编写一些代码来实现的。假如代码冗余,往往会减少特点。现在一些前端框架不使用jquery,比如bootstrap 5,许多效果可以通过添加class来实现,从而避免了撰写Javascript程序代码全过程。这些开源框架应用的人很多,他们会根据PR改进issues,逐步改进产品。
本文针对INP优化,提供了减少互动延迟和代码精简两个关键方法,帮助卖家提供更好的用户体验和快速响应时间。如果是想改善网页性能,减少互动等待时间,不容错过本文的实用技巧和优化指南。