INP 是什么？如何改进 INP 谷歌优化
新闻 2024-9-21编辑：深圳网站建设阅读（）标签：
INP
本文简绍INP 是什【shí】么？如何改进 INP 谷歌优化INP 分数是多【duō】少【shǎo】？INP 与 First Input Delay (FID) 有何不同？如【rú】果未报告 INP 值，该怎么办？
INP 是什么？
INP 是【shì】一项【xiàng】指标，通过观察在用户访问网页【yè】期【qī】间发生的所有点击、点按【àn】和【hé】键盘【pán】互动的延迟时【shí】间，评估【gū】网页对用户互动的总体响应情况【kuàng】。最【zuì】终 INP 值是观【guān】察【chá】到的最长互动【dòng】，忽略离群值。
关于 INP 计算方式的说明
互动是指在同【tóng】一【yī】逻辑用【yòng】户手势【shì】期间触发【fā】的一组事件处理脚本。例【lì】如，触摸屏设备上的“点【diǎn】按”互动包括多个事件【jiàn】，如 pointerup、pointerdown 和 click。交互可由 JavaScript、CSS、内置浏览器控【kòng】件（如表单元【yuán】素）或以上三者的【de】组合驱动【dòng】。
互动的延迟时间包【bāo】括一组促成互动【dòng】的事【shì】件处【chù】理脚【jiǎo】本【běn】的最长时长，即从用户开始互动【dòng】到下一【yī】帧【zhēn】显示视觉反馈【kuì】的那一刻。
INP 分数是多少？
在响应性指标上固【gù】定【dìng】标签（例如“良好”或“欠佳”）非常困难。一方面，您需要鼓励优【yōu】先进【jìn】行开发实践，优先【xiān】考【kǎo】虑良好的响应能【néng】力【lì】。另【lìng】一方【fāng】面【miàn】，您必须考【kǎo】虑【lǜ】到一个事实，即人们用来设定切实可行的开发期望的【de】设【shè】备在【zài】功能上存在【zài】很大的差异。
为了确保您【nín】提【tí】供良好【hǎo】的响应【yīng】速度体验，不妨【fáng】衡【héng】量一下实际【jì】中记录的网【wǎng】页加载【zǎi】第 75 个百分位数（按移【yí】动设备和桌面设备细分）：
INP 低于或 200 毫秒【miǎo】表示您的网页具有【yǒu】良好【hǎo】的响应速【sù】度。
INP 高于 200 毫秒且低于【yú】或等于【yú】 500 毫秒表示您的【de】网【wǎng】页响应能力【lì】需要【yào】改进。
INP 高于 500 毫秒表示您的网页响应速度慢。
什么是互动？
描绘主线程上的交互【hù】的图表。用户在【zài】阻止【zhǐ】任【rèn】务运【yùn】行【háng】时输入内【nèi】容。输入将一直延迟，直到【dào】这【zhè】些任务【wù】完成，之后【hòu】指【zhǐ】针向上、mouseup 和点击事件处理程序【xù】运行，然后开始渲染【rǎn】和【hé】绘制工作，直到显示【shì】下一帧。
互动的生命周期。在事件处理【lǐ】脚本【běn】开始【shǐ】运行之前会【huì】发生【shēng】输【shū】入延迟，这可能【néng】是由主线程【chéng】上的任【rèn】务过长等因素引起的【de】。然后，互动的事【shì】件处理脚本【běn】会运行【háng】，并【bìng】且延迟会在呈现下一帧之前发生。
互动的主要驱动【dòng】因素【sù】通常是 JavaScript，不【bú】过浏【liú】览器确实通过并非由【yóu】 JavaScript 提供支持的【de】控件（例如复选框、单选按钮以及【jí】由 CSS 提供【gòng】支持的【de】控件【jiàn】）提供【gòng】互动。
就 INP 而言，系统仅观察以下互动类型：
用鼠标点击。
点按带有触摸屏的设备。
按实体键盘或屏幕键盘上的键。
互动发生【shēng】在主文档或文【wén】档中嵌入的 iframe 中，例如，点击嵌入的视频【pín】上【shàng】的播放。最终【zhōng】用户【hù】并【bìng】不知【zhī】道 iframe 中包【bāo】含哪【nǎ】些内【nèi】容。因此【cǐ】，需要在 iframe 中使用【yòng】 INP 来衡量顶级网页的用户体验。请注意【yì】，JavaScript Web API 无权访问 iframe 内容，因【yīn】此【cǐ】可【kě】能无法在 iframe 中衡量 INP，并且这【zhè】会显示为【wéi】 CrUX 和 RUM 之间的【de】差异。
互动可能由【yóu】两【liǎng】部分组成【chéng】，每部分【fèn】包含多个【gè】事【shì】件。例如，按键【jiàn】包含【hán】 keydown、keypress 和 keyup 事件。点按互【hù】动包含 pointerup 和 pointerdown 事【shì】件。系统【tǒng】会选择互动中时【shí】长最长【zhǎng】的【de】事件作为互动的延迟时间。
描绘包含【hán】两个【gè】互动的更复杂的互动。第一个是 mousedown 事件，该事【shì】件会在鼠【shǔ】标【biāo】松【sōng】开按钮之前【qián】生成一【yī】帧，这会启【qǐ】动更多工作，直到结果【guǒ】呈现另一帧。
描绘与多个事件【jiàn】处理脚本的【de】互动。互动的第一【yī】部分会在用户点【diǎn】击鼠【shǔ】标按钮时【shí】接收输入。不过【guò】，在【zài】用户松开【kāi】鼠标按钮之【zhī】前，系【xì】统会呈现一帧画面。当用户松【sōng】开【kāi】鼠标按钮时，必须在显示下一帧之【zhī】前【qián】运【yùn】行另一系列事件处理脚本【běn】。
INP 在用户【hù】离开网页时【shí】计算，其值将【jiāng】代表网页【yè】在整个生命【mìng】周【zhōu】期内的总体响应情况。INP 较低意味着网【wǎng】页【yè】能够【gòu】可靠地响应用【yòng】户输入。
INP 与 First Input Delay (FID) 有何【hé】不同？
其中 INP 考虑所有页面互动，First Input Delay (FID) 仅考虑首次互动。此外，它【tā】还会仅测量首【shǒu】次互【hù】动【dòng】的【de】输入延【yán】迟，而【ér】不会测【cè】量运行事件处理【lǐ】脚【jiǎo】本所需的时【shí】间【jiān】或【huò】呈现下一帧时的延迟。
鉴于 FID 也是【shì】一个加载响应【yīng】能力指标【biāo】，计算【suàn】依【yī】据是，如果在加载阶段与网页【yè】进行【háng】的首次互【hù】动几乎没有可察觉的输入延迟，那么【me】该网页就能【néng】给用户留下良好【hǎo】的第一印象【xiàng】。
INP 不仅仅代表第【dì】一印象。通【tōng】过对【duì】所有互【hù】动进【jìn】行采样【yàng】，可以【yǐ】全面评估响应性，使 INP 成为【wéi】比 FID 更可【kě】靠的整体响应性指标。
如果未报告 INP 值，该怎么办？
网页可能不会返回 INP 值。造成这种情况的原因有很多：
页面已加载，但用户从未点击、点按或按下键盘上的键。
该【gāi】网页已加【jiā】载，但用户【hù】使用了与【yǔ】点击、点按或使【shǐ】用键【jiàn】盘类【lèi】似的手势来与该网页互动。例如，滚【gǔn】动或将鼠标【biāo】悬停在元【yuán】素上不会影响 INP 的计算方【fāng】式。
网页由搜索【suǒ】抓取工【gōng】具或无头【tóu】浏览【lǎn】器等漫游器访问，但该网【wǎng】页尚未编写与【yǔ】网页互动【dòng】的脚本。
如何衡量 INP
如果您的网站符合列入 Chrome 用户体验报告【gào】 (CrUX) 的【de】条件，您可以通过 PageSpeed Insights 中的 CrUX（和其【qí】他【tā】核心【xīn】网页指标）快速获【huò】取 INP 的字段数据。您至少可【kě】以获得【dé】网站 INP 的【de】源级信【xìn】息【xī】，但在某些【xiē】情况下，您也【yě】可以【yǐ】获取网页级数据。
然而，虽然【rán】 CrUX 可以帮【bāng】助您大致了【le】解【jiě】存【cún】在【zài】某个【gè】问题，但【dàn】通常无法【fǎ】提供足够的详细【xì】信息，无法充分了解问题所在。RUM 解决方案可帮助您深入了解【jiě】互动速度缓【huǎn】慢的网【wǎng】页、用户或用户互动的细节。将 INP 归因于各个【gè】互动【dòng】可以避【bì】免猜测和浪费精【jīng】力。
如何改进 INP
当您发现存在缓慢互动【dòng】的情【qíng】况【kuàng】，并【bìng】且可以在实验室中手动重现这类问题【tí】后，接下来就要对其进行优化。互动可以【yǐ】分为三【sān】个阶段【duàn】：
输入延迟【chí】，在用【yòng】户发【fā】起【qǐ】与网页的互动时开始，并在互动的【de】事件回调开【kāi】始运行时结束。
处理时间，由事件回调运行完毕所需的时间组成。
展示延迟【chí】，即浏览【lǎn】器显【xiǎn】示下一帧（包含【hán】互【hù】动的视觉效果）所需的时【shí】间。
