一项专注于优化核心网页指标并迁移到 Next.js 的项目,使转化率提高了 5%,每次会话访问的网页数增加了 87%。
QuintoAndar 是一家巴西房地产科技公司,其产品为房地产行业提供端到端数字解决方案。今年,我们开展了一项旨在提升应用内内容中心效果的项目,并取得了令人鼓舞的成效,成功提高了用户流量和转化指标。
46%
跳出率降低
87%
每次会话浏览页数增加
5%
验证阶段的转化次数有所增加
挑战
我们的应用有一个包含 4 万多页内容的公寓内容中心,用户可以在其中获取其房源的相关信息、查看公共区域的照片、了解社区信息,以及查找可供出租或出售的房源。以下页面对 QuintoAndar 非常重要:
- 搜索引擎是自然流量的重要来源,通过搜索引擎结果获取的用户数量在不断增加。
- 与其他网页相比,这些网页的中长期转化率较高。
不过,这些网页的性能和用户体验存在一些问题:
- 其性能未经过优化(以 Core Web Vitals 衡量),存在与网页加载缓慢、对用户输入的响应速度缓慢和布局不稳定相关的已知问题。
- 其跳出率较高,即使我们预计其跳出率会高于应用的其他部分也是如此。
- Google 搜索中的网页体验更新(当时尚未发布)将核心 Web 指标纳入排名算法,这意味着网页性能可能会影响搜索结果的显示方式。
与此同时,我们还发现了一些开发者体验方面的改进机会,这些改进有助于公司在其他项目中取得成效:
- 我们的服务器端呈现逻辑(用于呈现所有高流量页面,包括共管公寓页面)是内部创建的,但变得过于复杂,无法进行维护和培训新员工。
- 为了实现良好的应用性能,必备的功能(例如代码分块)还需要开发者进行自定义设置和手动操作。
- QuintoAndar 拥有 30 多个 React Web 应用。按照最佳实践为这些应用提供更新并进行维护是一项艰巨的任务。
做法
我们开始了对共管公寓内容中心的效果优化项目,以改善其用户体验,因为这些改进可能会带来转化次数增加、SEO 效果提升和易用性改善。这项计划也是改善开发者体验的绝佳机会。
迁移到 Next.js
新版公寓页面是使用 Next.js 实现的。由于与应用的其他部分基本独立,因此公寓内容中心似乎是试用新框架的理想人选。我们将能够了解迁移工作量,并评估其功能如何在不影响 QuintoAndar 中的其他 React 应用的情况下提供帮助。
一项硬性要求是确保网页仍然可供搜索引擎抓取。Next.js 可满足此要求,因为它开箱即支持服务器端渲染,无需进行自定义设置。借助文档,您可以更轻松地分享有关如何执行服务器端数据提取等任务以及如何引导新开发者的知识。众所周知,服务器端渲染还可以提升性能指标,例如 First Contentful Paint (FCP)。
该框架还提供其他有助于提升性能的功能,例如自动代码分块和prefetching。尽管现有结构已经提供了此类功能,但开发者需要执行额外的工作,这导致他们推迟了采用这些功能。例如,必须手动进行页面级或组件级代码分块。
优化 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 内置图片组件包含许多此类优化,例如自适应调整大小和优先加载。在本项目中,我们没有迁移现有图片以使用此组件,但计划在新功能中采用此组件。
减少布局偏移
该联排别墅页面存在一些累积布局偏移 (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 计划。在该项目的实施过程中,我们发现网页性能也是这些因素之一,具有极大潜力带来积极的转化影响。
特别感谢搜索引擎优化团队的产品经理 Pedro Carmo,感谢他深入研究用户数据,并创建了本案例中所示的所有转化分析。