Zalando 的 Web 团队发现，集成 Lighthouse CI 后，他们能够以主动的方式管理性能，自动状态检查功能能够将当前提交内容与主分支进行比较，以防止性能回归。
Zalando 是欧洲领先的在线时尚平台，拥有超过 3500 万活跃客户。在本文中，我们将介绍为何开始使用 Lighthouse CI、实现的简单性，以及对我们团队的好处。
Zalando 深知网站效果与收入之间的关系。 过去，我们曾测试人为延长目录页加载时间对跳出率、转化率和每位用户收入的影响。结果显而易见。网页加载时间缩短了 100 毫秒，互动度随之提高，跳出率降低，每次访问带来的收入提高了 0.7%。
100 毫秒
缩短网页加载时间
0.7%
每次会话的收入增加
公司支持并不一定能带来成效
尽管公司内部对效果非常重视，但如果未将效果设为产品交付标准，效果就很容易被忽视。在 2020 年重新设计 Zalando 网站时，我们专注于提供新功能，同时保持出色的用户体验，并通过自定义字体和更鲜艳的颜色为网站改头换面。不过，当经过重新设计的网站和应用准备好发布时，早期采用者指标显示新版本的速度较慢。First Contentful Paint 最多会慢 53%，而我们测量到的可交互时间最多会慢 59%。
Zalando 网站
Zalando 网站由开发框架的核心团队创建，超过 15 个功能团队贡献了前端微服务。在支持新版本的同时，我们还将部分网站迁移到了更集中的架构。
之前的架构称为 Mosaic，其中包含一种使用内部指标衡量网页效果的方法。不过，在面向真实用户发布之前，我们很难比较性能指标，因为缺少内部实验室性能监控工具。尽管每天都进行部署，但对于致力于提升性能的开发者来说，反馈周期大约为一天。
网页指标和 Lighthouse 大显身手
我们对自己的内部指标并不完全满意，因为它们无法很好地适应我们的新设置。 更重要的是，它们并未以客户体验为中心。 我们之所以改用核心网页指标，是因为它们提供了一组简洁、全面且以用户为中心的指标。
为了在发布前提升性能，我们需要创建适当的实验室环境。除了代表现场数据第 90 百分位的测试条件之外，这还提供了可重复的测量结果。现在，负责提升性能的工程师知道应该将精力集中在哪些方面，以取得最大的成效。我们已经在本地使用 Lighthouse 审核报告。 因此，我们的第一个迭代是基于 Lighthouse 节点模块开发了一项服务，可在我们的预演环境中测试更改。这为我们提供了大约一小时的可靠性能反馈环，使我们能够使性能达到同等水平，并挽救了我们的发布版本！
针对拉取请求向开发者提供性能反馈
我们不想就此止步，而是希望借此机会，不仅能对效果进行被动响应，还能主动采取措施。从 Lighthouse 节点模块跳转到 Lighthouse CI (LHCI) 服务器并不难。我们选择了自托管解决方案，以便更好地与现有的公司服务集成。 我们的 LHCI 服务器应用会构建为 Docker 映像，然后与 PostgreSQL 数据库一起部署到 Kubernetes 集群，并报告到 GitHub。
我们的框架已经在向开发者提供一些性能反馈，即在每次提交时将组件软件包大小与阈值进行比较。现在，我们可以将 Lighthouse 指标作为 GitHub 状态检查进行报告。如果这些测试不符合性能阈值，则会导致 CI 流水线失败，并会显示指向详细 Lighthouse 报告的链接，如下图所示。
扩大效果覆盖面
我们从一个非常务实的方法开始。 目前，Lighthouse 仅针对两个最重要的网页运行：首页和商品详情页。幸运的是，Lighthouse CI 可让您轻松扩展运行配置。负责我们网站上特定网页的功能团队可以设置匹配的网址格式和断言。有了这些措施，我们非常有信心，我们的效果覆盖率将会提高。
现在，我们在构建更大的版本时更加有信心，开发者可以更快地获得有关其代码性能的反馈。