你有没有遇到过这种情况：正准备点击网页上的某个按钮，突然整个页面内容向下跳了一下，结果你点到了完全不相干的广告或链接？这种让人抓狂的体验，正是 CLS（Cumulative Layout Shift，累积布局偏移） 要解决的核心问题。
CLS 是 Google 在 2020 年推出的网页用户体验核心指标之一，专门用来衡量 页面视觉稳定性。简单说，它量化了页面加载过程中，内容发生意外移动的程度。分数越低越好——理想情况下应该低于 0.1，超过 0.25 就属于用户体验较差的范围。
页面布局偏移的根本原因，在于 内容加载的异步性和资源尺寸的不确定性。当浏览器开始渲染页面时，如果某些元素（比如图片、广告、嵌入视频）的尺寸没有预先定义，浏览器就会先按默认值或零高度渲染，等资源真正加载完成后再重新计算布局——这个"重新计算"的过程，就会导致已经显示的内容突然移位。
最典型的场景包括：
这些看似微小的移动，累积起来就会严重破坏用户的浏览连贯性，尤其在移动设备上更为明显。
CLS 的计算公式是：影响分数 × 距离分数。
影响分数 指的是不稳定元素在两次渲染帧之间，占据可视区域的比例。比如一个元素原本占屏幕 50% 的面积，移动后又占了另外 25% 的新区域，那么总影响面积就是 75%，影响分数为 0.75。
距离分数 则是元素移动的最大距离与视口高度的比值。如果一个元素在 800px 高的屏幕上向下移动了 200px，距离分数就是 0.25。
两者相乘得出单次偏移的分数，而 CLS 是在整个页面生命周期内，所有意外布局偏移分数的累加值。这里的"意外"很关键——用户主动触发的交互（如点击按钮展开内容）产生的布局变化不计入 CLS，只有那些在用户毫无准备时发生的移动才会被惩罚。
如果你的网站属于以下类型，CLS 应该成为重点优化对象：
电商和交易平台：用户在浏览商品或填写支付信息时，页面突然跳动可能导致误操作，比如点错商品、输错金额，直接影响转化率和信任度。
新闻与内容媒体：读者正沉浸在文章中，突然插入的广告把段落挤开，阅读体验被打断，跳出率会明显上升。
移动优先的应用：手机屏幕小，任何布局偏移都会被放大，尤其在网络较慢的环境下，资源加载延迟更容易引发大幅度跳动。
依赖 SEO 流量的网站：CLS 是 Google 核心网页指标（Core Web Vitals）的三大支柱之一，直接影响搜索排名。如果竞争对手的 CLS 更优，你的自然流量可能会被分流。
想象一个在线订餐网站：用户打开菜单页面，看到一道菜品的图片和价格，准备点击"加入购物车"按钮。就在手指即将触碰屏幕的瞬间，页面顶部突然加载出一条促销横幅广告，整个内容向下偏移了 150 像素——用户最终点到的是下一道菜的按钮，不得不返回重新操作。这种体验不仅让人恼火，还可能导致订单放弃。
再比如一个技术博客：读者正在阅读一段代码示例，突然页面顶部的网页字体从系统默认字体切换为自定义字体，行高变化导致代码块整体下移，读者需要重新定位阅读位置。类似的干扰累积多次，用户很可能直接关闭页面。
解决 CLS 的关键在于 提前为内容预留空间，避免资源加载完成后引发布局重排。
为图片和视频设置明确的宽高属性：即使使用响应式设计，也可以通过 aspect-ratio CSS 属性或 width 和 height HTML 属性，让浏览器提前计算占位空间。
为广告位和嵌入内容保留固定容器：不要等广告脚本加载完才撑开空间，而是预先用空白占位符或骨架屏标记区域。
优化字体加载策略：使用 font-display: swap 时要注意备用字体和目标字体的尺寸差异，或者通过 size-adjust 属性让备用字体尽量贴近最终字体的度量值。
避免在已渲染内容上方动态插入元素：如果必须插入（比如通知横幅），应该用动画平滑过渡，或者让新内容覆盖而非推挤原有内容。
延迟加载非关键资源：对首屏外的图片和广告使用懒加载，减少初始渲染时的不确定性。
CLS 的意义远不止于通过 Google 的审核或提升 SEO 排名。它真正反映的是 你对用户时间和注意力的尊重程度。当用户无需反复调整视线、重新定位内容、担心误点广告时，他们会更愿意停留、更愿意信任你的网站、更愿意完成转化行为。
从商业角度看，降低 CLS 能够直接提升关键指标：电商网站的加购率、内容网站的停留时长、表单页面的完成率。而从技术演进的角度看，CLS 的出现推动了整个行业对 性能与体验平衡 的重新思考——快速加载内容固然重要，但如果加载过程破坏了用户的心流状态，速度优势反而会变成负担。
CLS 并不是一个需要追求绝对零值的指标，而是一个持续优化的方向。通过工具（如 Chrome DevTools、Lighthouse、PageSpeed Insights）监测实际数据，结合真实用户反馈，你可以逐步找到性能、功能与体验的最佳平衡点。
