CLS
Cumulative Layout Shift
累积布局偏移 · 页面元素意外跳动的量化度量
- 定义
- CLS（Cumulative Layout Shift）是增长领域的专业术语。CLS 量化页面生命周期内所有意外布局偏移的累积程度。
最后更新：2026-03-31
什么是CLS？
CLS 量化页面生命周期内所有意外布局偏移的累积程度。当你正要点某个按钮，页面突然插入一张广告把按钮挤走——这种体验就是 CLS 要捕捉的。Google 将 CLS < 0.1 定义为良好，> 0.25 为差。
- 无单位分数，公式 = 影响比例 × 距离比例，累积整个页面生命周期
- 良好阈值 < 0.1，差 > 0.25——数值虽小但对用户体验影响巨大
- 最常见元凶：未设尺寸的图片/视频、动态注入的广告、延迟加载的 Web 字体
CLS详解
CLS 是 Core Web Vitals 的视觉稳定性指标，计算页面中每次意外布局偏移的「影响比例 × 距离比例」之和。影响比例是偏移元素占视口的面积，距离比例是元素移动的距离占视口的比例。注意：用户主动触发的布局变化（如点击展开手风琴）不计入 CLS，只有「意外」偏移才算。常见触发场景包括：图片/iframe 未预留尺寸、异步加载的广告或嵌入内容、动态插入的 DOM 元素、Web 字体加载导致的文本重排。优化核心原则是「为动态内容预留空间」：给媒体元素设 width/height 或 aspect-ratio、使用 font-display: optional 或 swap、为广告位设固定容器尺寸。
公式提示
CLS = Σ(影响比例 × 距离比例)；仅累积意外偏移，用户触发的变化不计入；< 0.1 为良好。
CLS的应用场景
正式定义
量化页面生命周期内所有意外布局偏移累积程度的 Core Web Vitals 视觉稳定性指标。
应用场景
- 诊断页面内容跳动导致的误点击问题
- 评估广告/第三方嵌入对页面稳定性的影响
- 作为 SEO 技术审计中视觉稳定性维度的核心指标
常见误区
- CLS 不只在页面加载时计算，整个页面生命周期内的意外偏移都会累积
- 用户主动触发的布局变化（如点击展开）不算 CLS，只有意外偏移才计入
实际案例
📌 新闻站广告导致误点击
某新闻网站文章页 CLS 达 0.42，原因是正文上方的广告位异步加载后将内容下推。为广告容器设置固定高度后 CLS 降至 0.05，用户投诉减少显著。
📌 图片懒加载引发跳动
博客列表页使用懒加载但未给图片设 aspect-ratio，图片加载时撑开容器导致下方内容跳动。添加 width/height 属性后 CLS 从 0.31 降至 0.02。
CLS的参考来源
- 文档web.dev: Cumulative Layout Shift (CLS)Google Chrome Team
- 社区
关于CLS的常见问题
- CLS 分数多少算正常
- Google 标准是 0.1 以下为「良好」，0.1-0.25 为「需改进」，超过 0.25 为「差」。大多数优化良好的网站 CLS 在 0.05 以下。
- CLS 高怎么排查
- Chrome DevTools 的 Performance 面板可以可视化每次布局偏移。常见原因是图片/视频未设尺寸、动态广告注入、Web 字体加载导致文本重排。
- 用户点击触发的布局变化算 CLS 吗
- 不算。CLS 只计算意外的布局偏移，用户交互后 500ms 内发生的布局变化会被排除，不影响 CLS 分数。