CLS 统计页面加载过程中发生的所有意外布局位移的总和。当某个可见元素偏离其初始渲染位置时，就发生了一次布局位移——例如，图片在未预留尺寸的情况下加载并将文字向下推，或者广告出现并挤占了用户正在阅读的内容。
阈值（Google）：
良好：CLS ≤ 0.1
需要改进：0.1–0.25
较差：CLS > 0.25
常见原因：
- 图片和视频没有显式的
width和height属性 - 页面渲染后才注入的广告或 iframe
- 网页字体加载时导致文本重排（FOIT / FOUT）
- 在已有内容上方动态注入的内容
修复方法：始终为图片和视频元素设置显式尺寸。为广告和动态内容预留空间。使用 font-display: optional 或 font-display: swap 并结合预加载，以最大限度地减少与字体相关的位移。
使用 Core Web Vitals & INP Checker，查看你自己网站真实的 INP、LCP 和 CLS 得分。