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