RUM 最佳实践-交互延迟的探索与发现

FID

在互联网高速发展的时代,用户体验已成为企业竞争的关键所在。网页性能作为用户体验的重要组成部分,直接影响着用户的满意度和工作效率。First Input Delay(FID)作为衡量网页性能的重要指标,越来越受到业界关注。今天,让我们一起来深入了解 FID,探讨如何优化 FID 以提升用户体验,同时里面会有一些小的干货分享。

介绍

First input dealy,指的是用户首次与网页互动时的延迟时间,更详细的解释是,是从用户首次与网页互动(即,点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件)到浏览器实际能够开始处理事件处理脚本以响应相应互动的时间。

评价标准

Google 认为:为了提供良好的用户体验,网站应努力将 First Input Delay 控制在 100 毫秒以内。为确保大多数用户都达到此目标,最好衡量一下网页加载的第 75 个百分位(按移动设备和桌面设备细分)。

  • Good,≤100ms
  • poor,>300ms

探索与发现

FID 数据收集

观测云使用 js 的 performanceObserver 的 api 来衡量 FID ,即如下代码:

new PerformanceObserver((entryList) => {  for (const entry of entryList.getEntries()) {    const delay = entry.processingStart - entry.startTime;    console.log('FID candidate:', delay, entry);  }}).observe({type: 'first-input', buffered: true});

FID 数据展示

时序图展示

通过时序图能够展示随着时间变化的 FID 的不同应用的情况,根据应用的指标表现来有针对的优化 FID :

可以根据不同的页面组来查看不同页面之间的 FID 的指标情况,来合理安排对 FID 的优化工作:

排行榜展示

通过排行榜能够展示不同 app_id 的 FID 的情况,根据应用的指标表现来有针对的优化 FID :

通过排行榜能够展示不同页面组 FID 的情况,根据页面组的指标表现来有针对的优化 FID :

影响元素的展示

针对 FID 的性能情况,可以通过时序图展示哪个元素影响了 FID 的性能,来对 FID 进行有针对的优化:

针对 FID 的性能情况,可以通过排行榜展示哪个元素影响了 FID 的性能,来对 FID 进行有针对的优化:

FID 小误区

虽然谷歌推荐交互延迟时间是 100ms 以下,但推荐经过探索,根据业务场景找到一个合理值,如下图中 63ms 就是相对一个比较分化的点。

交互延迟时间长,可能导致用户的【意外】行为,比如有时候官网或者电商类网站,就会集中表现为某个页面的平均点击次数出现较大的波动,如下图:用户【疯狂点击】或者【无动于衷】的情况就出现在交互延迟大于【63ms】的情况下。

当然用户行为并不能完全取决于 FID ,良好的产品流程设计和强需求也是影响用户行为比较重要的因素,谷歌推荐 P75 小于 100ms 。

FID 优化

导致 FID 不佳的主要原因是大量 JavaScript 执行。优化 JavaScript 在网页上解析、编译和执行的方式可直接降低 FID,一般包含:

  • 拆分长任务
  • 针对互动准备情况优化网页
  • 使用 Web Worker
  • 缩短 JavaScript 执行时间

根据收集到的 appid、页面组、FID 影响元素,配合上面的内容,可以有针对性的对这几个维度优化提高 FID 。

从哪里开始优化

以某应用某路径下较高的 FID 为例子,通过查看该应用下路径的资源真实情况,可以做相对应的优化:

注:观测云 sdk 还有个字段 first_input_target_selector,爱折腾的小伙伴可以利用这个字段发现更多有关 FID 的有意思的事情。

该如何去优化
  1. 查找对 FID 影响最大的 js/css 文件,并减少 js 文件的传输、解析时间,能一定程度上降低 FID ,同样收益的也包括包含该 js 的其他核心指标(LCP)。
  2. 针对 js 文件已经很小的情况,通过调整代码功能块,在一定程度上能降低 FID 。
  3. 通过对同时期非关键 js 的延迟执行,如使用 async 或 defer ,在一定程度上能降低 FID,这里不要忘了浏览器也需要执行解析 CSS 文件。
  4. 最后,也可能是最重要的一点,就是通过调整设计或产品流程,能很大程度上影响 FID 。

总结

综上所述,First Input Delay(FID)作为衡量用户体验的重要指标,其重要性不言而喻。优化 FID ,意味着提高用户与网页互动的响应速度,从而提升用户体验。尽管谷歌建议将 FID 控制在 100ms 以内,但我们应根据实际业务场景,寻找最适合的优化值。

通过使用观测云等工具,我们可以从多个维度收集和分析 FID 数据,找出影响 FID 性能的元素,有针对性地进行优化。优化过程中,我们应关注 JavaScript 的执行、传输和解析时间,同时结合代码调整、设计优化等多方面手段,以实现 FID 的降低。

值得注意的是,优化 FID 并非一蹴而就,需要持续的监控和调整。在优化过程中,我们要关注用户的实际行为,结合产品设计和需求,以实现更好的用户体验。

最后,希望能够重视 FID 优化,不断探索和实践,为用户提供更快速、更流畅的交互体验。在未来,我们期待看到更多关于 FID 优化的创新技术和方法,共同推动网页性能的提升,让互联网更加美好。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806213.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迷宫 — — 蓝桥杯(动态规划)

迷宫 题目: 输入样例: 3 1 1 1 2 3 4 5 6 7 8 9 2 2 1 3 1 R输出样例: 21思路: 题目大意:给定一个n x m的平面网格,并且每一个格子都有一定的代价,并且设有障碍物和陷阱,障碍物的意…

Redux和Redux Toolkit

Redux 概念:redux是react最常用的集中状态管理工具,类似于Vue中的Pinia(vuex),可以独立于框架运行作用:通过集中管理的方式管理应用的状态 Redux快速体验 不和任何框架绑定,不使用任何构建工具,使用纯Re…

MySQL-创建和管理表:基础知识、创建和管理数据库、创建表、修改表、重命名表、删除表、清空表、拓展

创建和管理表 1. 基础知识1.1 一条数据存储的过程1.2 标识符命名规则1.3 MySQL中的数据类型 2. 创建和管理数据库2.1 创建数据库2.2 使用数据库2.3 修改数据库2.4 删除数据库 3. 创建表3.1 创建方式13.2 创建方式23.3 查看数据表结构 4. 修改表4.1 追加一个列4.2 修改一个列4.3…

mac电脑安装软件报错:无法检查更新,请检查你的互联网连接

1、点菜单栏搜索图标,输入:终端 ,找到后,点击打开 2、输入以下命令:(复制粘贴进去)回车安装 /usr/sbin/softwareupdate --install-rosetta --agree-to-license 3、提示【Install of Rosetta …

flask 访问404

当你的项目有自己的蓝图,有添加自己的前缀,也注册了蓝图。 在访问的路由那里也使用了自己的蓝图,如下图 然后你访问的地址也没问题,但是不管怎么样访问就是返回404,这个时候不要怀疑你上面的哪里配置错误,…

虚幻引擎架构自动化及蓝图编辑器高级开发进修班

课程名称:虚幻引擎架构自动化及蓝图编辑器高级开发进修班 课程介绍 大家好 我们即将推出一套课程 自动化系统开发。 自动化技术在项目开发的前中后期都大量运用。如何您是一家游戏公司,做的是网络游戏,是不是经常会遇到程序员打包加部署需…

免费的GPT-3.5 API服务aurora

什么是 aurora ? aurora 是利用免登录 ChatGPT Web 提供的无限制免费 GPT-3.5-Turbo API 的服务,支持使用 3.5 的 access 调用。 【注意】:仅 IP 属地支持免登录使用 ChatGPT的才可以使用(也可以自定义 Baseurl 来绕过限制&#x…

Flutter中间镂空的二维码扫描控件

1、UI效果图&#xff1a; 2、中间镂空UI&#xff1a; class CenterTransparentMask extends CustomClipper<Path> {final double? width;CenterTransparentMask({this.width});overridePath getClip(Size size) {final path Path()..addRect(Rect.fromLTWH(0, 0, size…

cfDNAPro|cfDNA片段数据生物学表征及可视化的R包

文章目录 前言cfDNAProdemo1.片段长度可视化2.片段长度分布比较3.可视化DNA片段模态长度4.片段化振荡模式比较5. ggplot2美化 前言 cfDNA&#xff08;无细胞DNA&#xff0c;游离DNA&#xff0c;Circulating free DNA or Cell free DNA&#xff09;是指在血液循环中存在的DNA片…

Mac安装配置ElasticSearch和Kibana 8.13.2

系统环境&#xff1a;Mac M1 (MacOS Sonoma 14.3.1) 一、准备 从Elasticsearch&#xff1a;官方分布式搜索和分析引擎 | Elastic上下载ElasticSearch和Kibana 笔者下载的是 elasticsearch-8.13.2-darwin-aarch64.tar.gz kibana-8.13.2-darwin-aarch64.tar.gz 并放置到个人…

社交网络的分布式治理:分析Facebook在区块链社区中的角色

随着区块链技术的快速发展&#xff0c;社交网络的治理模式也逐渐受到关注。传统的社交网络往往由中心化的平台掌控&#xff0c;用户的权力和参与度受到限制&#xff0c;而区块链技术为社交网络的分布式治理提供了新的解决方案。本文将深入探讨社交网络的分布式治理&#xff0c;…

电脑突然读不到硬盘了怎么回事 电脑突然读不到硬盘了数据怎么办 固态硬盘恢复软件 easyrecovery免费下载

硬盘是操作系统数据的载体&#xff0c;数据由磁头从硬盘盘片上的磁道中读取出来&#xff0c;然后传递给硬盘上的缓存芯片&#xff0c;再由接口从缓存芯片中将数据发送到Ultra ATA通道&#xff0c;之后传到系统&#xff0c;这就是电脑读取硬盘数据的过程。本篇文章&#xff0c;我…

从 0 搭建公司Jenkins服务 Centos7

从 0 搭建公司Jenkins服务 Centos7 安装 (运维人员) 安装环境 配置DNS安装JDK17安装Jenkins安装Docker安装GIT安装Ansible启动Jenkins安装插件配置凭据配置共享库配置 (开发经理)使用 (开发、测试人员) 安装 (运维人员) 安装环境 配置DNS 新安装系统的服务器无法解析域名&a…

hal库实现串口通信——阻塞式 API

1STM32CobeMX设置 设置时钟源 rcc设置为外部时钟High Speed Clock (HSE)//设置为如图 再将其设置为72MHz 设置串口引脚为异步通信 设置波特率等 设置波特率范围提示点击波特率再点击图中的 我的设置 再打开中断 即可生成代码//省略项目设置 2代码设置 函数 HAL_UART_Trans…

docker使用canal

1. 准备MySql主库 1.1.在服务器新建文件夹 mysql/data&#xff0c;新建文件 mysql/conf.d/my.cnf 其中my.cnf 内容如下 [mysqld] log_timestampsSYSTEM default-time-zone8:00 server-id1 log-binmysql-bin binlog-do-db mall # 要监听的库 binlog_formatROW配置解读&#…

微服务-6 Gateway网关

一、网关搭建 此时浏览器访问 localhost:10010/user/list 后正常返回数据&#xff0c;说明网关已生效&#xff0c;其原理流程图如下&#xff1a; 二、网关过滤器 作用&#xff1a;处理一切进入网关的请求和微服务响应。 1. 网关过滤器的分类&#xff1a; a. 某个路由的过滤器 …

CSS实现三栏自适应布局(两边固定,中间自适应)

绝对定位的元素会脱离文档流&#xff0c;它们是相对于包含块&#xff08;通常是最近的具有相对定位、绝对定位或固定定位属性的父元素&#xff09;进行定位的。当你把一个绝对定位的元素的高度设置为100%时&#xff0c;它会相对于其包含块的高度来确定自己的高度。如果包含块是…

技术解析:应对国内大流量攻击的新挑战与分布式清洗防御策略

近日&#xff0c;国内网络环境中出现的大流量攻击事件频发&#xff0c;且攻击规模呈指数级增长&#xff0c;部分攻击流量甚至超过了1.5Tbps。 这背后的主要原因是攻击者利用海外流量资源&#xff0c;通过复杂的网络技术和协议转换&#xff0c;将国际IPv4/IPv6流量巧妙伪装并转…

python篇---图片转成视频

python篇—图片转成视频 import cv2 import os# 设置图片文件夹路径和视频输出路径 image_folder /workspace/11 video_name output_video.mp4# 获取图片文件夹中的所有图片文件名&#xff0c;并按顺序排序 images [img for img in os.listdir(image_folder) if img.endswi…

C++的引用和内联函数,auto

什么是引用 引用就是取别名 可以给一个变量取多个别名,也可以给别名取别名 别名与本名拥有同一地址,对任意别名修改,也会同时修改其他别名和本名 引用的作用 引用的作用与指针重叠度很高 图中函数的参数int& a,int& b,a是x的别名,b是y的别名 则ab的交换就是xy的交…