核心网络生命力的更新现已广泛传播，许多人正在采取措施优化他们的网站分数。
在我们博客的其他文章中，我们已经详细讨论了如何优化 LCP 指标（即最大累积绘制）。
但是，核心网络生命力分为 3 个不同的分数，因此除了 LCP 值之外，还有另外 2 个：CLS 和 FID。
在本文中，我们将详细介绍如何优化 CLS，在我看来，这是最复杂的指标。
CLS 表示页面加载期间意外的布局改变
许多 WordPress 网站经常出现这个问题，因为在主题的开发阶段没有太多关注首屏 JavaScript 和 CSS 的管理。
该指标不仅影响 Web Vitals 分数，还影响用户体验 (UX)，例如，如果访问页面的用户准备点击某个元素，但与此同时，加载改变了其位置，并会导致 匈牙利号码 用户按下页面的另一个元素，例如他不想按下的横幅或链接，或者博客文章上的另一个示例，CLS 可能会让用户失去阅读点，用户将不得不再次找到该点。
CLS 也受到设备连接类型的强烈影响。请记住，大多数用户都是通过“慢速”网络连接的，因此考虑这一方面就显得更为重要。
简而言之，我们理解您的网站进行这些布局更改并不令人愉快。
累积布局偏移的原因
导致 CLS 分数较低的原因有很多，应根据每个项目 跨渠道协调挑战 现代数字营销涉 的具体情况进行解决。然而最常见的可能是这些：
- 没有高度和宽度定义（尺寸未知）的图像标签、iframe、视频、嵌入
- Web 字体导致 FOIT/FOU
- 注入 JavaScript 内容
- 更新 DOM 之前等待网络响应的操作
- 处理异步 CSS 文件和内联 CSS。
- 这些是最常见和最常见的原因，我想指出的一个重要问题是网络托管问题和影响核心网络生命力所有参数的资源响应。
如何计算网页的 CLS
累积布局偏移用以下公式来衡量：
布局偏移分数 = 影响分数 * 距离分数
影响分数衡量不稳定元素对两帧之间窗口区域的影响，见下图：
图像中占据视口一半的元素，这意味 购买线索 着在下一帧中，该元素将向下移动窗口高度的 25％。
虚线红色矩形表示元素在两个框架中的可见区域的并集，在本例中为整个窗口的 75%，因此其影响分数为 0.75。
距离分数是任何“不稳定”元素在框架内移动的最大距离（水平或垂直）。