CLS值是所有布局偏移分数（影响分数×距离分数）的累积和，目标≤0.1；影响分数为不稳定元素在视口中的可见区域占比，距离分数为其最大位移占视口最大尺寸的比例。
CLS（Cumulative Layout Shift，累积布局偏移）直接反映用户看到的页面是否“稳得住”。它不是看某一次跳动，而是统计整个页面生命周期中所有意外位移的加总影响。目标值是 ≤ 0.1 —— 超过这个数，用户就容易点错、读断、失去耐心，搜索引擎也会降低推荐权重。
理解CLS怎么算出来的
每次元素发生意外移动，都会产生一个“偏移分数”，公式是：
影响范围 × 距离比例
- 影响范围：被移动元素占据视口的比例（比如一个横跨半屏的 banner 下移，影响范围就是 0.5）
- 距离比例：该元素移动的最大距离占视口最大尺寸（宽或高）的比例（比如它向下挪了视口高度的 15%，距离比例就是 0.15）
所有这类偏移分数加起来，就是最终 CLS 值。注意：只计算视口内可见区域的变化，滚出去的部分不计入。
图片和视频没留空间是最常见原因
浏览器渲染时不知道图片有多大，先按 0×0 占位，等图片加载完成才撑开容器，下方内容瞬间下坠 —— 这就是典型的高 CLS 场景。
- 给
<img>加上width和height属性（即使响应式布局也有效，浏览器会据此推算宽高比） - 用 CSS
aspect-ratio更灵活：style="width: 100%; aspect-ratio: 16/9; object-fit: cover;" - 视频推荐用容器垫高法：
padding-top: 56.25%（16:9）配合绝对定位子元素
字体加载导致文本重排也不能忽略
系统字体和 Web 字体宽度/行高不同，一替换就“跳字”，尤其标题或按钮文字位移明显。
- 在
@font-face中强制加font-display: swap，让文字先用 fallback 显示，再平滑替换 - 配合
<link rel="preload">预加载关键字体文件 - 避免用 font-weight 或 font-size 在加载后动态调整，保持字体回退前后尺寸一致
动态内容插入必须预留位置
广告、评论区、弹窗、懒加载模块……只要它们是异步进来的，又没提前占地方，就会把原有内容往下顶。
- 为广告容器设置固定宽高：
<div class="ad" style="width: 300px; height: 250px;"></div> - 用骨架屏（skeleton screen）替代空白等待，既提升感知性能，又守住布局空间
- 避免用
document.appendChild()直接插 DOM；优先用 CSS Grid / Flex 容器 +min-height或伪元素占位
不复杂但容易忽略。核心就三点：给媒体留地、让字体稳着换、为动态内容画框。测 CLS 推荐用 Chrome DevTools 的 Performance 面板或 Lighthouse 报告，重点关注首次加载和用户交互后的变化段。
