修复 Search Console 中 CLS 问题的最佳技巧

Table of contents

CLS：背景知识

累积布局偏移衡量意外的布局移动。每当可见元素在页面加载或交互过程中改变位置，就会计算一次布局偏移分数。累积值即为 CLS。

常见原因：

• 图片或 iframe 缺少显式的 width 和 height 属性
• 广告在周围内容已渲染后才扩展
• 动态注入的内容（横幅、Cookie 通知、聊天组件）插入到现有内容上方
• 网络字体加载时引发闪烁和重排（FOUT/FOIT）
• 第三方 JavaScript 在初始渲染后追加 UI 元素

相关文章：如何修复 Search Console 中的 LCP 问题

测量 CLS

Google Search Console

Search Console 的 Core Web Vitals 报告是起点。它会显示被标记为「差」（CLS ≥ 0.25）或「需要改进」（0.1–0.25）的页面，按问题类型分组。使用该报告获取受影响 URL 的列表。

PageSpeed Insights

PageSpeed Insights（PSI）同时展示实验室数据（Lighthouse 模拟）和来自真实用户的现场数据（Chrome UX Report，CrUX）。现场数据对排名更重要——它反映的是真实用户体验，而非合成测试结果。

PSI 只模拟加载时的初始视口，因此可能遗漏由滚动或用户交互触发的 CLS。对于这类情况，请使用 Chrome DevTools。

Chrome DevTools 与 Web Vitals 扩展

Web Vitals Chrome 扩展（由 Google 维护）在你滚动页面和与页面交互时实时显示 CLS 分数，是手动复现布局偏移的最快方式。Chrome DevTools 的 Performance 面板还会高亮显示布局偏移记录，并附带注释，说明哪些元素发生了偏移及偏移幅度。

修复 CLS 问题

为所有图片和 iframe 添加 width 和 height

这是对大多数网站影响最大的修复措施。没有显式尺寸时，浏览器不知道图片加载时应预留多少空间，导致图片出现时将下方内容向下推移。

<!-- 不好：没有尺寸 -->
<img src="photo.jpg" alt="…">

<!-- 好：显式尺寸让浏览器预留空间 -->
<img src="photo.jpg" alt="…" width="800" height="450">

现代 CSS（aspect-ratio）可对响应式图片实现相同效果，但在 HTML 中显式设置 width 和 height 属性仍是最可靠的方法，大多数现代框架和 CMS 图片管道会自动处理这一点。

为广告预留空间

广告是变现网站 CLS 偏高的最常见原因。广告网络投放的广告尺寸是动态的，若未预留空间，广告加载时页面就会重排。

1. 在广告标签加载前，预留一个固定容器（min-height 对应最常见的广告尺寸）。
2. 若无广告投放，不要折叠容器——空占位符可避免二次重排。
3. 对放置在视口顶部附近的广告要格外谨慎。插入折叠线以上的非固定广告会导致最差的 CLS 分数。
4. 利用广告网络的历史展示数据确定每个广告位最常见的广告尺寸，并据此调整容器尺寸。

避免在现有内容上方插入内容

Cookie 同意横幅、通知提示和聊天组件如果异步加载并出现在现有内容上方，是频繁引发 CLS 的来源。解决方案：

• 在固定定位的遮罩层中加载（不影响文档流）。
• 若必须以内联形式出现，则在布局中提前分配空间。
• 对于 Cookie 横幅，考虑将其置于屏幕底部——这完全避免了 CLS，且同样符合合规要求。

修复网络字体加载（FOIT 与 FOUT）

FOIT（不可见文本闪烁）发生在浏览器隐藏文本直至自定义字体加载完毕时。FOUT（无样式文本闪烁）发生在先显示回退字体、再替换为自定义字体时——字体度量的差异会引发布局偏移。

解决方案是将 font-display: swap 与关键字体的 <link rel="preload"> 结合使用：

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap 会产生 FOUT（可见但无样式的文本）而非 FOIT（不可见的文本），这对 CLS 更有利，因为文本立即可见。为进一步降低字体替换对指标的影响，可使用 CSS 属性 size-adjust 使回退字体的度量与自定义字体匹配，从而最小化自定义字体生效时的重排。

第三方 JavaScript

第三方脚本（分享按钮、评论组件、在线聊天、分析弹窗）异步加载，常在页面已渲染后注入 UI 元素。为最大程度降低其对 CLS 的影响：

• 尽可能将第三方视觉元素推到初始视口以下——页面更靠下的内容有更多时间在用户滚动到达前完成加载。
• 在脚本执行前预先定义容器尺寸，让浏览器提前知道需要预留多少空间。
• 使用 Chrome DevTools 的 Network 标签，按第三方来源过滤，识别哪些脚本在造成布局偏移。

懒加载与占位符

懒加载将图片的加载延迟到接近视口时才执行，可节省带宽。但若未设置占位符，图片容器会折叠到零高度，图片加载时再突然弹开。

务必确保懒加载元素具有显式尺寸，或通过 CSS 设置了 aspect-ratio，以便浏览器在图片加载前就预留正确的空间。这同样适用于原生 loading="lazy" 和基于 JavaScript 的懒加载器。

CLS — 2026 常见问题

2026 年 FID 还是排名信号吗？

不再是。Google 于 2024 年 3 月正式将 FID（首次输入延迟）从 Core Web Vitals 中淘汰，以 INP（下次交互到绘制时间）取而代之。当前的 CWV 三项指标为 LCP、INP 和 CLS。请更新所有仍引用 FID 的内部文档或工具。

CLS 的目标分数是多少？

Google 的阈值：低于 0.1 为「良好」，0.1–0.25 为「需要改进」，高于 0.25 为「差」。目标是保持在 0.1 以下。分数按 CrUX 现场数据中页面加载的第 75 百分位数衡量。

CLS 影响排名吗？

影响，但只是众多信号之一。Core Web Vitals 自 2021 年中期以来一直是页面体验排名因素。CLS 差不会让一个强力页面一落千丈，但在旗鼓相当的情况下可能成为决定性因素，并且会直接损害用户参与度指标（跳出率、会话深度）。

我的 PSI 分数显示 CLS 良好，但 Search Console 将该页面标记为差——哪个是对的？

两者冲突时，相信 Search Console（现场数据），而非 PSI 实验室数据。PSI 实验室测试仅模拟初始视口加载，会遗漏由用户滚动、较慢网络下的字体替换或交互后加载的广告所触发的 CLS。Search Console 中的 CrUX 现场数据反映的是真实用户在真实条件下的体验。

延伸阅读：

• 如何修复 Search Console 中的 LCP 问题
• 如何优化网站速度
• 技术 SEO 审计

简短版本

如果你阅读本文是因为文中描述的工作流程正在消耗你整整一周的时间，这正是我构建 AI 智能体所针对的那类循环。每次同时开放两个开发名额。

2026 年 5 月更新

2026 年 Google 的核心叙事是AI Overviews 无处不在：2023 年的 SGE 实验已于 2024 年 5 月升级为默认功能，目前出现在约~60% 的美国信息类查询中。对于 SEO 和广告运营者：

• 含 AI Overviews 的查询的自然搜索 CTR 平均下降了 15–30%，来源于 Ahrefs、Authoritas 等机构的已发布研究（2024–25 年数据）。
• Google Ads 将多项 PMax 功能更名为 AI-powered Search；广告系列管理界面现在默认推荐 AI 出价策略。
• Search Console 于 2025 年底新增了「AI Overview 展示次数」过滤器——如果本站有文章引用了 GSC 报告，相关内容需要更新。
• Google 的广告收入在 2024 年突破约 2650 亿美元；Search 仍占 Alphabet 总收入的约 57%。

2026 年「Google 如何赚钱」的答案：依然是搜索广告（主导地位），但 YouTube 广告、Cloud 和订阅服务（YouTube Premium + Google One）现在都已是重要的收入线。