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