性能预算

性能预算是一个限制，用于防止回归。它可以应用于文件、文件类型、页面加载的所有文件、特定指标（例如，时间交互）、自定义指标（例如，时间到英雄元素）或一段时间内的阈值。

为什么我需要性能预算？

预算存在是为了反映您的可达目标。它是在用户体验与其他性能指标（例如转化率）之间的权衡。

这些目标可以是

  • 基于时间的（例如，时间交互、首次内容绘制）。
  • 基于数量的（例如，JS 文件数量/总图像大小）。
  • 基于规则的（例如，PageSpeed 指数、Lighthouse 得分）。

它们的主要目标是防止回归，但它们可以提供洞察力来预测趋势（即，在 9 月，50% 的预算在一周内就花掉了）。

此外，它还可以发现开发需求（即，经常选择带有较小替代方案的大型库来解决常见问题）。

如何定义性能预算？

预算应包含 2 个级别

  • 警告。
  • 错误。

警告级别允许您主动采取措施并计划任何技术债务，同时不会阻止开发或部署。

错误级别是上限，超出此级别，更改将产生负面且明显的影响。

为了开始，您需要首先衡量用户来自的设备和连接速度（例如，在 3G 连接下使用约 200 美元的 Android 设备），使用多个 工具。这些基于时间的指标将转换为文件大小预算。

降低跳出率的默认基线是在 3G/4G 网络下实现 时间交互低于 5 秒，后续加载低于 2 秒。但是，根据您网站的特定目标和内容，您可能选择专注于其他指标。

对于像博客或新闻网站这样的文本密集型网站，首次内容绘制 指标可能更能反映用户行为。（即，用户多快开始阅读），这将告知特定文件的预算（例如，字体大小）及其优化。（例如，使用 font-display 提高 感知性能）。

性能预算的最终价值是将性能对业务或产品目标的影响相关联。定义指标时，您应该关注 用户体验，这不仅会决定跳出率或转化率，还会决定用户返回的可能性。

如何实现性能预算？

在开发过程中，有一些工具可以运行检查以针对新资产或已修改资产进行检查

  • 模块捆绑器（例如，webpack）具有 性能功能，当资产超过指定限制时，它会通知您。
  • Bundlesize 允许您在持续集成 (CI) 管道中定义和运行文件大小检查。

文件大小检查是防止回归的第一道防线，但将大小转换回时间指标可能很困难，因为开发环境可能缺少第三方脚本，以及 CDN 通常提供的优化。

第一步是为每个分支定义一个开发基线以进行比较，开发和生产之间的差异精度可以用作更好地匹配实时环境的目标。

Lighthouse Bot 与 Travis CI 集成，可用于从开发 URL 收集 Lighthouse 和 Webpage Test 指标。该机器人将根据提供的最低得分通过或失败。

如何执行性能预算？

您越早识别出可能导致预算超支的潜在添加，您就越能分析您网站的当前状态，并确定优化或不必要的代码。

但是，您应该拥有多个预算并保持动态。它们旨在反映您正在进行的目标，但允许风险和实验。例如，您可以引入一个功能，该功能会增加总的加载时间，但试图提高用户参与度。（即，用户在页面或网站上停留多长时间）。

性能预算可以帮助您保护当前用户的最佳行为，同时使您能够进入新市场并提供定制体验。

另请参阅