浏览器新面试考点:核心网页交互新指标“INP”

本篇译自:web.dev/blog/inp-cw…

2020 年初,Google Chrome 团队推出了“核心 Web 指标”,旨在为网页提供一系列质量信号。

浏览器新面试考点:核心网页交互新指标“INP”

Google Chrome 团队即将对核心 Web 指标进行一些更改,以便更好地评估网页的用户体验质量。

在本文中,我们将探讨这一变化以及它带来的影响。

时间线:

浏览器新面试考点:核心网页交互新指标“INP”

曾经,First Input Delay (FID) 是核心 Web 指标中的一项响应性指标,但 FID 已知存在一些限制。

FID 是一种加载响应度指标,其背后的原理是,如果在加载阶段对页面的第一个交互没有明显的输入延迟,那么页面给人的第一印象就是良好的。缺点就是:FID 仅测量第一个交互的输入延迟,而不考虑运行事件处理程序的时间或呈现下一帧的延迟。

经过一年的测试并收集社区反馈后,Chrome 团队决定提升 INP 作为核心 Web 指标中的一项新的响应性指标,并从 2024 年 3 月起取代 FID。

也就是说:2024 年 3 月,INP 取代 FID 后,Search Console 报告将不再显示 FID 指标,并将 INP 用作新的响应性指标。

INP 的计算借助 Event Timing API,通过观察事件处理程序的延迟来确定交互的响应时间。

FID 只关注页面加载阶段的第一个交互,而 INP 考虑了页面的所有交互。它的目标是确保用户发起交互到下一帧渲染的时间尽可能短,以提供良好的用户体验。

浏览器新面试考点:核心网页交互新指标“INP”

具体来说:Google 测试会根据网站上大多数用户互动的持续时间得出一个 INP 分数。分数将为“好”、“需要改进”或“差”,具体取决于您的网站在视觉上更新所需的时间。

浏览器新面试考点:核心网页交互新指标“INP”

从这张表中不难看出:

  • INP低于或等于200毫秒:  表明你的页面响应良好,用户体验优秀。
  • INP在200毫秒以上但低于或等于500毫秒:  表明你的页面响应需要改进,存在一定的用户体验问题。
  • INP高于500毫秒:  表明你的页面响应性差,用户体验较差,亟需优化。

谷歌官方强烈建议网站所有者实现良好的核心 Web 指标,确保用户在总体上获得良好的体验。


开发人员如何针对 INP 优化代码?

如果你是开发人员,如果想优化 INP 分数,可以作如下操作。

1. 立即确认用户输入

在优化 INP 分数时,有一件事非常重要,即是:你需要立即向所有用户输入提供视觉反馈;

用户应立即看到他们的输入被识别,并且系统正在对其执行操作。这将明显提高 INP 分数;

以下是一些示例:

  • 如果用户单击某个元素,则应立即显示已单击该元素的内容。
  • 如果用户提交表单,则需要立即显示某些内容以确认,例如消息等。
  • 如果用户点击图像以在灯箱中打开它,则不要只是等待图像加载。相反,应该立即显示演示图像或缩略图。然后,加载图像后,再在窗口中显示它。

特别是如果需要进行繁重的JavaScript处理以响应用户输入,只需确保在开始任务之前更新 UI。之后,可以使用 Web worker 在 setTimeout 回调或单独的线程上执行 CPU 密集型工作,然后最终将结果呈现给用户。

2. 优化浏览器最耗时的环节

我们应该调查浏览器最耗时的环节,然后优化这些部分。

在谷歌浏览器中,当导航到查看 » 开发人员 » 开发人员工具 » 性能时,可以检查阻止下一个绘制的 JavaScript 函数和事件处理程序。

通过这样的办法减少用户 INP 时间。

3. 减少布局

有时,许多 CPU 活动由布局工作组成。

发生这种情况时,应该检查是否可以减少代码中的 relayout 函数。

4. 首先显示首屏内容

如果呈现页面内容很慢,那么 INP 分数很可能会受到影响。

所以,考虑先只显示重要的“首屏”内容,以便更快地体现帧的渲染结果。


说到这里,我们不难发现:成长与发展是学习与工作的主旋律 ~ 最后,自荐一下我和机械工业出版社联合出版的 《程序员成长手记》 一书:全书分为3大模块、8个章节:从入门程序员到程序员自驱成长,回归纸质阅读,相信能给你一个更全局的程序员视野,提供成长帮助。京东搜“程序员成长手记”

浏览器新面试考点:核心网页交互新指标“INP”

OK,以上便是本次分享,希望各位喜欢~ 欢迎点赞、收藏、评论 🤟 我是安东尼 🤠 人气技术博主 💥 坚持千日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月

原文链接:https://juejin.cn/post/7347956542308794380 作者:掘金安东尼

(0)
上一篇 2024年3月20日 上午10:32
下一篇 2024年3月20日 上午10:43

相关推荐

发表评论

登录后才能评论