累积布局移位（CLS）是衡量用户体验事件的Google度量标准，并成为2021年的排名因子。
这意味着了解CLS是什么以及如何优化它是很重要的。[图123是累积布局换档的定义
是什么是累积布局换档？
CLS是页面仍在下载时的网页元素的意外移位。倾向于引起换档的元素的种类是字体，图像，视频，联系人表单，按钮和其他类型的内容。
最小化CLS很重要，因为绕过的页面可能会导致用户体验不佳。
较差的CLS分数表示可以解决的编码问题。
根据谷歌的方式
为什么CLS发生
有五个原因为什么累积布局移位发生了：
没有尺寸的图像。没有尺寸的，没有尺寸的IFRAMES.Dynamically注入的内容。在更新DOM之前等待网络响应等待网络响应的线路字体。
图像和视频需要具有HTML中声明的高度和宽度尺寸。关于响应图像，确保不同视口的不同图像大小使用相同的宽高比。
谷歌推荐使用
Aspectratiocalculator.com
来计算纵横比的广告联系。这是一个很好的资源。
广告可以导致CLS
这个人有点棘手。处理引起CLS的广告的一种方法是在广告将显示的元素中展示。例如，如果您的风格为特定的高度和宽度，则该广告将被限制为那些。
如果缺乏库存和广告，则有两个解决方案没有出现。如果包含广告的元素没有显示广告，则可以设置它，以便使用替代横幅广告或占位符图像来填充空间。
或者，对于某些布局，在网页的右侧或左排水室的顶部填充整行的布局，如果页面未显示，则不会出现偏移。它不会在移动或桌面上进行差异。但这取决于主题布局。
如果广告库存是一个问题，你必须测试。
动态注入的内容
这是我的内容s注入网页。例如，在WordPress中，您可以链接到YouTube视频或推文和WordPress将显示视频或推文作为嵌入对象。
广告Continue读数下面
基于Web的字体
下载的Web字体可能导致内容文本（FOIT）和闪存的内容闪烁的文本（Fout）。
一种防止该方法的方法rel =下载该Web字体的链接中的“预加载”。
灯塔可以帮助您诊断导致CL的内容。
CLS可以在开发期间潜入
累积布局换档可以在开发阶段滑过。可能发生的是，许多渲染页面所需的资产都将加载到浏览器的缓存上。
下次开发人员或发布者vis它在开发下的页面，由于已经下载了页面元素，它们不会注意到布局班次。
下面的广告联系读数
这就是在实验室或现场中具有测量非常有用的原因。
如何计算累积布局偏移
计算涉及两个度量/事件。第一个被称为冲击级分。
冲击级分
碰撞部分是测量不稳定元素在视口中占用的空间有多少。
一个视口是你的请参阅移动屏幕。
当元素下载然后转移时，从视口中占用的位置占用的元素占用的总空间在渲染页面时首先呈现给最终位置时。
广告继续读数下面
谷歌使用的示例是占据50％的元素，然后掉下另一个25％。
在一起添加，75％值称为影响分数和它表示为0.75的分数。
距离级分
第二测量被称为距离分数。距离分数是页面元素从原始位置移动到最终位置的空间量。
在上面的示例中，页面元素移动25％。
所以现在累积布局分数通过由距离分数的影响分数相乘来计算：
0.75×0.25 = 0.1875
有一些更多的数学和其他考虑事项而进入计算。什么是重要的远离这一点是，分数是测量重要用户体验因素的一种方法。
在下面
如何测量CLS
有两种方法来测量CLS。谷歌在实验室中致电了第一种方式。在该字段中调用第二种方式。在实验室中
在实验室中模拟下载网页的实际用户。谷歌使用A
模拟MOTO G4，用于在实验室环境中生成CLS分数
。
实验工具最适合了解布局在推动它到用户之前可以执行。它为发布商提供了对
的机会来测试问题的布局
。
实验室工具
包括
Chrome Dev工具
和
灯塔。理解累积布局换档
这对unde非常重要划分累积布局换档。没有必要了解如何自己进行计算。
广告联系读数下面
，但了解它的意义以及它如何运作是关键，因为这已成为核心网络毒品排名因素的一部分。
精选的图像学分：Paulo Bobita
