第一步：理解图片加载引发布局抖动的机制
CLS 的基本机理与影响因素
在网页渲染过程中，图片是最容易导致布局抖动的资源之一，因为图片的实际大小在加载前不可知。如果没有预留足够的占位空间，图片加载完成前后占用的尺寸会突然改变，从而引发页面其它元素的位置移动，形成CLS（Cumulative Layout Shift）的上升。对于用户体验而言，这种突然的移动会打断阅读节奏并降低可用性。同时，高 CLS 值往往与广告、图片网格和响应式图片的尺寸变化有关，需要在前端系统中实现稳定的占位和可预测的布局。要点在于从一开始就锁定图片的显示区域。
在评估页面性能时，CLS 指标直接反映了“可视区域内的意外移动”的程度，因此很多性能分析工具都会将图片加载导致的移动作为重点诊断对象。通过关注 CLS，我们可以把问题分解为“是否为图像预留空间”“是否有动态尺寸变化”，以及“是否存在延后加载带来的滚动影响”等要素。要把这三类问题降到最低，就需要从结构、样式与资源加载策略多维度入手。
本节的要点总结如下：图片尺寸未确定、缺乏稳定的占位、以及图片加载时的重排是布局抖动的核心原因，解决办法就是为图片预留稳定区域，并让加载过程尽量不可见地完成。以上思路构成了本指南的基本出发点。
// 简易 CLS 监控思路（示意）
let cls = 0;
new PerformanceObserver((list) => {for (const entry of list.getEntries()) {if (entry.entryType === 'layout-shift') {cls += entry.value;}}
}).observe({type: 'layout-shift', buffered: true});
第二步：为图片预留稳定的占位空间
设置固定宽高与纵横比
在 img 标签上同时设置 width 与 height，可以让浏览器在解析阶段就保留图片所需的空间，从而避免加载时的 reflow。未设置宽高的图片最易在加载完成前后改变布局，直接导致CLS 上升。
除了固定宽高，使用固定的纵横比也是常见做法，特别是在响应式设计中。通过保持一个一致的 aspect-ratio，可以使图片在不同设备上都占据稳定的显示区域，减少动态变化的概率。
为了更稳妥地管理占位区域，可以将图片包装在一个容器内，容器负责维持固定比率，而图片在容器中自适应填充。这种做法在复杂布局中尤为有效，能显著降低移动引起的内容跳动。
<div class="image-wrapper" style="width:100%; aspect-ratio: 16 / 9;"><img src="hero.jpg" width="1600" height="900" alt="主视觉" style="width:100%; height:100%; object-fit:cover;" />
</div>
.image-wrapper {width: 100%;aspect-ratio: 16 / 9;
}
.image-wrapper img {width: 100%;height: 100%;object-fit: cover;
}
通过这样的结构，浏览器在加载图片前就知道需要多大的空间，从而可以把页面的其他元素放在正确的位置，避免布局的突变。
第三步：使用现代布局技巧保护 CLS
CSS 与 HTML 的结合使用以稳定占位
将图片放置在一个具备稳定尺寸的容器中，是保护 CLS 的核心之一。使用 CSS aspect-ratio 属性可以在不同屏幕尺寸下维护统一的纵横比，避免因宽高变化导致的重排。
另外，object-fit: cover 可以让图片在保持纵横比的同时充满容器区域，减少因为图片本身缩略或放大导致的视觉跳动。通过这些现代布局特性，可以把布局抖动降至最低。
下面的代码示例展示了如何在实际应用中实现稳定的图片区域与适当裁切：
.card-image {width: 100%;aspect-ratio: 4 / 3;overflow: hidden;
}
.card-image img {width: 100%;height: 100%;object-fit: cover;
}
第四步：实战：懒加载、占位图与渐进加载
懒加载与占位策略的组合应用
为提升首屏渲染速度，同时控制 CLS，通常会结合 lazy-loading 与稳定的占位图。使用 loading="lazy" 可以推迟非关键图片的加载，但必须确保在实际加载前已经预留好空间，否则仍会带来布局抖动。因此，预留空间与懒加载应协同实现。
在占位阶段，可以使用低分辨率占位图、颜色占位块或骨架屏来模拟最终内容的尺寸与形状，从而让页面在真实图片加载前保持稳定。
一个常用的做法是：先显示占位区域，随后用 IntersectionObserver 监听进入视口的图片，将真实图片的 src 设置给 img，替换占位内容。这种方法能够在保证稳定布局的同时实现渐进加载。
<div class="image-slot" style="width:100%; height:auto; aspect-ratio: 16/9; background:#eee;"><img data-src="hero.jpg" alt="主视觉" loading="lazy" width="1600" height="900" style="width:100%; height:100%; display:block;"/>
</div>
// 简易占位+懒加载示例
document.addEventListener('DOMContentLoaded', () => {const img = document.querySelector('img[data-src]');const io = new IntersectionObserver((entries) => {entries.forEach(e => {if (e.isIntersecting) {e.target.src = e.target.dataset.src;io.unobserve(e.target);}});});io.observe(img);
});
此外，可以结合渐进加载的 JPEG 或 WebP 图像，优先加载低分辨率版本以快速占位，再在后台加载高清版本。这样的“先占位、再替换”的策略是解决 CLS 的有效途径之一。
第五步：资源加载顺序与浏览器优化技巧
关键资源的加载策略与优先级设置
对于页面中最重要的图片资源，使用 preload 提前加载可以确保在用户看到该部分之前就已经准备就绪，降低 CLS 的风险。预加载时要指定 as="image"，避免覆盖其他资源的加载计划。
同时，合理的域名预连接（preconnect）和资源排序也能降低请求阻塞，并帮助浏览器更稳定地分配渲染时间，从而抑制布局抖动。对于非关键图片，延迟加载与异步解码可以减少占用的主线程时间，降低资源竞争。
<head><link rel="preload" as="image" href="/images/hero-800.jpg" /><link rel="preconnect" href="https://images.example.com" />
</head>
// 优先级控制示例（伪代码）
const headImg = document.querySelector('img[data-src]');
headImg.decoding = 'async';
headImg.loading = 'eager'; // 针对关键图片提前加载
第六步：监控与持续优化
如何衡量 CLS 与持续改进的路径
要实现持续优化，需要对 CLS 进行监控与定期回顾。通过浏览器 Performance API，可以实时收集布局变化数据，结合自定义筛选条件，定位导致抖动的具体图片资源。
一个实用的做法是：在应用中给图片加载阶段打点，结合 PerformanceObserver 统计布局移动的累计值，并以时间线形式在开发者工具或自建仪表盘中呈现，帮助团队聚焦最需要优化的图片。
// CLS 监控与聚合（示意）
let clsValue = 0;
let entries = [];
const observer = new PerformanceObserver((list) => {for (const entry of list.getEntries()) {if (entry.entryType === 'layout-shift') {const shift = entry.value;clsValue += shift;entries.push({ time: performance.now(), shift });}}
});
observer.observe({ type: 'layout-shift', buffered: true });
关键目标是将图片相关的布局变动降到最低，通过稳定的占位、合理的懒加载策略与资源加载控制，实现更低的 CLS，并提升用户体验与搜索引擎友好度。这份 CLS 优化实用指南的核心在于把图片从进入视口到完全加载的过程变得可预测、可控。
