根据搜索引擎巨头谷歌的说法，累积布局偏移有 5 个可能的原因：
没有尺寸的图像和视频
建议始终指定图像和视频的宽度和高度。
您还可以利用 CSS 纵横比框来允许浏览器在图像加载时在网页上分配适当数量的空间。
无尺寸的广告、嵌入内容和 iframe
广告尺寸可以通过高点击率来增加收入。
然而，这会将内容推到页面下方，从而损害用户体验的质量。
可以通过为广告位预留空 工程师数据库间来缓解这种布局偏移，通过为广告位预留最大可能尺寸来消除偏移，或根据历史数据选择广告位的最佳可能尺寸。
动态注入的内容
避免在现有内容上方插入任何新内容，除非是为了响应用户交互。
这将确保发生的任何布局变化都是预期的，而不是触发图像或文本意外移动。
Web 字体导致 FOIT/FOUT
尝试将 font:display 值与自定义字体（如 auto、swap、block、fallback 和optional）结合使用，以防止不必要的布局转变。
为了确保布局没有偏移，请什么是市场？在这里如何赚钱？建议 使用 font:display 和 link rel=preload。
任何使用该字体的元素都将被隐藏，直到字体资产完全下载为止，这称为 FOIT（不可见文本的闪烁）。
动画来源：malthemithers.com
在自定义字体加载之前，字体堆栈 CA 细胞数 中后备字体的显示称为 FOUT（无样式文本闪烁）。
更新 DOM 之前等待网络响应的操作
对于触发布局变化的属性动画，始终使用“变换”动画。
广告如何影响 Google CLS 分数？
为了处理导致 CLS 的广告，您需要对将要展示广告的元素进行样式设置。
因此，如果您 在 WordPress 中设置 div、图像或视频部分，或任何具有特定高度和宽度测量值的网站元素，您的广告将仅限于上述尺寸内。
如果包含广告的元素不显示广告，您可以设置以替代横幅广告或占位符图像来填充空白空间。
或者，在某些布局中，广告可能会填满页面右侧或左侧边缘的列顶部的整行。
如果页面没有出现，则不会发生变化，并且在移动设备或桌面上也不会产生任何区别。
但是，您应该注意，这取决于主题布局，如果广告库存存在问题，您必须对其进行测试。
CLS 如何在 Web 开发过程中下滑？
Google CLS 可能会错过开发阶段。
以下是可能发生的情况。
呈现网页所需的许多资产都被加载到浏览器的缓存中。
下次开发人员访问正在开发的页面时，他们不会注意到布局变化，因为页面元素已经下载。
因此建议在现场或实验室进行测量。
累积布局偏移测试
累积布局偏移性能网站指标可以通过以下任一方式来衡量：
现场工具
现场：实际与页面交互的真实用户。可以使用以下现场工具进行测量：
Chrome 用户体验报告
它为现实世界的Chrome 用户如何体验网络上的热门目的地提供了用户体验指标。
PageSpeed 洞察
该工具可分析网页内容并生成建议，使网页速度比以前更快。
搜索控制台（核心网络生命力报告）
Search Console 根据实际使用数据（有时称为字段数据）显示您的网页表现如何。
实验室工具
在实验室中：使用工具模拟受控环境中的页面加载可以使用以下实验室工具进行测量：
Chrome 开发者工具
Chrome DevTools可以帮助您动态编辑页面并快速诊断问题，最终使您能够更快地构建更好的网站。
灯塔
LightHouse 是一个开源的、自动化的网页质量改善工具。
您可以针对任何网页、公共网页或需要身份验证的网页运行它。
它对性能、可访问性、渐进式 Web 应用程序、SEO 等进行审核。
网页测试
使用真实的浏览器以消费者连接速度在全球范围内运行免费网站速度测试，并提供详细的优化建议。
根据web.dev；警告：实验室工具通常在合成环境中加载页面，并且仅测量页面加载期间的布局变化。
因此，实验室工具针对给定页面报告的 CLS 值可能小于实际用户在现场体验到的值。
检查累积布局偏移的快速工具
1. Chris Johnson 的 Defaced Tool 中的GIF 格式的 CLS用于识别有问题的 LS。
2.累积布局偏移计算器
CLS 计算存在缺陷
谷歌收到了有关 CLS 指标不足以衡量长时间打开的网页的反馈，因此会对其给予较低的分数进行惩罚。
Google 审查了三种更新 CLS 评分方式的解决方案，因此不必担心 CLS 分数会因这一变化而变差。
用于测量 CLS 的会话窗口
Google 采用会话窗口方法来衡量 CLS。
页面元素的测量以会话窗口为单位，它对应于用户向下滚动网页时到达的不同部分。
每个会话窗口的总得分是累积布局偏移，即整个页面的总偏移。
许多 CLS 分数将会改变
根据 Google 的数据，大约 55% 的网页的累积布局偏移分数不会发生变化。只有大约 42% 的网站的分数会略有提高。
3% 的具有无限滚动或用户界面处理程序对用户交互反应较慢的网页的分数将上升到良好评级。
更新使 CLS 分数更加准确
新的评分系统变得更加公平，这对出版商来说是件好事，特别是对于那些长时间打开或采用无限滚动的网页，因为它们的评分不公平。
由于核心网络生命力指标被定位为排名因素，因此这是一个重要的改变。
结论
了解累积布局偏移 (CLS) 将帮助您在未来提供更好的用户体验。
由于该指标是改善用户体验的核心网络生命力指标的一部分，并计划在 2021 年成为排名信号，因此了解其对您网站的重要性和影响非常重要。
