什么是累积布局偏移（CLS）？

累积布局偏移 (CLS)

累积布局偏移（CLS）是谷歌开发的一项核心网站指标，用于衡量网页的视觉稳定性。它量化了网页在整个生命周期内发生的所有意外布局偏移的总和。当可见元素从一个渲染帧到下一个渲染帧的位置发生变化时，就会发生布局偏移。

CLS 分数范围从 0（表示没有移动）到 0 以上（表示不同程度的不稳定性）。该公式考虑了每次移动的影响分数和距离分数，计算出元素移动的幅度以及它们覆盖视口的面积。

CLS 对用户体验至关重要，因为意想不到的布局变化会导致用户失望。例如，如果用户正要点击一个按钮，但布局发生了变化，导致他们无意中点击了其他东西，这可能会导致糟糕的用户体验和潜在的转换损失。

无尺寸图像：
- 在 HTML 中包含图片而不指定其宽度和高度会导致布局偏移，因为浏览器不知道最初要分配多少空间。
无尺寸的广告、嵌入和 Iframe：
- 如果没有事先指定这些元素的尺寸，它们可能会动态加载并导致布局偏移。
动态注入内容：
- 在 DOM 中现有内容的上方添加内容会将元素向下推移，从而导致移动。
导致 FOIT/FOUT 的网络字体：
- Flash of Invisible Text (FOIT) 和 Flash of Unstyled Text (FOUT) 会在浏览器加载网页字体时导致布局偏移。

在图片和视频中包含尺寸属性：
- 始终在 HTML 中定义图片和视频的宽度和高度，以便在加载之前在布局中预留空间。
为广告和嵌入预留空间：
- 使用 CSS 为广告位、iframe 和嵌入式广告设置尺寸，以避免加载时出现布局偏移。
避免在现有内容上动态注入内容：
- 在折叠下方或已预留空间的容器内添加新内容。
使用字体加载策略：
- 利用字体显示 CSS 属性来控制网页字体的显示方式，并尽量减少因 FOIT/FOUT 而产生的偏移。
使用 CSS 变换制作动画
- 使用 transform 属性而不是 top、bottom、left 或 right 来为元素制作动画，而不会导致布局偏移。

累积布局偏移（CLS）是确保稳定和视觉吸引力用户体验的重要指标。通过了解导致布局偏移的因素并实施最佳实践来尽量减少布局偏移，您就能提高网页的 CLS 分数并提升整体用户满意度。

有关改进 CLS 和其他核心网络生命体征的更多信息，请参考 Google 的网络生命体征文档。

累积布局偏移 (CLS)