本节会针对，累计布局偏移(Cumulative Layout Shift)，进行详细介绍，教你如何进行CLS页面布局的优化。

前提知识点

1. 图片宽高比

图片的比例影响布局：当浏览器加载并渲染网页时，它需要预留足够的空间来容纳图片。如果没有指定图片的宽高比，浏览器无法确定图片的确切尺寸，从而可能导致页面布局发生变化。通过指定宽高比，可以让浏览器提前计算和预留正确尺寸的空间，避免布局偏移和重新渲染。

图片宽高比图片不按比例显示会失真：如果将一个不符合原始宽高比的图片强制拉伸或压缩来适应特定容器的尺寸，图片会被拉伸或压缩，从而导致失真。通过保持正确的宽高比，可以确保图片在展示时保持原始比例，避免图像变形。响应式设计中的重要性：在响应式网页设计中，根据屏幕尺寸和设备类型，页面布局和图片尺寸都会发生变化。通过在 CSS 中使用相对单位和媒体查询来确定图片的宽高比，可以使图片在不同设备上具有适应性，并保持适当的比例。

2. FOIT/FOUT

FOIT（Flash of Invisible Text）和FOUT（Flash of Unstyled Text）是在 Web 开发中遇到的两种字体加载方式引起的现象。

• FOIT（Flash of Invisible Text）：

在使用自定义字体时，浏览器可能因为网络延迟或字体文件较大而无法立即加载字体文件。当浏览器尝试应用自定义字体之前，文本内容将以默认字体显示。一旦字体文件加载完成，文本内容会突然切换到自定义字体，导致瞬间的闪烁或跳跃感觉。 

• FOUT（Flash of Unstyled Text）：

与 FOIT 相反，FOUT 指的是在使用自定义字体时，浏览器初始时会先使用默认字体显示文本，然后再加载完字体文件后重新渲染页面，将文本内容切换到自定义字体。这种现象通常是由于使用了 @font-face 规则并设置了 font-display: swap;，或者浏览器默认的字体加载行为所导致的。

谷歌提供的一个累积布局偏移的例子

这两种现象都会影响用户体验，因为在字体加载过程中，文字可能会变得难以阅读、跳跃或闪烁。为了解决这些问题，可以采取以下策略：

• 使用系统默认字体或通用字体作为备用字体，确保即使自定义字体加载失败，文本内容仍然可读。
• 预先加载字体文件，以减少字体加载时间。可以使用 preload 或 font-display: swap; 等技术来实现。
• 使用字体加载器（font loader）等工具来控制字体的加载和显示方式，从而更好地管理 FOIT 和 FOUT。

什么是CLS？

1. CLS举例我们先举个例子，当用户在网上阅读一篇文章，结果页面上的某些内容突然发生改变，文本在毫无预警的情况下移位，导致用户找不到先前阅读的位置。或者更糟糕的情况：用户正要点击一个链接或一个按钮，但在手指落下的瞬间，链接移位了，导致用户点到了不相关的东西。

谷歌提供的一个累积布局偏移的例子作为访问此网站的用户，您可能不确定它何时真正完成加载。你可能会尝试点击一个新闻故事，但布局却发生了巨大的变化。结果你最终在错误的页面上，你不得不浪费时间回去。根据页面的不同，这可能会发生多次。如果是这样，你很有可能会离开。为了能够尽量防止该事情的发生，留住用户，给用户提供良好的浏览体验，谷歌引入累积布局偏移 (Cumulative Layout Shift，简称CLS)指标，用于衡量网页加载过程中布局稳定性，衡量的是视觉上可见元素的意外移动量的累积值。

CLS能够使用各种工具进行“客观”（以用户为中心）地测量，尽管无法控制不同用户的设备改变网站布局的变化方式，但可以通过优化该指标，并且采取预防措施，使其产生的不良影响降到最小。

什么导致了累计布局偏移？

1. 图片、视频等媒体元素加载时未指定尺寸：当媒体元素在加载过程中没有明确指定尺寸，浏览器可能会先按默认尺寸进行布局，然后在加载完成后重新调整布局，导致页面发生意外移动。

2. 自定义字体加载延迟：如果页面上的字体加载存在延迟，用户可能会看到文本在加载之前使用了默认字体，然后在字体加载完成后突然变化，导致布局发生移动。

3. 动态插入的内容：当动态插入新的内容，例如广告、弹窗或其他动态元素时，它们的出现会导致布局突然改变，造成页面移动。  异步加载的内容：某些网页组件或内容可能会以异步方式加载，当它们加载完成时，它们会插入到现有布局中，这可能导致页面发生意外移动。

4. JavaScript 的执行：如果 JavaScript 被延迟执行或以异步方式加载，它可能会影响到布局的稳定性，因为脚本的执行可能会导致元素的位置和尺寸发生变化。

如何测量CLS？

1. Lighthouse工具

（1）在Chrome浏览器应用商店中安装Lighthouse扩展程序，确保您使用的是最新版本的Chrome浏览器。

（2）打开需要测试的网页，并打开Chrome浏览器的开发者工具。您可以通过右键点击页面并快捷键F12选择”检查”来打开开发者工具。

（3）在开发者工具中，切换到”Lighthouse”选项卡。 

（4）点击”Lighthouse”选项卡下方的”生成报告”按钮。

（5）在弹出的对话框中，确保选择“性能”作为测试类型，然后点击”运行”按钮。

（6）Lighthouse将开始运行各种性能测试，包括CLS。测试完成后，将生成一个综合性能报告。

（7）在报告中，您可以找到CLS得分以及其他与性能相关的指标。CLS得分将以小数形式显示，表示页面布局变化的程度。除了Lighthouse之外，还有其他性能监测工具可用于测量CLS，例如PageSpeed Insights和WebPageTest。这些工具也可以提供CLS得分和其他与页面性能相关的指标。

2.使用PageSpeed Insights

请注意，在进行CLS测量时，应尽量模拟真实用户体验。因此，建议在移动设备上进行测试，并使用慢速网络连接条件。这样可以更准确地了解用户在实际情况下可能遇到的页面布局偏移问题。考虑到这一点，衡量网站CLS的最佳工具是PageSpeed Insights。这与Google的Core Web Vitals直接相关，因此您可以直接了解您的CLS分数如何影响Google如何看待您的网站。

PageSpeed Insights我们能在谷歌浏览器搜索PageSpeed Insights，输入网页URL即可获得性能报告，其中包括CLS指标，同时能查看手机和桌面设备对应着的不同的诊断报告。

在诊断报告下半部分能够筛选查看CLS指标，还会提供优化建议和详细的诊断结果。

3. 使用JavaScript来测量CLS

测量CLS（以及所有其他重要的web线上指标）的最简单方法是使用web-vitals JavaScript库，该库将我们需要手动测量CLS的所有复杂点都封装到了一个函数中： 

import { getCLS } from "web-vitals"; // Measure and log the current CLS value,// any time it's ready to be reported.getCLS(console.log);

要手动测量CLS，使用Layout Instability API 来手动测量CLS（Cumulative Layout Shift）并将数据记录到控制台，可以按照以下步骤进行操作：

// 创建一个数组来保存每个布局偏移实例的详细信息let layoutShiftEntries = [];
// 创建一个PerformanceObserver对象const observer = new PerformanceObserver((list) => { const entries = list.getEntries();
// 遍历每个布局偏移实例的entries entries.forEach((entry) => { // 如果是布局偏移实例 if (entry.hadRecentInput) { // 将布局偏移实例的详细信息保存到数组中 layoutShiftEntries.push({ startTime: entry.startTime, value: entry.value, }); } });});
// 启动PerformanceObserver来观察LayoutShift事件observer.observe({ type: 'layout-shift', buffered: true });
// 监听页面加载完成事件，并在页面加载完成后输出保存的布局偏移实例window.addEventListener('load', () => { console.log('Layout Shift Entries:'); layoutShiftEntries.forEach((entry, index) => { console.log(`Shift ${index + 1} - Start Time: ${entry.startTime}, Value: ${entry.value}`); });});

CLS得分

根据谷歌的核心网页指标，一个好的累积布局偏移分数应是0.1或更少。当累积布局偏移分数在0.1和0.25之间，谷歌将其定义为需要改进。而当累积布局偏移分数高于0.25，谷歌将其定义为差。

在优化网页布局稳定性时，我们应该努力将累积布局偏移分数降低到0.1或以下，以提供更好的用户体验和良好的页面性能。

如何确定导致布局偏移的原因？

可以快捷键 (CTRL-SHIFT-I) 打开谷歌开发者工具，跳转到性能 选项卡，或者快捷键F12打开控制台选择“性能”选项卡，能够在浏览网络时记录性能测试。

停止录制后，Chrome Dev Tools将返回一个时间轴，显示加载时间、单个请求和 Core Web Vitals。从此时间线中，您可以选择在Experience下列出的各个Layout Shift事件。这样，就可以看到它们对应于哪些元素。

当你知道是什么元素导致了布局变化，你就可以采取措施来解决这个问题。我们将在下一节讨论这一点。

如何优化CLS分数？

1. 显示指定媒体元素的尺寸：

<img src="imagejpg” width="300” height="200”alt="图片">2. 预留空间给动态或异步加载的内容（预留空间给图片、视频和广告）

<!-- 使用固定的宽度和高度预留图片空间 --><img src="placeholder.jpg" alt="Image" width="300" height="200">
<!-- 使用固定的宽度和高度预留视频空间 --><video src="video.mp4" width="640" height="360" controls></video>
<!-- 为广告预留一个固定的容器 --><div class="ad-container" style="width: 300px; height: 250px;"></div>3. 避免插入新的内容造成布局变化：在页面加载完成后再动态添加内容，或者提前为新内容预留空间。  控制和优化 JavaScript 的执行：确保脚本不会影响布局。例如，使用 requestAnimationFrame 来处理样式变化，以确保在更新布局之前进行渲染。

4. 延迟加载非关键资源

<!-- 延迟加载图片 --><img src="placeholder.jpg" data-src="image.jpg" alt="Image" width="300" height="200" loading="lazy">
<!-- 延迟加载视频 --><video data-src="video.mp4" width="640" height="360" controls preload="none"></video>
<!-- 延迟加载广告 --><div class="ad-container" style="width: 300px; height: 250px;"> <script> function loadAd() { var ad = document.createElement("script"); ad.src = "ad.js"; document.querySelector(".ad-container").appendChild(ad); } window.addEventListener("DOMContentLoaded[Something went wrong, please try again later.]

最后

在用户的网站上，提供强大的用户体验涉及许多因素。这包括快速的加载速度和易于互动，同时也要避免布局中的元素位移。剧烈的布局变化可能导致用户感到挫败，甚至产生误点击，进而增加跳出率。这对于任何网站来说都是不利的。优化网站加载速度、改善互动性，并减少元素位移，是实现良好用户体验的关键。通过合理的设计和布局，确保页面元素的稳定性，可以消除用户的挫败感，并增加他们的参与度和留存率。

欢迎关注霆万科技，我们是一家致力于帮助中国企业从0到1打造面向全球的DTC品牌的服务提供商，主要建站,SEO,广告投放,战略顾问,如果有以上服务可以添加微信拉群对接：nanxipeng