陈俊玮

动态插入的广告或嵌入内容 ：第三方广告脚本、社交媒体插件或iframe常在页面主内容渲染后加载，可能改变布局

此外，Google的 ☀️Lighthouse 和 Chrome DevTools Performance面板 能够详细分析布局偏移的具体来源

导致CLS升高的常见原因

Web字体加载导致的字体回💡退 ：自定义字体加载延迟时，浏览器先用后备字体显示文字，字体切换后文字尺寸变化可能引起重排

延迟加载的图片或懒加载资源 ：懒加载实现不当，🌺图片占位空间不足或缺失，在滚动加载时产生位移

以下常见措施汇总可参考： 优化方向 具体做法 预期效果 图片与视频 设置宽高属性及aspect-ratio 消除加载引起的空间抢占 广告与嵌入 预留固定尺寸容器 减少动态插入的布局影响 Web字体 优化font-display与后备字体 避免字体切换时的重排 动态内容 使用占位符与原生懒加载 保持滚动加载时的视觉稳❤️定 长期维护：将CLS纳入开发流程 CLS优化不是一次性工作

理解CLS指标：页面布局抖动的核心影响因素

现代浏览器可以据此预留空间，即使图片🔥尚未加载完成，也不会发生布局偏移

对于页面折叠线以下的内容，推荐使用浏览器原生 loading="lazy" 属性，同时配合尺寸声明