Lowe's 网站是效果最快的电子商务网站之一

通过建立自动化的性能测试和监控系统,Lowe's Site Speed 团队能够根据性能预算测试拉取请求,并防止在生产环境中出现性能下降问题。

Abhimanyu Raibahadur
Abhimanyu Raibahadur
Ashish Choudhury
Ashish Choudhury
Dhilip venkatesh Uvarajan
Dhilip venkatesh Uvarajan
Dinakar Chandolu
Dinakar Chandolu
Garima Mimani
Garima Mimani
Safwan Samla
Safwan Samla

Lowe's 是一家收入近 900 亿美元的家居装修零售商,经营约 2,200 家门店,员工超过 30 万名。通过构建自动化测试和监控系统来防止部署到生产环境时性能下降,Lowe's 的 Site Speed 团队能够提高其网站的性能,跻身顶级零售网站之列。

问题

网站速度团队的目标是让 Lowe's 网站在网页加载性能方面成为最快的电子商务网站之一。 在构建自动化测试和监控系统之前,Lowe's 网站开发者无法在预生产环境中自动衡量效果。现有工具仅在生产环境中执行了测试。因此,劣质 build 被纳入到生产环境中,造成了糟糕的用户体验。 在网站速度团队检测到这些劣质版本并将其还原之前,这些版本仍会在生产环境中使用。

解决方案

网站速度团队使用开源工具为预生产环境构建了自动化的性能测试和监控系统。 系统会衡量每个拉取请求 (PR) 的性能,并在 PR 不符合网站速度团队的性能预算指标标准时,限制将 PR 交付到生产环境。该系统还会衡量搜索引擎优化 (SEO) 和 ADA 合规性。

影响

自动化性能测试和监控系统阻止了 1 个团队在 16 周的时间里部署 102 个 build,阻止了 32 个性能不佳的 build 进入生产环境。

过去,网站速度团队需要 3 到 5 天才能通知开发者他们已将性能下降问题发布到生产环境中,而现在,在预生产环境中提交拉取请求 5 分钟后,系统会自动通知开发者出现性能问题。

代码质量随时间的推移而不断提升,衡量依据是被标记为性能下降的拉取请求数量减少。网站速度团队还会逐步收紧治理预算,以便不断提高网站质量。

一般来说,明确地掌握有问题的代码已经改变了工程文化。由于无法确定问题真正是由谁引发的,因此该团队不应被动地进行更正,而是可以主动优化,对有问题的代码的所有权进行客观归因。

实现

网站速度治理 (SSG) 应用的核心是 Lighthouse CI。 SSG 应用使用 Lighthouse 验证和审核每个拉取请求的页面性能。

下文稍后部分介绍了 SSG 应用的流程图,图中显示的步骤。

如果未达到网站速度团队定义的性能预算和指标目标,SSG 应用会导致构建失败。它不仅会提高加载性能,还会强制执行 SEO、PWA 和无障碍功能。 它可以立即向作者、审核者和 SRE 团队报告状态。 它还可以配置为在需要异常时绕过检查。

自动速度治理 (ASG) 流程

Spinnaker

起点。开发者将其代码合并到预生产环境。

  1. 使用 CDN 资源部署预生产环境。
  2. 检查部署是否成功。
  3. 运行 Docker 容器以开始构建 ASG 应用或发送通知(在部署失败时)。

Jenkins 和 Lighthouse

  1. 使用 Jenkins 构建 ASG 应用。
  2. 运行安装了 Chrome 和 Lighthouse 的自定义 Docker 容器。从 SSG 应用拉取 lighthouserc.json 并运行 lhci autorun --collect-url=https://example.com

Jenkins 和 SSG 应用

  1. 从 lhci 中提取 assertion-results.json,并将其与 budgets.json 中的预定义预算进行比较。将输出结果另存为文本文件,并将其上传到 Nexus 以供日后比较。
  2. 将当前的 assertion-results.json 与上一个成功的 build(从 Nexus 下载)进行比较,并将其保存为文本文件。
  3. 创建一封包含成功或失败信息的 HTML 电子邮件。
  4. 使用 Jenkins 向相关分发列表发送电子邮件。