CLS

CLS（Cumulative Layout Shift，累积布局偏移）是衡量视觉稳定性的指标，用来表示页面加载与运行期间，可见内容发生意外位移的程度^[1]。它是核心网页指标的一项，量的是页面会不会突然乱动；数值偏高时，用户想点的按钮被挤走，容易点错地方^[2]。CLS 没有单位，取值由位移面积与位移距离算出，它不进入抓取判断，只作为页面体验的排序参考^[2]。

计量的方式

CLS 由两个比例相乘得到：受影响面积占比与位移距离占比^[4]。受影响面积占比是位移元素占视口的面积比例，位移距离占比是最大位移距离除以视口的长边。两个比例都不大时，乘积才小。

整页的 CLS 不把全部位移相加。它取最差的一段会话窗口，窗口内两次位移的间隔小于 1 秒，窗口总时长不超过 5 秒^[4]。这样设计，是为了不让长时间停留的页面被反复累计。

及格线与评级

Google 把 CLS 分成三档，取值按第 75 百分位计算^[2]：

评级	第 75 百分位取值
良好	0.1 以内
需要改进	超过 0.1，不超过 0.25
差	超过 0.25

超出及格线的影响

没通过的页面会显示在 Search Console 里，按网址分组列出^[2]。用户侧的损失是误触：按钮、链接、表单在点击前移动，用户会点到别处，甚至误提交。CLS 属于页面体验相关的排序参考，不单独决定名次。

常见成因

• 图片与视频没有写宽高，浏览器先按零尺寸排版，资源到达后把下方内容推走；
• 广告、嵌入内容、<iframe> 没有预留尺寸；
• 脚本在页面加载后往上方插入内容；
• 网络字体替换回退字体时，字宽与行高发生变化；
• 动画改了 top、left、width 这类属性，触发了重新布局。

改善办法

1. 给图片与 <iframe> 写明 width 与 height，或者用 CSS 的 aspect-ratio 预留比例；
2. 给广告位与嵌入内容留出固定尺寸，别等加载完再撑开；
3. 字体用 font-display 控制替换时机，并挑选度量接近的回退字体；
4. 动画只用 transform 与 opacity，这两者不触发布局；
5. 不要在已有内容上方插入横幅或通知条。

<!-- 写明宽高，浏览器先按比例留出空间，图片到达后不再挤动内容 -->
<img src="/photo.webp" width="800" height="600" alt="示例图片">

改动带来的代价

预留尺寸会在资源未到时留下空白，观感上出现占位框。回退字体与目标字体难免有差别，强行对齐会牺牲字形。给广告位留固定尺寸，广告尺寸多变时会出现留白或者裁切，变现效果可能受影响。

与抓取和收录的关系

CLS 在浏览器渲染过程中产生，爬虫不感知布局跳动，所以它不进入抓取与收录的判断。百度把搜索分成抓取、建立索引、展现三步^[3]，这三步都发生在服务器与应用侧。CLS 影响的是用户阅读与点击的顺畅度，以及页面体验这一路的排序参考。

附录

参见

• LCP
• INP
• 图片优化
• Web 字体
• 广告与赞助披露

参考资料

官方（境外）

1. 《LayoutShift》，MDN Web Docs。
2. 《Cumulative Layout Shift (CLS)》，web.dev，2025-02-07 更新。

官方（国内）

3. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

4. 《What is Cumulative Layout Shift (CLS) and how to fix it》，corewebvitals.io，2026-03-27 更新。

外部链接

无。