术语表

什么是累积布局偏移（CLS）？怎么计分、怎么修

累积布局偏移衡量页面上可见内容意外跳动的程度。分数怎么算、多少算好，以及造成大多数偏移的原因。

陈屿审核人许安又称 CLS 最后更新 2026 年 11 月 4 日术语表

在 TapCub 里哪里看

性能报表

打开对应报表免费开始

一句话回答

累积布局偏移（CLS）是 Core Web Vitals 之一，给页面打开期间可见内容意外移动的程度打分，取一个会话窗口内偏移分数之和的最大值。不超过 0.1 算良好。

公式： 单次偏移分数 = 影响比例 × 距离比例 · CLS = 会话窗口（不超过 5 秒、间隔小于 1 秒）内偏移分数之和的最大值

什么是累积布局偏移？

累积布局偏移（CLS）衡量视觉稳定性：用户没有操作时，视口里的内容跳动了多少。你正在读一段字，上方加载出一个广告，文字被推下去，这一下就是布局偏移。CLS 是三项 Core Web Vitals 之一。

评级	CLS
良好	不超过 0.1
需改进	0.1–0.25
较差	超过 0.25

分数怎么算

每次偏移都有一个分数：

单次偏移分数 = 影响比例 × 距离比例

影响比例：移动的元素在移动前后合起来占视口的比例。
距离比例：移动的距离占视口较长边的比例。

算例：一个占半个视口的区块向下移动了四分之一个视口高度。移动前后合起来占视口的 75%，分数就是 0.75 × 0.25 = 0.1875，单这一次就算较差。

偏移会按会话窗口分组：间隔小于 1 秒的一串偏移，最长 5 秒。CLS 取总分最高的那一串，而不是整次访问的总和。点击、轻触或按键后 500 毫秒内的偏移会被排除，因为用户本来就预期页面会变。

原因和修法

原因	修法
图片或视频没写尺寸	写上 `width` 和 `height`（或 `aspect-ratio`），先把位置留出来
广告、嵌入内容和横幅后加载	预留固定位置；提示条放到底部或浮在上层
网页字体换上来尺寸不同	预加载关键字体；用调整过尺寸的后备字体
在已有内容上方插入内容	插到下方，或者等用户操作后再插
对 `top`、`height`、`margin` 做动画	改成对 `transform` 做动画

找出在哪里发生

先从 P75 CLS 较差的页面看起，再单独看移动端：窄屏会把图片和横幅挤进首屏。用慢速网络限速重新加载页面，盯着看哪里跳；或者用浏览器的性能面板看是哪个元素移动了。

在 TapCub 里看累积布局偏移

TapCub 用站点脚本从真实访问里采集 Web Vitals（第一个页面隐藏时上报一次；用 data-vitals="false" 关闭）。在网站统计 › 监测 › 性能里，卡片可在 P75、中位数、P95 和平均值之间切换，分组可按页面、设备、浏览器、国家和操作系统拆分，「最慢页面」按 P75 最大内容绘制排序。详见性能文档。

相关阅读：LCP、INP、网站性能指标。

常见追问

大家看完定义后最常问的几个问题。

还有其他问题？

直接和 TapCub 团队聊聊——工作日通常几小时内回复。

在线咨询帮助中心

CLS 多少算好？

按真实访问的 P75 计，不超过 0.1 算良好，超过 0.25 算较差，中间算需改进。

点击之后的偏移算吗？

不算。点击、轻触或按键后 500 毫秒内的偏移是用户预期的，会被排除。滚动不算输入。

CLS 有单位吗？

没有。它是由视口里移动部分的占比和移动距离算出来的分数。

大多数布局偏移是什么造成的？

没有预留空间的图片和嵌入内容、插到内容上方的广告和横幅、换成不同尺寸的网页字体，以及对 top、height 这类布局属性做动画。

在你自己的网站上看这个数字

加一行脚本就能开始，网站和 App 都能接，几分钟内就能看到第一批报表。

免费开始打开对应报表