感知性能
感知性能 是衡量网站性能、响应性和可靠性的一种主观指标。换句话说，就是网站在用户眼中看起来有多快。与实际操作速度相比，它更难量化和衡量，但可能更为重要。
本文简要介绍了影响感知性能的因素，以及一些用于评估和改善感知性能的工具。
| 预备知识 | 已安装基本软件，并具备 客户端 Web 技术 的基础知识。 |
|---|---|
| 目标 | 了解用户对 Web 性能感知的基础知识。 |
概述
页面加载和响应用户交互的速度（以及流畅度）的感知，比获取资源所需的实际时间更为重要。虽然你可能无法在物理上让你的网站运行得更快，但你很有可能改善用户感觉到的速度。
改进感知性能的一个通用规则是，提供快速响应和定期状态更新通常比让用户等待操作完全完成（在提供任何信息之前）要好。例如，在加载页面时，最好在文本到达时就显示它，而不是等待所有图像和其他资源加载完毕。即使内容尚未完全下载，用户也能看到一些东西正在发生，并且可以开始与内容进行交互。
注意： 对于那些积极参与、分心或娱乐的用户来说，时间似乎过得比那些被动等待某事发生的用户更快。尽可能地积极吸引和告知那些等待任务完成的用户。
同样，当用户点击链接执行一个耗时操作时，最好立即显示“加载动画”。虽然这不会改变完成操作所需的时间，但网站感觉响应更快，并且用户知道它正在处理有用的事情。
性能指标
没有单一的指标或测试可以在网站上运行来评估用户“感觉”如何。但是，有一些指标可以作为“有用的指示器”。
提升性能
以下是一些有助于提高感知性能的技巧和窍门
最小化初始加载
为了提高感知性能，应最小化初始页面加载。换句话说，首先下载用户将立即与之交互的内容，然后在“后台”下载其余内容。下载的总内容量实际上可能会增加，但用户只在很少量的内容上等待，因此下载感觉更快。
将交互式功能与内容分离，并加载初始加载时可见的文本、样式和图像。延迟或惰性加载在初始页面加载时未使用或不可见的图像或脚本。此外，您应该优化您加载的资源。图像和视频应以最理想的格式提供，经过压缩，并采用正确的尺寸。
防止内容跳跃和其他重排
导致内容向下推或跳到不同位置的图像或其他资源，例如第三方广告的加载，会使页面感觉仍在加载，并且不利于感知性能。当用户交互未触发内容重排时，对用户体验尤其不利。如果某些资源比其他资源加载慢，并且在内容已绘制到屏幕后加载元素，请提前规划并为其在布局中留出空间，以免内容跳转或调整大小，尤其是在网站变得可交互之后。
避免字体文件延迟
字体选择很重要。选择合适的字体可以大大改善用户体验。从感知性能的角度来看，“不佳的字体导入”可能导致文本在样式化时或回退到其他字体时出现闪烁。
使备用字体的大小和粗细相同，这样当字体加载时，页面更改就不那么明显了。
交互式元素是可交互的
确保可见的交互式元素始终是可交互且响应迅速的。如果输入元素可见，用户应该能够与之交互而没有延迟。当用户采取超过 50 毫秒的反应时间时，他们会感觉有些卡顿。当内容重绘速度慢于 16.67 毫秒（或 60 帧/秒）或以不均匀的间隔重绘时，他们会认为页面行为不佳。
将诸如自动补全之类的功能作为渐进增强：使用 CSS 显示输入模式，并在可用时使用 JS 添加自动补全。
使任务启动器显得更具交互性
在 `keydown` 时而不是等待 `keyup` 时进行内容请求，可以将内容的感知加载时间减少 200 毫秒。在 `keyup` 事件中添加一个有趣但不过分的 200 毫秒动画可以再减少 200 毫秒的感知加载时间。你并没有节省 400 毫秒的时间，但用户感觉不到他们在等待内容，直到，好吧，直到他们在等待内容。
总结
通过减少用户等待有用内容的时间，并保持网站响应和吸引人，用户会感觉网站性能更好——即使实际加载资源的实际时间保持不变。