info
本文翻译自MDN。
感知性能
感知性能 (en-US)是用户对网站速度的感受。用户如何看待性能与任何客观统计数据一样重要，甚至更重要，但它是主观的，并且不易测量。感知性能是用户视角，而不是指标。
本文简要介绍了感知性能，着眼于用户的感知，以及可以使用哪些客观工具来衡量这类主观因素。
性能是关于用户视角的。网站加载和渲染的速度比网站实际加载和渲染的速度对用户体验的影响更大。即使一个操作需要很长时间(因为延迟或者主线程不可用) ，在用户等待的时候，通过显示加载旋转器，或者一系列有用的提示和技巧(或者笑话，或者其他你认为合适的东西) ，也可以让用户保持忙碌。这种方法比什么都不显示要好得多，因为这会让用户感觉花费的时间长得多，并可能导致用户认为它已经坏了并放弃使用。
了解您的网站加载速度以及对用户交互的响应程度至关重要;更重要的是实际下载时间，但难以量化。您网站的某些区域可能无法更快地完成，但即使othser部分中讨论的指标无法改进，您也可以使其感觉更快。
没有独角兽度量标准可以衡量用户的感受，但是度量标准在衡量改进(和回归)方面是有用的。相关的测量包括第一次有意义的绘制(FMP) ，最大满意度绘制(LCP) ，交互时间(TTI) ，渲染开始，DOM 交互和速度指数。
浏览器会报告第一次绘制，并提供页面开始变化的时间(以毫秒为单位) ; 但这种变化可以是简单的背景颜色更新，或者是更不明显的变化。它不表示完整性，并且可能报告没有绘制任何可见内容的时间。First Contentful Paint (FCP)报告了浏览器第一次渲染任何重要内容的时间，包括文本、前景或背景图像、画布或 SVG; 捕捉了加载体验的开始。但是，仅仅因为有内容，并不意味着它是有用的内容或者用户有内容可以消费。第一个有意义的绘制，或 FMP，是当内容出现在屏幕上，实际上是有意义的; 这是一个更好的衡量用户感知加载体验，但仍然不理想。最大内容绘图(LCP)度量，在最大内容绘图 API 中定义，报告在 viewport 中可见的最大内容元素的呈现时间。
速度指数还用于近似感知性能: 它测量可见屏幕上要绘制的像素的平均时间。它没有考虑到抖动，也没有权衡哪些内容对用户更重要，所以它不是一个完美的度量。
这些指标与初始负载和渲染有关。同样重要的是，一旦用户开始与站点交互，要确保站点感觉快速。因此，交互时间是一个很好的度量标准; 它是加载过程的最后一个长任务完成的时刻，UI 可用于用户交互，但有延迟。
用户界面缺乏或响应能力不足和恶搞都会损害感知性能。尽管一项任务可能需要很长的时间，但是有很多方法可以让它看起来更快。有几个提高感知性能的技巧。
提高感知性能
了解网络、浏览器的工作原理、用户对时间的感知等，可以帮助您更好地理解如何改进用户交互。然而，你并不需要知道一切事物的来龙去脉，包括人类大脑是如何工作的，来提高对速度的感知。
感觉某件事发生的快慢很大程度上取决于用户是主动还是被动地等待这件事发生。等待可以有一个主动和被动阶段。当用户处于活动状态——移动鼠标、思考、被入侵时，他们处于活动状态。被动阶段发生在用户被动地等待时，就像盯着单色屏幕一样。如果被动和主动等待时间在客观上相等，用户会估计被动等待时间长于主动等待时间。如果不能客观地进一步减少加载、呈现或响应时间，那么将等待转换为主动等待而不是被动等待可以使其感觉更快。
这里有一些技巧和窍门可以遵循。如果你想深入研究，这些快速提示中的一些有完整的文章。
尽可能快地显示内容，或者至少显示页面的某些部分，指示内容正在加载，对于提高感知性能至关重要。例如，因为页面渲染是通过加载和解析 CSS 和 JavaScript 来阻塞的，所以最小化需要加载的 CSS 和 JS 的数量将对提高感知性能产生重大影响。尽管字节可能是相同的，但是不阻止页面呈现会使加载感觉更快。
这里有一些技巧有助于提升性能：
最小化初始加载
要提升可感知性能，请最小化页面初始加载。换句话说，首先下载将实际显示的所有内容，但仅下载实际使用的内容，然后下载其余内容。因为最终要下载所有资源，所以实际上资源总量并没有改善——实际上还需要增加一些代码。但因为暂不需要的资源被延后加载了，所以用户并不会感知资源量的增加，而会感受到页面加载更快了。
为了最大程度地减少初始加载资源，请从内容中分离交互式功能，以便优先加载初始化时所需的可见内容——文本、样式和图像。延迟加载其余资源。
不要加载初始页面未使用或看不到的图像或脚本，而在页面可用后延时加载，或在需要使用时按需加载。 在初始页面加载之后加载其他资源可提高感知性能。 在初始请求中加载基本数据，并仅根据需要逐步加载功能部件和数据，有助于改善低带宽和低规格硬件的体验。
此外，您应该优化需加载的资源。图片和视频应以最佳格式、压缩后的大小和正确尺寸进行投放。
防止内容跳转和其他重排
图片或其他资产导致内容被下推或跳转到不同的位置，如加载第三方广告，可以使页面感觉它仍在加载，并对感知性能有害。当不由用户交互启动时，内容重流对用户体验尤其不利。如果某些资产的加载速度比其他资产慢，在其他内容已经绘制到屏幕上之后加载元素，提前计划并在布局中为它们留出空间，这样内容就不会跳跃或调整大小，特别是在网站变得交互性之后。
避免字体文件延迟
字体的使用既有助于用户体验，也有害于用户体验。选择正确的字体是一种艺术形式，可以大大改善用户体验。字体也可能损害用户体验，特别是如果使用的字体需要导入，如果导入不是最佳的，或者如果使用 Comic Sans (开玩笑)。无样式文本的闪烁和文本丢失都会损害性能。
使备用字体的大小和效果相同，以便当字体加载页面变化不太明显。
交互类元素是可交互的
确保可见的交互元素始终是交互式和响应式的。如果输入元素是可见的，那么用户应该能够毫无延迟地与它们进行交互。当用户花费超过50毫秒的时间做出反应时，他们会感到某些东西滞后。当内容重新绘制的速度低于16.67 ms (或60帧率)或者重新绘制的时间间隔不均匀时，他们会觉得页面很糟糕。
使任务启动器显得更具交互性
在按下按键而不是等待按键弹起时发出请求，可以使感知的内容加载减少 200 毫秒。在 KEYUP 后添加一个有趣但不显眼的 200 毫秒动画，甚至可以再降低 200 毫秒的加载感知。您并没有节省 400 毫秒的时间，但是用户直到真正等待内容时，才感觉到他们在等待内容。
总结
通过将尽可能多的下载、渲染和等待时间转换为主动阶段，并减少任何被动等待，即使客观测量保持不变，用户也会感觉内容下载、渲染和响应更快。现在我们知道了应该加快什么，让我们看看一些度量标准，并了解如何度量这些事件。
