可能影响这一核心网络要素的因素
CLS 分数较低的最常见原因有：
无尺寸的图像
无尺寸的广告、嵌入内容和 iframe
动态注入的内容
Web 字体导致 FOIT/FOUT（不可见文本闪烁和无样式文本闪烁）
更新 DOM（文档对象模型）之前等待网络响应的操作——通常由广告引起。
没有尺寸的图片和广告是导致 CLS 得分较低的两个常见原因。本文 埃及 WhatsApp 负责人 探讨了您应该注意的另外 3 个原因。@MarketMuseCo #corewebvitals #SEO
点击推文
如何解决 CLS 成绩不佳的问题
让我们看看如何解决这些累积的布局转变问题，以使您的 CLS 分数摆脱“差”的境地。
设置图像和视频元素的尺寸属性
宽度和高度尺寸属性使浏览器能够正确分配必要的空间，以发生偏移。如果您使用的是 WordPress，这应该不是问题，因为默认情况下会添加图像尺寸。
如果不是这种情况，许多 WordPress 页面速度优化插件可以自动包含任何缺失的尺寸。
另一种方法是通过 CSS。正如Google 文档所解释的那样，“现代浏览器现在根据图像的宽度和高度属性设置图像的默认纵横比，因此设置它们对于防止布局偏移非常有用。”
例如，指定两个尺寸后，您可以设置宽度，浏览器会自动设置正确的高度 — 因为它知道正确的宽高比。由于浏览器在加载之前计算图像的宽高比，因此不会发生布局偏移。
对于响应式图像，srcset 属性允许浏览器根据您上传的图像显示最适合环境的尺寸。
管理广告、嵌入和 iframe 的空间
以下是减少大幅布局偏移的一些最佳做法：
为每个广告分配尺寸，保留足够的空间。
为屏幕外广告分配空间，以便它们不会导致布局转变。
当没有返回广告时，使用占位符元素。不要折叠预留空间。
将非粘性广告放置在远离视口顶部的位置
预先计算嵌入和 iframe 的足够空间，并设置占位符或后备元素。
管理动态内容
处理动态内容的最佳方法是不要将其插入现有内容之上，除非它是对用户交互的响应。请记住，CLS 仅查看在没有用户交互的情况下发生的布局变化。如果您使用的是 WordPress 页面优化插件，请检查是否可以延迟 JavaScript 执行直到有交互，从而避免意外的布局变化。
一些 WordPress 插件（如相关文章）可能会插入动态内容。
Slicksream 参与设置显示空间预留以管理动态内容。
来源
如果插件正在维护，开发人员应该在其设置中的某处提供解决该问题的规定。
预加载字体
预加载字体是处理 FOUT（当备用字体被替换为新字体时）和 FOIT（当显示不可见文本直到新字体呈现时）的最佳方式。它告诉浏览器优先加载此资源，以便在加载页面的主要内容时将其包含在内。
这是我们博客中的一个示例，其中字体以 WOFF2 格式预加载，这是目前可用的最小文件大小。
网页源代码显示了如何预加载字体。
点击展开图像。
我们的博客主题的开发人员对此进行了编码。但 WordPress 页面优化插件包含预加载字体的功能。如果您缺乏开发资源，请查看此选项。
如果您获得 PageSpeed Insight 的“确保文本在 Webfont 加载期间保持可见”建议，预加载字体也会有所帮助。
总结
意外的布局变化令人烦恼；不可否认，它会带来糟糕的页面体验。幸运的是，CLS 为我们提供了一种客观的方式来评估问题的严重程度。虽然每个网站都是独一无二的，但有一些共同的因素会导致 CLS 分数低。其中一些问题您可能可以自己解决，而另一些则可能需要高级技术技能。