图片加载后把文字挤走，常见原因是页面没有提前为图片预留空间。应让浏览器在图片下载完成前知道合理尺寸或比例，再检查字体、广告及动态模块等其他位移来源。
先确认谁在移动
在浏览器性能工具中查看布局偏移记录，观察图片出现前后相邻文字的位置。页面顶部图片与下方文字一起移动，并不代表文字本身是根因。
区分首次加载和滚动后懒加载，也要检查手机端。网络很快时问题可能不明显，因此可以在受控慢速网络条件下观察。
为图片预留比例
HTML图片可提供正确的width和height属性，让浏览器推算比例；响应式样式可保持最大宽度100%与高度自动。使用固定比例容器时，应确保它与实际展示规则一致。
不要为了消除位移把图片强行拉伸。艺术方向不同的手机图和桌面图，可能需要按断点提供相应比例。
懒加载并不自动解决CLS
懒加载减少提前下载，但若没有预留位置，图片进入视口后仍可能把内容推开。首屏关键图片是否懒加载也应结合加载表现判断，不能全站机械开启。
背景图不使用img尺寸属性，应通过容器尺寸或比例预留空间。轮播则需要关注各张图和容器高度是否一致。
检查其他动态因素
网页字体替换、提示条插入、广告位和嵌入视频都可能造成位移。修好图片后仍有跳动，应继续查看具体偏移事件，而不是不断压缩图片文件。
优化前后使用同一页面与条件比较，并结合真实用户数据。实验室一次测试与长期用户体验不是同一份证据。
验收方式
检查手机和桌面首次加载、滚动到图片区域、轮播切换及弹出提示后的布局。确认文字位置稳定、图片不变形，且没有用大片空白掩盖错误比例。
图片越小，CLS就越好吗？ 文件更小可能更快加载，但根本问题是布局空间是否提前确定。只压缩文件，仍可能在较慢网络下出现位移。
参考资料
相关问题
本文为通用排查指南，依据所列官方资料整理；菜单名称和行为可能随版本及主机环境变化。配图为AI生成的概念示意，不是实际故障截图。
