网页可用性至关重要
用户希望页面在视觉上准备就绪后就能立即使用并进行交互。用户界面交互（滚动、点击、轻触）可能会因脚本和其他浏览器操作而延迟，因此尽量减少这些操作的影响对用户体验大有裨益。
你可能听说过，没有一个单一的指标能够完全反映网页的“加载体验”。网页加载是一个循序渐进的过程，包含四个关键时刻：加载是否正在进行？加载是否有效？加载是否可用？加载体验是否令人愉悦？
以可衡量的指标来看，这些时刻可细分为以下几个方面：
- 是否正在进行？：导航是否已成功启动？服务器是否已开始响应？指标：首次绘制时间
- 它有用吗？：当你绘制的文字、图像或内容能够让用户从中获得价值并与之互动时，它就有用。指标：首次内容绘制 (First Contentful Paint)、首次有效绘制 (First Meaningful Paint)、速度指数（实验室数据）
- 它是否可用？：当用户能够开始与体验进行有意义的交互并触发某些事件（例如点击按钮）时，它就可用了。这一点至关重要，因为如果用户界面看起来已准备就绪但实际上并非如此，用户可能会感到失望。指标：交互时间（实验室）、首次 CPU 空闲时间、首次输入延迟（现场）。
- 它是否令人愉悦？：愉悦感体现在确保页面加载后用户体验性能的一致性上。滚动是否流畅不卡顿？动画是否流畅且以 60fps 运行？其他耗时任务是否会影响这些功能的实现？
页面可用性至关重要。如果单页应用尚未完成加载用于绑定事件处理程序的 JavaScript，或者占用了浏览器的主线程（与上述情况类似），则其可用性（即无法快速响应用户输入）可能很差。因此，监控可用性指标非常重要。
用户是否关注页面易用性？
2018 年，Akamai使用mPulse进行了一项用户体验研究，探讨交互性对“愤怒点击”的影响。“愤怒点击”是指用户因沮丧而快速点击（或轻触）网站的行为。Akamai 发现，“愤怒点击”的发生概率取决于页面可用性的延迟：
- 如果用户的首次交互发生在页面变为可交互状态之前（即在交互状态或事件处理程序启动之前
onload），则愤怒点击事件会频繁发生。这可能是因为事件处理程序占用了大量 CPU 资源。 - 在 30% 以上的案例中，页面在
onload触发后是可交互的；在 15% 的案例中，用户在触发后尝试进行交互，onload并且是可交互的。
减少愤怒点击的最佳时机是什么时候？
Akamai观察到：
- 大多数使用 Rage Click 的用户尝试与页面进行交互的时间是页面视觉准备时间的 1.25 到 1.5 倍。
- 他们建议确保页面具有交互性，并且加载速度比视觉准备时间快 1.3 倍。
有关这项研究的更多信息，请参阅Philip Tellis 撰写的《重要的用户体验和性能指标》 。
互动时间与整体转化率可能高度相关
在2017年的一项研究中，Akamai和Chrome发现，在三个真实世界的网站（零售、旅游和游戏）中，互动时间与整体转化率高度相关。转化可以是点击按钮完成购买流程，也可以是对互动产生的任何其他类型的响应。
他们发现：
- 耗时过长的任务直接延迟了交互时间。
- 随着首页长时间任务完成时间的增加，整体转化率下降。
- 移动设备的长时间任务处理时间可能是台式机的 12 倍。
- 老旧设备可能有一半的加载时间都花在了耗时较长的任务上。
注意：这显然是一个很小的样本量，每个网站的情况都可能不同。
加载阶段的详细过程
这事真的发生了吗？它有用吗？
当用户及时收到“正在处理”的反馈时，他们会感觉更好，并且认为网站速度更快。同时，你也不希望用户看到一个“有用”但却无法交互的页面，因为页面尚未准备就绪。这会让他们觉得网站无法使用。
第一幅画
首次绘制事件标志着浏览器能够渲染出与导航前不同的视觉内容。它确认渲染已经开始。这可能是一个重要的指标，因为“空白屏幕”的持续时间可能是页面放弃的最重要指标。
第一内容绘画
首次内容绘制 (First Contentful Paint) 是指浏览器渲染 DOM 中的第一个内容——可以是文章文本、图像或 SVG。其目的是希望通过此次绘制来传达导航已成功启动的信息。
它能用吗？
正如我在《JavaScript 的代价》一文中提到的，网络存在一个问题。许多网站都在优化内容可见性，却忽略了交互性，因为它们用于实现交互的 JavaScript 代码需要时间处理。这意味着大量热门网站在加载完有用内容到用户真正“可用”或可交互之间，存在数秒的延迟。在此期间，用户会感觉网络运行缓慢且响应迟钝。
交互时间和首次输入延迟
可交互时间(TTI) 是衡量网页变为可交互状态所需时间的指标。其定义为：
- 页面显示了有用的内容
- 大多数可见页面元素都注册了事件处理程序。
- 当用户与页面交互时，页面始终在 50 毫秒内做出响应——用户不会遇到卡顿现象。
当页面具有极佳的 TTI（响应时间间隔）时，用户可以非常自信地在界面上点击，页面会立即响应。这完全符合RAIL 性能模型中的空闲状态准则：页面至少每 50 毫秒将控制权交还给主线程一次。网络处于空闲状态。具体来说，只剩下两个未完成的网络请求。
首次输入延迟 (FID) 是 TTI 在该领域的补充指标 - 它衡量从用户首次与页面交互（例如点击按钮）到浏览器实际响应交互的时间。
优化以用户为中心的指标
专注于优化以用户为中心的指标最终将改善用户体验。如果您想减少……
交互时间或首次输入延迟：
- 少做点工作
- 使用代码分割拆分大型 JavaScript 包
- 将耗时较长的任务拆分。考虑将耗时较长的非主线程迁移到工作线程中。
- 将非关键工作推迟到页面加载完成后再进行。
第一幅画和第一幅内容画：
- 从头部移除渲染阻塞脚本。
- 确定所需的关键 CSS并将其内联到
<head> - 应用外壳模式 - 改善用户对渲染 UI 骨架的感知
监控指标
PageSpeed Insights、WPT和Lighthouse等性能工具可捕获以用户为中心的加载指标：
对于 CLI 用户，也可以通过Paul Irish 和 Artem Denysov 的pwmetrics获取它们。
对于现场指标监控（通过 RUM），我推荐使用Paint Timing API ，它提供首次绘制 (First Paint) 和首次内容绘制 (First Contentful Paint) 功能。此外，它还提供了一个用于首次输入延迟 (First Input Delay)的 polyfill 。结合分析服务，这些功能可以记录真实用户的渐进式 Web 指标。
Chrome用户体验报告（也可在 PageSpeed Insights 中找到）提供了使用 Chrome 的真实用户的一些指标（例如首次内容绘制和首次输入延迟）：
我也喜欢用SpeedCurve或Calibre来跟踪 FCP 和 TTI 等指标随时间的变化。它们还允许我为这些指标设置性能预算，这有助于检测性能下降：
调试指标
Chrome DevTools 现在会在“性能”面板中突出显示性能指标。这些指标位于“计时”下方：
除了其他方面之外，这些指标还会暴露出来，这在尝试改进迭代工作流程的时间时可以提供价值。
参考资料及了解更多信息
- 指标与测量领域的最新进展 - 保罗·艾瑞什
- 重要的用户体验和性能指标 - Philip Tellis
- 以用户为中心的绩效指标 - 菲利普·沃尔顿
- 可靠地测量野外环境中的反应能力 - Shubhie Panicker 和 Nick Jansma
- 高速模具——现状：伊丽莎白·斯威尼和保罗·艾瑞什
- 关注以人为本的指标——拉迪米尔·比特索夫
- 利用渐进式 Web 指标改进您的 Web 应用程序 - Artem Denysov
- 为什么网页开发者需要关注交互性——菲利普·沃尔顿
- 第一输入延迟 - 菲利普·沃尔顿
- 首次输入延迟 - 网络现状 - Rick Viscomi
- 理解网络挫败感的指南
- 首次输入延迟：与 TTI 的相关性 - Tim Dresser
- 事件计时 API - Tim Dresser 和 Nicolás Peña Moreno