改进 Telegraph Media Group 的 Cumulative Layout Shift

在几个月内，这家领先的英国新闻网站成功将其第 75 百分位的 CLS 从 0.25 提高到了 0.1，提高了 250%。

Chris Boakes

视觉稳定性挑战

布局偏移可能会造成严重干扰。在 Telegraph Media Group (TMG)，视觉稳定性尤为重要，因为读者主要使用我们的应用浏览新闻。如果在阅读文章时布局发生变化，读者可能会找不到之前所处的位置。这可能会让用户感到不快，并会分心。

从工程的角度来看，确保页面不会移位并干扰读者可能具有挑战性，尤其是当应用区域是异步加载并动态添加到页面时。

TMG 有多个团队负责客户端代码：

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

确保其中每个团队都不会导致页面布局抖动，这可能很难实现。该团队使用 Cumulative Layout Shift 指标来衡量此变更对读者的发生频率，从而深入了解实际用户体验并制定明确的目标。这导致我们的第 75 个百分位 CLS 从 0.25 提高到 0.1，并且通过的存储分区从 57% 增长到 72%。

250%

第 75 百分位 CLS 改进

15%

CLS 得分较高的用户增幅

起点

借助 CrUX 信息中心，我们能够确定网页的变化幅度超出我们的预期。

CrUX 信息中心显示大约 55-60% 良好，15% 需要改进，25% 的低分需要改进。
我们在 2020 年 6 月至 2021 年 2 月期间的 Cumulative Layout Shift 得分。

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

我们如何测量布局偏移

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

《电讯报》的头版，标头中有一个广告，上面叠加着蓝色叠加层。
使用 Chrome 开发者工具的“体验”部分，确定标头上方广告加载客户端导致的布局偏移。

WebPageTest 会突出显示选择“突出显示布局偏移”后在时间轴视图中发生布局偏移的位置，

“Telegraph”网站的 WebPageTest 幻灯影片视图，其中以红色叠加层突出显示了 layoutshift。
WebPageTest 突出显示布局偏移的位置。

在审核了我们最常访问的模板的每项调整后，我们针对如何改进制定了一份建议列表。

减少布局偏移

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

广告

广告会在初次绘制后通过 JavaScript 加载。这些容器加载的某些容器没有预留高度。

Telegraph 网站的动画。当故事列表在其上方加载广告时，故事列表会下推。
在广告加载后，广告下方的“更多故事”块会移位。

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

Telegraph 网站的动画。系统会在故事列表上方放置一个矩形占位矩形。广告会代替占位符进行加载，且不会导致布局偏移。
通过预留广告空间，下方的“更多故事”版块将在广告加载前后保持静态。

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

《电讯报》网站的平板电脑视图动画。占位符广告位大于广告，因此内容会在广告加载后移位。
在尺寸为平板电脑的设备上，为读者加载后，广告位会收起。

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

《电讯报》网站的平板电脑视图动画。如果占位符与广告尺寸匹配，则广告加载时不会发生布局偏移。
确保我们为广告位预留的空间与广告最常投放的高度相匹配。

图片

网站上的许多图片都是延迟加载的，系统会为其预留空间。

文章预览卡片正在加载的动画。
延迟加载图片，而不中断布局。

但是，文章顶部的内嵌图片在容器中没有预留任何空间，也没有与标记相关联的宽度和高度属性。这会导致布局在加载时发生变化。

文章页面加载的动画。在页面顶部加载主图片后，文字会向下移动。
由文章的主图片引起的布局偏移。

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

文章页面的加载动画，其中预留了主图片占位符。主图在页面顶部加载时，不会发生布局偏移。
主文章图片加载，且不会导致布局偏移。

标头位于标记中的内容下方，并使用 CSS 将其放置在顶部。最初的想法是优先考虑导航之前的内容加载，但这会导致页面短暂偏移。

ALT_TEXT_HERE
正常加载的网页的页眉。

将页眉移至标记的顶部后，网页无需此偏移即可呈现。

ALT_TEXT_HERE
布局不会再因网页加载的标头而中断。

嵌入

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

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

衡量影响

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

SpeedCurve 图表：显示 CLS 得分急剧下降。
使用 SpeedCurve 综合跟踪 CLS 进度。

然后，在代码正式投入使用后，我们能够验证 RUM 数据（由 mPulse 提供）中的结果。

显示 CLS 得分下降的 mPulse 图表。
在做出更改之前和之后，使用 mPulse RUM 数据验证网站级 CLS 改进。

查看 RUM 数据可以让我们确信我们所做的更改会对读者产生积极影响。

我们查看的最终数据是 Google 收集的 RUM 数据。现在，这项指标尤为重要，因为它们很快就会影响网页排名。 对于初学者，我们使用了 Chrome 用户体验报告，既可以通过 CrUX 信息中心获取每月源站级数据，也可以通过查询 BigQuery 来检索 p75 历史数据。通过这种方式，我们很容易就能看到，对于 CrUX 衡量的所有流量，第 75 百分位的 CLS 从 0.25 提高到 0.1，提高了 250%，通过范围从 57% 增长到了 72%。

CrUX 信息中心显示 telegraph.co.uk 的 p75 CLS 为 0.1。
Crux 信息中心内的结果。
BigQuery 显示第 75 百分位的值每个月从 0.25 增加到 0.1。
BigQuery 运行会显示 2021 年至今的 p75 值。

此外，我们能够利用 Chrome UX Report API 并创建一些拆分为模板的内部信息中心。

内部信息中心，显示平均良好得分为 76.2，需要改进 9.3，低得分为 14.6。
利用 Chrome UX Report API 的内部信息中心，突出显示我们的平均分数以及使用该模板时表现最差的网页。

避免 CLS 回归

改进性能的一个重要方面是避免性能下降。我们为关键指标设置了一些基本的性能预算，并且在其中纳入了 CLS。

性能预算信息中心，其中显示了在我们的一些高流量模板上衡量 CLS 的综合检查。预算目前设为 0.025。

如果测试超出预算，它将向 Slack 频道发送消息，以便我们调查原因。我们还设置了每周报告，这样即使模板仍在预算内，我们也知道发生了任何负面影响。

我们还计划增加预算，以使用 RUM 数据以及合成数据，方法是使用 mPulse 来设置静态提醒和潜在的异常值检测，让我们知道任何异常变化。

对我们而言，在开发新功能时一定要牢记 CLS。我提到的很多更改都是在向读者发布之后必须进行修复的。今后，在设计任何新功能时，布局稳定性都将成为一项解决方案设计考量因素，以便我们能够从一开始就避免任何意外的布局偏移。

总结

到目前为止，我们做出的改进易于实现，并产生了显著的影响。我在本文中概述的许多更改都没有花太多时间，而是应用于所有最常用的模板，这意味着它们给我们的读者带来了广泛的积极影响。

该网站还有一些地方需要改进。我们正在探索通过哪些方式可以在客户端逻辑服务器端执行更多工作，这将进一步改善 CLS。我们将持续跟踪和监控指标，以便不断地改进这些指标，尽可能为读者提供最佳的用户体验。