---

title: "CLS 深入解析：Cumulative Layout Shift 的成因与治理"

keywords:

• CLS
• 布局偏移
• 尺寸占位
• 字体加载
• 懒加载
• 动画

description: "解释 CLS 的计算与场景差异，梳理常见成因（缺失尺寸、字体 FOIT/FOUT、懒加载/广告、动画），给出治理清单与验证参考。"

categories:

• 文章资讯
• 技术教程

---

概述

CLS 衡量页面布局意外变化的程度。加载阶段与加载后的意外变化均会计入（交互 500ms 内的预期变化不计入）。治理重点在于提供稳定的占位、规范字体加载与避免非 transform/opacity 动画引起的重排。

常见成因

• 图像/嵌入缺失尺寸：未设置 width/height 或 CSS 尺寸导致内容加载后推挤布局［参考1］。
• 字体加载：FOIT/FOUT 造成文本从不可见或回退字体切换到 Web 字体，引发布局偏移［参考1,3］。
• 懒加载与广告：滚动时异步插入内容，若无占位会挤压布局；SPA 过渡超过 500ms 也可能计入［参考1］。
• 不当动画：改变 top/left/width/height 等会触发重排，应使用 transform/opacity。

治理清单

• 提供尺寸占位：为图片、视频、嵌入与组件设定明确尺寸或比例盒；使用 aspect-ratio 与占位符。
• 字体策略：本地托管与 preload；font-display: swap/fallback/optional 以避免 FOIT；考虑系统字体栈减少偏移［参考2,3］。
• 懒加载策略：为懒加载内容预留容器尺寸；使用占位骨架；避免插入前移内容；谨慎广告插入。
• 动画与过渡：使用 transform/opacity；避免布局属性动画。

参考与验证

• ［参考1］web.dev：优化 CLS（加载阶段与后加载场景、500ms 规则、常见成因）：https://web.dev/articles/optimize-cls
• ［参考2］WordPress 指南：字体加载与 FOIT/FOUT 避免建议：https://www.wbolt.com/cumulative-layout-shift.html
• ［参考3］文章：字体对 CLS 的影响与 FOIT/FOUT 解析：https://www.positional.com/blog/cumulative-layout-shift

关键词校验

关键词与 CLS 成因与治理一致。