百度与 Google 同时加码：CLS 仍是最大失分项

2026 年第一季度，Google Chrome UX Report 发布的最新数据显示，移动端仍有约 22% 的页面未通过 CLS（累积布局偏移）阈值。与此同时，百度搜索在 2025 年底的「百度搜索落地页体验标准」更新中，也将页面稳定性纳入排名因素考量——虽然百度没有直接采用 CLS 这个指标名称，但"页面加载时内容不应发生跳动"这条规则本质上就是对 CLS 的要求。对中文网站来说，同时面向百度和 Google 优化时，CLS 是一个必须解决的共同项。

国内 CDN 厂商阿里云在 2025 年的技术报告中指出，图片加载导致的布局偏移占所有 CLS 问题的 65% 以上。其中最典型的场景是淘宝商品详情页——早期的详情页大量使用未声明尺寸的图片，导致用户在 4G 网络下浏览时页面频繁跳动，严重影响了转化率。淘宝前端团队在 2024 年的改造中，为所有详情页图片添加了显式的宽高属性和 CSS aspect-ratio，改造后移动端 CLS 从平均 0.18 降到了 0.03。

另一个典型案例是微信公众号文章内嵌的图片。很多运营者在编辑器中直接粘贴图片，生成的 HTML 往往缺少 width 和 height 属性。当用户在弱网环境下打开文章时，图片加载完成前的内容会被大幅推挤，严重影响阅读体验。微信公众号团队在 2025 年的编辑器更新中已开始自动为内嵌图片补充宽高属性，但历史文章仍需运营者手动修正。

图片为什么是 CLS 的头号元凶

浏览器渲染引擎在绘制页面时，需要为每个元素预留空间。如果 <img> 标签没有声明 width 和 height，浏览器会默认给它零高度。当图片数据加载完成后，浏览器才知道实际尺寸，于是将下方所有内容向下推——这就是一次布局偏移。

三种最常见的触发场景：

场景一：img 标签缺少 width 和 height 属性。 这是最普遍的问题。一个 <img src="banner.jpg"> 在图片加载完成前不占空间，加载完成后突然撑开 300px 高度，下方的标题和按钮全部被推下去。如果页面上有多张这样的图片，累积偏移量可以轻松超过 0.5。

场景二：仅使用 CSS aspect-ratio 而未提供 HTML 属性。 aspect-ratio 是现代 CSS 的利器，但部分旧版浏览器不支持。如果只依赖 CSS 而不在 HTML 标签上写 width 和 height，那些旧浏览器仍然看到零高度，依然会发生偏移。正确做法是两者都用——HTML 属性做兜底，CSS 做精确控制。

场景三：响应式图片的 srcset 缺少原始尺寸。 使用 srcset 或 <picture> 时，浏览器仍需要知道默认源的原始像素尺寸来计算宽高比。如果 <img> 元素上没有 width 和 height，浏览器无法在每个断点处预留正确的高度，每次切换源都会引发重排。

核心原则只有一个：在图片字节到达之前，让浏览器知道该留多少空间。

代码示例：三种修复方案

方案一：给每个 img 标签加上 width 和 height

<img src="banner.jpg" width="1600" height="900" alt="首页横幅" />

最简单、收益最高的修复。浏览器根据 1600:900 计算出 16:9 的宽高比，在图片加载前就预留好空间。即使后续 CSS 设置了 width: 100% 改变显示宽度，现代浏览器也会根据这个比例自动计算高度。关键点：HTML 属性设定的是宽高比，不是显示尺寸——显示尺寸交给 CSS 控制。

方案二：用 CSS aspect-ratio 控制流式容器

.banner {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

适用于宽度动态变化的容器。aspect-ratio 让高度随宽度按比例变化，配合 object-fit: cover 防止图片变形。适合横幅、卡片缩略图和网格布局。

方案三：padding-bottom 占位法（兼容旧浏览器）

.img-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
}
.img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

padding-bottom 的百分比基于容器宽度计算，形成一个固定宽高比的占位区域。这种方法虽然写法冗长，但兼容所有浏览器，适合需要支持 2021 年以前旧版本浏览器的项目。

上线前 CLS 检查清单

每次发布含图片的页面前，逐项核对：

  1. 每个 img 标签都有 width 和 height 属性。 无一例外，装饰性图片也需要。值设为源图片的实际像素尺寸。
  2. 首屏图片在 CSS 中使用 aspect-ratio。 作为 HTML 属性之外的第二层保险，确保容器高度在解析器到达 img 标签之前就已确定。
  3. 响应式图片的 img 元素上有 width 和 height。 属性值应与 srcset 中最大源一致，浏览器会按比例缩放。
  4. 懒加载图片同样需要显式尺寸。 loading="lazy" 只延迟加载，不防止偏移——图片最终加载时仍会推动布局。
  5. CSS 背景图设置 min-height。 没有内容的容器加上背景图，加载前高度为零，加载后撑开会偏移。
  6. 用 Chrome DevTools 的 Lighthouse 跑一遍。 DevTools 中运行 Performance 审计，CLS 分数会列出每次偏移的来源。
  7. 在 PageSpeed Insights 查看真实用户数据。 实验室数据模拟单设备，真实用户数据（CrUX）反映千万级用户的实际体验，两者对排名都有影响。
  8. 检查第三方嵌入内容。 微博、抖音等平台的嵌入卡片经常缺少尺寸声明，用 aspect-ratio 容器包裹它们。

对管理大量页面的团队来说，逐个检查 img 标签耗时且容易遗漏。Image Toolbox 网页优化器可以批量扫描 HTML，自动标记每个缺少尺寸的图片标签，并生成带正确 width/height 和 aspect-ratio 的修正代码——把数小时的审查工作压缩到几分钟。

参考来源