CLS 高不一定是图片没尺寸，我们查到的四类真凶

CLS 高，很多人第一反应是图片没写宽高。这个原因确实存在，但在我们今年查的 14 个软件站里，它不是主因：CLS 超过 0.25 的 5 个站，有 4 个的真凶是字体切换和动态插入的组件。图片没尺寸只占 1 个，而且那个站的 CLS 只有 0.18。

先把概念说清楚。CLS 是 Cumulative Layout Shift，衡量页面元素在加载过程中意外移动的幅度，0.1 以下算好，0.25 以上算差。注意"意外"两个字：用户点击后展开的内容不算，只有没人操作时自己跳的才计分。

字体切换导致的位移

中文站高发。回退字体和自定义字体的字宽不一样，字体一到位，整段文字重新换行，下面的内容全部移动。这种位移往往发生在首屏正文，分值很高。

一个做低代码平台的公司，CLS 0.29。移动端 h1 加两行副标题，字体到位后标题从两行变三行，下面按钮下移 48 像素。改法是把字体子集化和预加载做好，再用 size-adjust 校准回退字体的字宽，字号和行高都写死。

动态插入的组件

AB 测试、营销横幅、cookie 提示，这些组件在 JS 执行后往 DOM 里插东西，插在页面顶部就整页下移。

一个数据工具站的 CLS 是 0.31，查下来是 AB 测试脚本给导航条多加了一个"免费试用"按钮，导航从一行变两行，整页下移 64 像素。这种位移最隐蔽，因为产品经理认为那只是换了个版本。

懒加载内容的位置

用户往下读，上面的图片才开始加载，加载完撑开高度，把正在读的段落顶走。这种位移最招人烦，因为它发生在阅读过程中，而不是页面刚打开的时候。

改法是给懒加载的图片和广告位预留高度，或者用 content-visibility 配合 intrinsic size。

图片和 iframe 没尺寸

这个原因还在，主要是 iframe 和嵌入视频。img 现在大部分框架会带 width/height，但第三方 iframe（地图、演示视频、客服）经常没有。

第五类：单页应用的路由切换

这一点常被忽略。SPA 切换路由时，如果新页面先渲染一个空容器再填内容，或者旧页面在数据回来前先清空，中间会有一段时间页面高度不对，浏览器就记一次位移。文档站、控制台这类站高发。

查法是录一段站内跳转的 Performance，看路由切换后有没有连续两次布局变化。改法是用路由级的骨架屏，并且保证骨架和真实内容高度一致。

为什么中文站更容易中招

三条原因叠在一起：中文字体文件大、回退字体和自定义字体的字宽差异明显、正文行数多。同样一处字体切换，英文站位移 20 像素，中文站可能整段重排、位移 100 像素以上。

我们给中文站排优先级时，字体相关的位移永远排第一。先把字体加载路径修好，再去看图片和组件，顺序反过来会白干。

查法

Lighthouse 的 CLS 归因会给到具体元素，Chrome Performance 面板的 Experience 轨道能录到每一次位移和它的来源，真实用户数据那边用 web-vitals 库能拿到 largest shift 的元素。

我们一般先修移动端，因为移动端 CLS 通常是桌面端的两倍。修的顺序按"移动端面积最大的一次位移"来，不要按 Lighthouse 列出的顺序，前者是用户真正看到的，后者只是权重排序。