我为什么需要性能预算?
预算的存在是为了反映您可达到的目标。这是用户体验与其他性能指标(例如转化率)之间的权衡。
这些目标可以是
它们的主要目标是防止性能退化,但它们可以提供洞察力来预测趋势(即,在 9 月份,一周内花费了预算的 50%)。
此外,它可以揭示开发需求(例如,一个包含较小替代方案的大型库经常被选中来解决一个常见问题)。
我如何定义性能预算?
一个预算应包含 2 个级别
- 警告。
- 错误。
警告级别允许您主动规划任何技术债务,同时又不阻止开发或部署。
错误级别是一个上限,在此之下,更改将产生负面且明显的影响。
第一步是测量您的用户来自的设备和连接速度(例如,在 3G 连接下使用约 200 美元的 Android 设备),并使用多个工具。这些基于时间的指标将转化为文件大小预算。
减少跳出率的一个默认基准是在 3G/4G 下实现交互时间在 5 秒以内,后续加载在 2 秒以内。但是,根据您网站的具体目标和内容,您可能选择关注其他指标。
对于像博客或新闻网站这样的以文本为主的网站,首次内容绘制指标更能密切反映用户行为。(即,用户能多快开始阅读),这将告知文件特定的预算(例如,字体大小),以及它们的优化。(例如,使用font-display来提高感知性能)。
性能预算的最终价值在于将性能对业务或产品目标的影响关联起来。在定义指标时,您应该关注用户体验,这不仅决定了跳出率或转化率,还决定了用户返回的可能性。
我如何实现性能预算?
在开发过程中,有几种工具可以对新资产或修改过的资产进行检查
- 模块打包器(例如,webpack)具有性能功能,当资产超过指定限制时会通知您。
- Bundlesize允许您在持续集成(CI)管道中定义和运行文件大小检查。
文件大小检查是防止性能退化的第一道防线,但将大小转换回时间指标可能很困难,因为开发环境可能缺少第三方脚本,以及CDN通常提供的优化。
第一步是为每个分支定义一个开发基准进行比较,开发与生产环境之间的差异精度可以作为实现更好匹配实时环境的目标。
Lighthouse Bot与Travis CI集成,可用于从开发 URL 收集Lighthouse和Webpage Test指标。该机器人将根据提供的最低分数通过或失败。
我如何强制执行性能预算?
您越早发现可能超出预算的新增内容,就越能更好地分析您网站的当前状态,并找出优化或不必要的代码。
但是,您应该有多个预算并保持动态。它们旨在反映您当前的目標,但允许承担风险和进行实验。例如,您可能会引入一个功能,该功能会增加整体加载时间,但会尝试提高用户参与度。(例如,用户在页面或网站上停留的时间)。
性能预算可以帮助您保护当前用户的最佳行为,同时使您能够进入新市场并提供定制体验。