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