改进 Telegraph Media Group 的 Cumulative Layout Shift

英国一家知名新闻网站在几个月内就将第 75 百分位数的 CLS 从 0.25 提高到了 0.1，提升幅度达到了 250%。

Chris Boakes

注意： Chris 是 The Telegraph 的首席软件工程师。

视觉稳定性挑战

布局偏移可能会造成严重干扰。在 Telegraph Media Group (TMG) 看来，视觉稳定性尤为重要，因为读者主要通过我们的应用来获取新闻。如果在阅读文章时布局发生变化，读者可能会迷失在其中。这可能会让用户感到沮丧和分心。

从工程角度来看，确保页面不会发生偏移并干扰读者可能很难，尤其是当应用的区域异步加载并动态添加到页面时。

在 TMG 中，我们有多个团队负责贡献客户端代码：

• 核心工程。实现第三方解决方案，以支持内容推荐和评论等领域。
• 营销。运行 A/B 测试，评估读者与新功能或更改的互动情况。
• 广告。管理广告请求和广告预出价。
• 编辑。在文章（例如推文或视频）以及自定义 widget（例如新型冠状病毒感染病例跟踪器）中嵌入代码。

确保这些团队中的每个团队都不会导致网页布局发生剧烈变化，这可能很难。使用累计布局偏移指标衡量读者发生此问题的频率后，这些团队深入了解了真实的用户体验，并确定了明确的目标。这使得第 75 个百分位的 CLS 从 0.25 提高到了 0.1，通过测试的百分比从 57% 提高到了 72%。

250_%

第 75 百分位 CLS 改进幅度

15_%

CLS 得分较高的用户更多

我们的起点

通过使用 CrUX 信息中心，我们发现我们的网页发生的变化超出了预期。

2020 年 6 月至 2021 年 2 月之间的累计布局偏移得分。

理想情况下，我们希望至少 75% 的读者都能获得“良好”体验，因此我们开始找出布局不稳定的原因。

我们如何衡量布局偏移

我们结合使用 Chrome 开发者工具和 WebPageTest，帮助找出导致布局偏移的原因。在 DevTools 中，我们使用了性能标签页的体验部分来突出显示布局发生变化的具体实例，以及这些实例对总体得分的影响。

使用 Chrome 开发者工具的“体验”部分，找出由在标题上方客户端加载的广告导致的布局偏移。

选择“突出显示布局偏移”后，WebPageTest 会在时间轴视图中突出显示布局偏移的位置，非常有用。

WebPageTest 突出显示了布局发生偏移的位置。

在查看最常访问的模板的每次转变后，我们列出了一系列有关如何改进的想法。

减少布局偏移

我们重点关注了可以减少布局偏移的四个方面： - 广告 - 图片 - 标题 - 嵌入内容

广告

广告会在初始绘制后通过 JavaScript 加载。它们加载到的一些容器没有任何预留高度。

广告加载后，广告下方的“更多故事”版块会向下移。

虽然我们不知道确切高度，但可以通过在广告位中加载最常见的广告尺寸来预留空间。

通过为广告预留空间，下方的“更多故事”版块在广告加载之前和之后都保持静态。

在某些情况下，我们误判了广告的平均高度。对于平板电脑阅读器，该槽会收起。

在平板电脑大小的设备上，广告位在为读者加载后会收起。

我们重新审视了该槽，并调整了高度，以使用最常见的尺寸。

确保我们为广告展示位置预留的空间与广告最常投放的高度相符。

图片

网站上的许多图片都是延迟加载的，并且为它们预留了空间。

在不破坏布局的情况下延迟加载图片。

不过，文章顶部的内嵌图片在容器上没有预留任何空间，也没有与标记关联的宽度和高度属性。这导致布局在加载时发生了偏移。

由文章的主图片导致的布局偏移。

只需向图片添加宽度和高度属性，即可确保布局不会发生偏移。

主文章图片加载时不会导致布局发生偏移。

标题

标题在标记中的位于内容下方，并使用 CSS 放置在顶部。最初的想法是优先加载内容，然后再加载导航栏，但这导致页面暂时发生了偏移。

网页的标题加载不雅观。

将标题移至标记的顶部后，页面在呈现时就不会出现这种偏移。

布局不再因页面加载的标头而中断。

嵌入

一些常用的嵌入内容具有已定义的宽高比。例如，YouTube 视频。在播放器加载时，我们会从 YouTube 提取缩略图，并在视频加载时将其用作占位符。

视频播放器在加载时，视频播放器广告位加载低分辨率缩略图。

衡量影响

我们能够使用本文开头提到的工具轻松衡量功能级影响。不过，我们希望同时在模板级别和网站级别衡量 CLS。我们综合使用了 SpeedCurve 来验证预生产环境和生产环境中的更改。

使用 SpeedCurve 合成地跟踪 CLS 进度。

然后，在代码正式发布后，我们就可以通过 RUM 数据（由 mPulse 提供）验证结果。

在更改前后使用 mPulse RUM 数据验证网站范围内的 CLS 改进。

通过查看 RUM 数据，我们可以非常确信，我们所做的更改对读者有积极影响。

我们查看的最终数据是 Google 收集的 RUM 数据。这对您来说尤为重要，因为这些指标很快就会影响网页排名。首先，我们使用了 Chrome 用户体验报告，包括通过 CrUX 信息中心提供的月度来源级数据，以及通过查询 BigQuery 检索历史 p75 数据。这样一来，我们便可以轻松发现，对于 CrUX 衡量的所有流量，75 百分位数 CLS 从 0.25 提高到了 0.1，提升了 250%，通过测试的百分比从 57% 提高到了 72%。

Crux 信息中心中的结果。

BigQuery 运行作业，显示 2021 年年初至今的 p75 值。

此外，我们还能够使用 Chrome 用户体验报告 API，并创建一些拆分为模板的内部信息中心。

利用 Chrome UX Report API 构建的内部信息中心，突出显示平均得分以及使用该模板的表现最差的网页。

避免 CLS 回归

提升性能的一个重要方面是避免出现回归问题。我们为关键指标设置了一些基本效果预算，并在其中纳入了 CLS。

效果预算信息中心，其中显示了对我们部分高流量模板衡量 CLS 的综合检查。预算目前设为 0.025。

如果测试超出预算，系统会向 Slack 频道发送消息，以便我们调查原因。我们还设置了每周报告，这样一来，即使模板仍在预算范围内，我们也能及时了解是否有任何更改产生了负面影响。

我们还计划扩大预算，以便使用 RUM 数据和合成数据，并使用 mPulse 设置静态提醒和可能的异常检测，以便及时了解任何异常变化。

在开发新功能时，请务必考虑 CLS。我提到的许多更改都是在向读者发布后才发现的，我们不得不进行修复。我们今后在设计任何新功能的解决方案时，都会考虑布局稳定性，以便从一开始就避免任何意外的布局偏移。

总结

我们迄今为止做出的改进非常容易实现，并且成效显著。我在这篇文章中列出的许多更改都很快就完成了，并且应用到了所有最常用的模板，这意味着这些更改对我们的读者产生了广泛的积极影响。

我们网站仍有待改进的地方。我们正在探索如何在服务器端执行更多客户端逻辑，以进一步提高 CLS。我们将持续跟踪和监控指标，以便不断改进这些指标，并为读者提供尽可能出色的用户体验。