用 Chrome DevTools 把 CLS 压到 0.02

页面在本地看着好好的，上线后布局分数却一路飘红，多半是图片没占位。

先量，再改

DevTools 的 Performance 面板录制一次加载，切到 Experience 轨，能直接看到偏移发生在第几毫秒。记住那个时间点，再去 Network 面板看当时加载了什么。

三个高频元凶

1. 图片没有宽高比：给 img 加上 width / height 或用 aspect-ratio，浏览器才能在图片回来之前预留位置。
2. 字体切换：font-display: swap 会让文字先以回退字体排版，回退字体宽度不同就会抖。给关键字体加 size-adjust，或者干脆预加载。
3. 动态插入的横幅、提示条：从上方插入的 DOM 会把内容整体往下推。这类元素用 position: fixed 或预留占位高度。

一个最小改动

.cover {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

<img src="cover.jpg" width="1280" height="720" loading="lazy" alt="">

两行属性，我们的列表页 CLS 从 0.35 掉到 0.02。布局偏移几乎从来不是框架问题，而是没给浏览器留信息。