布局抖动CLS是核心Web指标之一，用于衡量页面加载过程中元素意外偏移的程度，数值越低说明页面稳定性越好。未指定尺寸的图片是引发CLS的常见原因，浏览器在图片加载完成前无法预留对应空间，会导致后续内容向下偏移。
什么是CLS布局抖动
CLS全称Cumulative Layout Shift，即累积布局偏移，计算方式是元素偏移距离分数乘以受影响区域分数。当页面中的元素在已渲染完成后发生位置变化，就会产生布局偏移，多次偏移的累积值就是CLS。谷歌要求页面CLS得分低于0.1才算合格。
未指定图片尺寸引发CLS的原理
浏览器渲染页面的过程是流式布局，当遇到未设置宽高的图片标签时，浏览器初始会将图片的占位空间设为0，等图片加载完成后才会根据图片实际尺寸重新计算布局，这个过程中图片下方的所有元素都会被向下推，产生明显的布局偏移。
指定图片尺寸的实现方法
1. HTML中直接设置宽高属性
在<img>标签上直接添加width和height属性，浏览器会提前根据这两个值计算占位空间，即使图片未加载完成也不会影响其他元素的位置。
<!-- 直接指定图片的宽高属性 --> <img src="banner.jpg" alt="首页横幅" width="800" height="400" >
2. CSS中设置宽高或使用aspect-ratio
如果图片尺寸需要通过CSS控制响应式适配，可以使用aspect-ratio属性指定宽高比，或者同时设置max-width和height为auto，保证占位空间比例正确。
/* 使用宽高比适配不同屏幕 */
.responsive-img {
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* 指定宽高比为16:9 */
}
<img class="responsive-img" src="product.jpg" alt="产品展示图">
3. 响应式场景下的尺寸适配
对于需要根据屏幕宽度变化的图片，可以结合srcset和sizes属性，同时指定不同屏幕下对应的图片尺寸，浏览器会自动选择匹配的图片并预留对应空间。
<img src="image-800w.jpg" srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" alt="响应式展示图" width="800" height="600" >
其他相关优化技巧
- 给所有媒体元素（视频、iframe等）都预留固定尺寸，避免同类布局偏移问题
- 使用loading="lazy"延迟加载非首屏图片时，依然需要提前指定尺寸
- 避免在图片加载完成后通过JS动态修改图片的宽高属性
如何验证CLS优化效果
可以通过Chrome DevTools的Lighthouse面板运行性能检测，查看CLS得分情况，也可以在Performance面板中录制页面加载过程，观察是否有布局偏移的标记。优化后CLS得分降低到0.1以下，就说明图片尺寸相关的布局抖动问题已经解决。
CLSWeb性能优化图片尺寸布局抖动layout_shift修改时间：2026-07-22 03:27:10