什么是inp 如何提升，怎么改进inp的交互
本文主要内容：了解什么是inp，INP延迟由三个部分组成,INP衡量的用户操作行为,INP的评分标准,如何提升，怎么改进inp的交互，2024 年 3 月即将把inp做为排名算法加进去，下面我们一起来了解一下
本文主要内容：了解什么是inp，INP延迟由三个部分组成,INP衡量的用户操作行为,INP的评分标准,如何提升，怎么改进inp的交互，2024 年 3 月即将把inp做为排名算法加进去，下面我们一起来了解一下
Interaction to Next Paint（INP）是一个新的Core Web Vitals指标。通过优化INP指标中的问题，努力为用户提供更流畅的体验。这对于严重依赖用户交互的网站（例如：电子商务网站、社交媒体平台和游戏网站）尤其重要。优秀的INP网站评分，可带来更好的用户体验、更高的用户参与度和更高的转化率。
INP (Interaction to Next Paint)：
该指标通过观测网页为响应在用户访问网页期间发生的所有点击、点按和键盘互动而花费的时间，评估网页对用户互动的总体响应情况。最终 INP 值是观测到的最长互动时间，离群值会被忽略。
输入延迟：后台正在进行的任何阻止事件处理程序运行的任务
处理时间：执行相关事件处理程序代码所需的时间
呈现延迟：进程完成和浏览器渲染下一帧之间的时间
点击鼠标。
点击带有触摸屏的设备。
按物理键盘或屏幕键盘上的键。
良好：低于200毫秒
需要改进：200 - 500毫秒
较差：500毫秒以上
谷歌官方公告
2024 年 3 月即将把inp做为排名算法加进去
浏览器的主线程是浏览器进程中的一个关键部分。主线程负责下载资源、绘制页面和处理用户输入。
如果主线程正忙于执行大型任务，则它无法执行其他任何操作，包括对访问者的输入做出反应。这样会对INP产生影响，可以在以下方面进行优化：
① 分割大型任务：
当超过50毫秒才能完成的任务应该使用Webpack、 ESBuild、 Rollup或Parcel等工具进行分割 。这样，主线程的可用性就会有更多的中断，可以处理用户输入。
② 避免抖动：
通常指的是页面加载和交互过程中出现的不流畅、抖动或闪烁等问题，这可能会影响用户的体验。优化页面布局和样式和JavaScript脚本。
③ 延迟加载非关键任务：
延迟加载指定的文件，直到主线程空闲。为了获得最佳结果，仅延迟加载非关键且位于首屏以下的文件，这样对于访问者来说不会有明显的差异。
④ 减少JavaScript和第三方脚本：
INP的最大障碍之一是浏览器需要加载的内容太多。主线程要做的事情越多，保持快速交互就越困难。通过删除或优化JavaScript和第三方脚本来提高你的INP。
5.2 减少用户输入延迟
最大限度地减少主线程上可能延迟浏览器响应用户输入的长任务。
删除未使用的代码，或推迟非必要的代码。
最大限度地减少网站上插件的使用，以减少页面加载期间不必要的加载。
5.3 优化处理时间
最小化 CSS 动画。
避免使用第三方字体。
向用户显示正在加载或正在进行的元素，让用户知道处理正在进行。
5.4 最小化呈现延迟
优化您的网页，并减小DOM大小。DOM或文档对象模型是一种树状结构，是网页上所有元素的层次结构。
更大的DOM意味着更多的渲染工作和更长的处理时间。DOM越精简，浏览器处理和渲染它们的速度就越快。
版权所有：深圳市网商在线科技有限公司
友情链接:
