得鹿梦鱼 得鹿梦鱼

感知性能

感知性能是用户对网站速度的感受。用户如何看待性能与任何客观统计数据一样重要,甚至更重要,但它是主观的,并且不易测量。感知性能是用户视角,而不是指标。

性能指标

目前没有一种单一的指标或测试可以量化用户的“感受”。但是,有一些指标可以作为“有用的指示”:

  • 首次绘制:第一次绘制运算开始的时间
  • 首次有内容绘制(FCP):第一次重要渲染(例如文本、前景或背景图像、画布或 SVG 等)开始的时间。注意,这些内容不一定是有用或有意义的
  • 首次有意义绘制(FMP):有用的内容渲染到屏幕上的时间。
  • 最大内容绘制(LCP):视口中可见的最大内容元素的渲染时间。
  • 速度指数: 测量可见屏幕上像素绘制的平均时间。
  • 可交互时间:UI可用于用户交互的时间(即加载过程中最后一个长任务完成的时间)。

提升感知性能

  • 最小化初始加载: 首先下载用户将立即与之交互的内容,然后在“后台”下载其余内容。实际下载的内容总量可能会增加,但用户只需等待非常少的内容,因此会感觉下载更快了
  • 防止内容跳转和其他重排: 图片或其他资源导致内容下移或跳转到不同位置(例如第三方广告的加载),会让页面感觉仍在加载中,这对感知性能是不利的。若内容重排不是由用户交互触发,则尤其会损害用户体验。如果某些资源的加载速度比其他资源慢,在其他内容已经显示在屏幕上之后才加载这些元素,那么就需要提前规划,在布局中为它们留出空间,以便内容不会跳动或改变大小,尤其是在网站已变得可交互之后。
  • 避免字体文件延迟: 字体的选择相当重要。选择合适的字体可以极大地改善用户体验。从感知性能的角度来看,“字体导入不佳”可能会导致文本在样式化或回退到其他字体时出现闪烁
  • 可交互元素是可交互的:确保可见的可交互元素始终可交换且可响应。如果输入元素是可见的,用户应该能够无延迟地与它们交互。当响应时间超过 50 毫秒时,用户会感受到延迟。当内容重绘速度慢于 16.67 毫秒(或每秒 60 帧),或者重绘间隔不均匀时,他们会感觉页面卡顿不流畅。
  • 使任务启动器显得更具交互性