《Web 测试精要》- 第8章:Web 性能指标

本文深入探讨了Web性能的重要指标,包括RAIL模型的响应、动画、空闲和加载阶段,以及Web Vitals中的LCP、FID和CLS。通过了解这些指标,开发者可以优化用户体验,确保页面快速响应、流畅动画、高效利用空闲时间和快速加载。文章还提到了真实用户监控工具LogRocket,强调了性能监控在提升Web应用质量中的作用。
摘要由CSDN通过智能技术生成

💡 web 性能是加载时间和运行时的 客观测量+主观用户体验

用户对时间的感觉 - <可用性工程 - 第5章>


  1. 0.016s: 如果每秒渲染 60 个新帧,他们就会认为动画很流畅
  2. 0.1s: 用户感觉到系统在瞬间做出反应的极限
    1. 不需要特殊的反馈
    2. 队列进行排序的响应时间
  3. 1s: 用户思维流保持不间断的极限,即使此时用户会注意到延迟
    1. 用户确实会失去直接对数据进行操作的感觉,但是一般也不需要特殊的反馈
    2. 仍然感觉可以控制整体体验,并且他们可以自由移动,而不是在计算机上等待
  4. 10s: 用户的注意力能集中在对话上的极限
    1. 如果在 1~10s 之间,一个百分比指示器可能会比较多余,会违反显示惯性原则,一种常见的解决方案是将“忙碌”光标与屏幕底部小字段中快速变化的数字相结合,以指示已完成的工作量
      1. 显示惯性原则:
  5. 如果超过了 10s, 则务必向用户提供反馈,指示任务大概何时完成

用户对性能延迟的感觉可能会有所不同,取决于网络条件和硬件,例如,通过快速 Wi-Fi 连接,在功能强大的台式机上加载站点时,通常只需不到 1 秒时间,用户已经习以为常。通过速度较慢的 3G 网络连接,在移动设备上加载站点则需要更长的时间,因此,移动用户通常会更有耐心。在移动设备上,5 秒钟内完成加载是更现实的目标。

RAIL - 衡量性能的模型

RAIL 说明


  1. RAIL 是 Response, Animation, Idle, 和 Load 的首字母缩写, 是一种由Google Chrome团队与2015年提出的性能模型, 用于提升浏览器内的用户体验和性能
  2. RAIL 模型的理念是 “以用户为中心最终目标不是让您的网站在任何特定设备上都能运行很快,而是使用户满意”
  3. RAIL 把交互分为四个阶段: 页面加载、空闲、响应用户输入、滚动和动画,其对应的主要原则是
    1. 响应: 应该尽可能快速的响应用户, 应该在 100ms 或者 100ms 以内响应用户输入
    2. 动画: 在展示动画的时候,每一帧应该以 16ms 进行渲染,这样可以保持动画效果的一致性,并且避免卡顿
    3. 空闲: 当使用 Javascript 主线程的时候,应该把任务划分到执行时间小于 50ms 的片段中去,这样可以释放线程以进行用户交互
    4. 加载: 应该在小于 1s 的时间内加载完成你的网站,并可以进行用户交互

目标 vs 准则


  1. 目标: 与用户体验相关的关键性能指标。例如,点击即可在 100 毫秒内绘制。由于人类的感知相对一致,因此,这些目标不太可能很快发生改变。
  2. 准则: 帮助您实现目标的建议。这些准则可能特定于当前硬件和网络连接条件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值