RUM 实践 - 累计布局偏移（CLS）的探索

原文作者：西风

原文来源：vx 公众号 乘云数字 DATABUFF

原文地址：https://mp.weixin.qq.com/s/wVOyYEhpuFPkp3nZFdkHfQ

随着互联网技术的发展，网站性能优化成为提升用户体验的关键因素之一。Google 提出了 Core Web Vitals 作为衡量网页质量的新标准，其中累计布局偏移（Cumulative Layout Shift, CLS）是衡量页面视觉稳定性的一个重要指标。本文将探讨如何通过 DATABUFF 的 RUM 工具来监测和改善网页的 CLS 值。

一、CLS 的定义与标准

累计布局偏移（Cumulative Layout Shift**, CLS）** 是 Google Core Web Vitals 中的核心指标之一，通过结合可见内容在视口中的偏移量与受影响元素移动的距离来衡量内容的不稳定性。布局偏移可能会分散用户注意力，干扰用户的浏览体验，比如点击目标突然移动等。CLS 衡量在网页的整个生命周期内发生的每一次意外布局偏移的布局偏移得分的最高累计分数，有助于量化用户遇到意外布局偏移的频率，是评估用户体验的关键数据点之一。

CLS 分数越低，说明页面越稳定；反之，则表明页面存在较多不稳定因素。为了提供良好的用户体验，网站应尽量确保至少 75% 的网页访问的 CLS 不高于 0.1。

二、为什么需要关注 CLS

1. 提升用户体验：减少不必要的布局变动可以让用户更加专注于内容本身。

2. SEO 优化：Google 已明确表示会将 CLS 纳入其搜索排名算法中，因此良好的 CLS 表现有助于提高网站的可见度。

3. 增强品牌形象：流畅稳定的网页加载过程能够给访客留下深刻印象，从而增强品牌信任感。

三、收集 RUM 数据

要优化 CLS，首先需要收集网站的真实用户监控（RUM）数据。这可以通过 DATABUFF 的 RUM 工具来完成：

将下方代码复制粘贴到每一个您想监控的 HTML 页面中标签的第一行，确保能采集全部性能指标和错误信息。

<script src="/js/browser.js" type="text/javascript"></script><script>window.dataBuffOpenTelemetryRum.initialize({  collectionSourceUrl: "https://192.168.50.147/rum",  applicationName: "databuff-rum",  applicationKey: "a8d8bcc4-xxxx-xxxx-xxxx-c02f0a6695ca",});</script>

通过 Chrome 浏览器访问嵌码页面，按 F12，然后在 network 中搜索 “traces”，若有 traces 接口数据，即为嵌码成功。 traces 接口为嵌码成功后上传性能数据。

四、数据展示

应用详情中查看 CLS 指标的平均值和时间趋势：

通过 CLS 排序能够展示不同页面 CLS 的情况，根据页面的指标表现来针对性的优化 CLS ：

五、CLS 优化

为图像和视频预留尺寸

• 使用width和height属性为图像明确指定尺寸。

• 对于响应式布局，使用 CSS 的aspect-ratio属性。

• 视频元素可以设置固定宽高，或者通过外部容器限制尺寸。

<img src="example.jpg" width="800" height="600" alt="example">

或使用 css：

img {  aspect-ratio: 4 / 3;  width: 100%;  height: auto;}

避免动态加载内容推挤页面

• 为广告和 iframe 设置固定的占位符尺寸。

• 确保动态内容加载时不会改变布局。

.ad-placeholder {  width: 300px;  height: 250px;  background-color: #f0f0f0;}

使用字体优化

• 使用font-display: swap;优化字体加载。

• 选择性能更好的字体，或加载字体的子集。

@font-face {  font-family: 'CustomFont';  src: url('customfont.woff2') format('woff2');  font-display: swap;}

延迟加载非关键内容

• 使用loading="lazy"属性延迟加载图片和 iframe。

• 确保 lazy-loaded 内容不会改变页面的原始布局。

<img src="example.jpg" loading="lazy" width="800" height="600" alt="example">

预加载关键资源

• 使用 <link rel="preload"> 提前加载字体和其他关键资源。

<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

六、总结

累计布局偏移（CLS）是衡量视觉稳定性的关键指标，直接关系到用户的使用体验。通过 RUM 工具收集真实的用户数据，可以有效分析并优化 CLS 表现。优化 CLS 可以采取诸如为图像和视频预留固定尺寸、优化字体加载策略、以及延迟加载非关键资源等措施，这些方法不仅有效提升了页面的视觉稳定性，还显著改善了用户体验。