一个专注于优化 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 提供的压缩机制，而 Brotli 将 JS 大小与 gzip 相比减少了 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 Website Monitoring 收集的实测数据，研究了推出该功能前后的 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 深入研究用户数据并生成本案例研究中介绍的所有转化分析结果。