某个专注于优化 Core Web Vitals 并迁移到 Next.js 的项目使转化率提高了 5%，每次会话浏览页数增加了 87%。
QuintoAndar 是巴西的一家资产技术公司，其产品为房地产提供端到端数字化解决方案。今年，我们开展了一项旨在提升应用内内容中心效果的项目，并取得了令人鼓舞的成效，成功提高了用户流量和转化指标。
46%
跳出率降低
87% 的用户
每次会话浏览页数增加
5%
验证阶段的转化次数有所增加
挑战
我们的应用有一个公寓内容中心，拥有超过 40,000 个页面，用户可以在这里获取物业信息、查看公共区域的照片、了解社区的信息，并查找可供出租或出售的房源。以下页面对 QuintoAndar 非常重要：
- 搜索引擎是自然流量的重要来源，通过搜索引擎结果获得的用户数量在不断增加。
- 与其他网页相比，这些网页的中长期转化率较高。
然而，这些页面的性能和用户体验存在一些挑战：
- 它们通过核心网页指标衡量的性能未得到优化，并且存在一些已知问题，包括网页加载缓慢、对用户输入的响应速度缓慢和布局不稳定。
- 其跳出率较高，即使我们预计其跳出率会高于应用的其他部分也是如此。
- Google 搜索中的网页体验更新（当时尚未发布）将在排名算法中包含核心网页指标，这意味着网页性能可能会影响搜索结果的显示方式。
与此同时，我们还发现了一些开发者体验方面的改进机会，这些改进有助于公司在其他项目中取得成效：
- 我们的服务器端渲染逻辑（渲染所有高流量网页，包括公寓页面）是在内部开发的，由于太过复杂，新员工无法对其进行维护和引导。
- 为了实现良好的应用性能，必备的功能（例如代码分块）还需要开发者进行自定义设置和手动操作。
- QuintoAndar 拥有 30 多种 React Web 应用。按照最佳实践为这些应用提供更新并进行维护是一项艰巨的任务。
做法
我们开始了公寓内容中心的性能优化项目，以改善其用户体验，因为这些改进可以带来转化，改善搜索引擎优化 (SEO) 和易用性。此计划也是改善开发者体验的绝佳机会。
迁移到 Next.js
新版公寓页面是使用 Next.js 实现的。由于与应用的其他部分基本独立，因此公寓内容中心似乎是试用新框架的理想人选。我们将能够了解迁移工作量，并评估其功能如何在不影响 QuintoAndar 中的其他 React 应用的情况下提供帮助。
一项硬性要求是确保网页仍然可供搜索引擎抓取。Next.js 可满足此要求，因为它开箱即支持服务器端渲染，无需进行自定义设置。借助该文档，您可以更轻松地分享相关知识，例如在服务器上执行数据提取以及培训新开发者。众所周知，服务器端渲染还可以提升性能指标，例如 First Contentful Paint (FCP)。
该框架还提供其他性能良好的功能，例如自动代码拆分和预提取。尽管现有结构已经提供此类功能，但开发者所需的额外工作阻碍了他们的采用。例如，必须手动进行页面级或组件级代码分块。
优化 JavaScript 资源
第一步是移除未使用的代码。我们查看了 Webpack Bundle Analyzer 报告（其中显示了每个 JS 软件包的内容），并仔细审核了所有第三方脚本。因此，我们清理了此特定页面中未使用的一些跟踪库。
我们的团队更进一步，评估了现有功能的性能开销。例如，“赞”按钮需要大量的 JS 才能运行。然而，在公寓页面中，只有不到 0.5% 的用户与该按钮进行了互动。该按钮在应用的其他部分中提供且使用得更为频繁。经过工程和产品方面的讨论，我们决定移除此功能。
我们还进行了其他 JS 优化，例如使用 Brotli 进行静态压缩，该优化是在构建时使用 BrotliWebpackPlugin 完成的，并应用于其他类型的静态资源。起初，我们依赖 CDN 提供的压缩功能，与 gzip 相比，Brotli 将 JS 大小缩减了 18%。不过，我们在构建时改用 Brotli 压缩，并将大小缩减了 24%。
优化图片资源
移动版中有一个主打图片占据了折叠线上方大部分区域。它也是网页的 Largest Contentful Paint (LCP)。
以前，所有图片都已具有 srcset 和 sizes 属性，以提供响应式图片。我们还使用 Thumbor 按需调整图片大小，并配置了 CDN 以高效缓存图片。
现代移动设备的显示屏像素密度非常高，这意味着浏览器会渲染图片的 3 倍或 4 倍版本（如果有）。随着分辨率的提高，人眼越难察觉差异，但文件大小无论如何都会增加。设置图片分辨率上限：可在不影响用户体验的情况下优化图片大小。我们将主推图片的尺寸限制为最多 2 倍，这比 3 倍版本小约 35%，比 4 倍版本小约 50%。
最后，我们使用了预加载策略，以便尽快下载并显示该图片，希望能改善 LCP 指标。
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
Next.js 内置图片组件包含许多此类优化，例如自适应调整大小和优先加载。在此项目中，我们没有迁移现有图片以使用此组件，但计划在新功能中采用此组件。
减少布局偏移
公寓页面存在几个与 Cumulative Layout Shift (CLS) 相关的问题。导致布局偏移的元素仅在客户端中呈现，例如，使用客户端呈现的组件水化服务器端标记，或未定义 width 和 height 属性的图片。
为解决这些问题，我们会尽可能为这些元素设置确切的尺寸，或使用 min-height 设置估算值。还有更多选项，例如使用 aspect-ratio CSS 属性。我们还创建了占位符，以防止动态呈现的组件导致布局偏移。
逐步发布更改
我们的团队希望验证优化后的公寓中心页面，确保用户体验会更好。为此，我们采用了渐进式发布策略：
- 在第一阶段，新版本只针对几个精心挑选的网址发布，因此，每天只有几百名用户才能看到它们；
- 在第二阶段，该功能面向更多网页发布，每天有数千名用户使用；
- 在第三个也是最后一个阶段，我们面向所有网页发布了该功能，并面向所有用户完成了该功能的发布。
在此期间，工程团队不断衡量生产环境中的网页性能，并不断改进。此外，该团队还比较了新版和旧版的业务指标。在此验证期内取得的结果令人鼓舞。
结果
该团队使用 SpeedCurve 针对公寓页面持续运行实验室测试。以下是移动版的结果：
| 实验指标 | 之前 | 之后 | 差额 |
|---|---|---|---|
| Largest Contentful Paint (LCP) | 2.41 秒 | 1.48 秒 | -39% |
| 可交互时间 (TTI) | 12.16 秒 | 7.48 秒 | -39% |
| Total Blocking Time (TBT) | 1124 毫秒 | 1056 毫秒 | -4% |
| Cumulative Layout Shift (CLS) | 0.0402 | 0.0093 | -77% |
我们还希望了解对真实用户的影响。我们使用通过 Instana 网站监控工具收集的现场数据，对该功能发布前后 1 个月的时间段进行了分析。比较移动用户的第 75 个百分位数后，我们发现 LCP 降低了 26%，FID 降低了 72%。
PageSpeed Insights 会提供过去 28 天的现场数据报告。仅访问量最多的公寓页面就包含足够的数据，可为移动用户生成报告。自 2021 年 11 月起，所有 Core Web Vitals 指标均处于“良好”分桶。
在逐步推出过程中，我们发现跳出率有所下降。在我们为所有网页完成发布后，Google Analytics 显示跳出率下降了 46%，每次会话浏览的网页数增加了 87%，平均会话时长增加了 49%。付费搜索的跳出率降低幅度更大，达到了 59%。对于投资于按点击付费 (PPC) 广告的情况来说，这是一个积极的信号。
至于对业务指标的影响，我们分析了预约导览和申请租赁或购买房产等交易的转化率。在改进措施仍在推出期间，我们的团队比较了旧版和新版之间的转化情况。在同一周内，采用新版本的网页组的转化次数提高了 5%，而其他网页的同一指标略有下降。
总结
此项目是从无框架 React 迁移到 Next.js 的长期迁移工作的第一部分。自那以后，负责处理公寓页面的团队对改进后的开发者体验给予了积极反馈。其他必须引导启动新 Web 应用的团队已经使用 Next.js 完成了此操作。我们相信 Next.js 将简化维护工作，并在不同应用之间建立共同点。
总体而言，在用户和交易绝对数量方面，共管公寓内容中心一直在不断增长。从长期分析来看，造成这一结果的因素有很多，例如 QuintoAndar 的业务扩张以及改进网页索引编制等 SEO 计划。在该项目的实施过程中，我们发现网页性能也是这些因素之一，具有极大潜力带来积极的转化影响。
特别感谢 SEO 团队产品经理 Pedro Carmo 深入研究用户数据，完成本案例研究中介绍的所有转化分析。