商品列表用 srcset 切换尺寸，sizes 写成 100vw，实际容器只有 240px，图片加载后高度变化，列表页 CLS 一直停在 0.18。
一开始怀疑是「容器用 flex 布局，图片加载后撑开行高」，查了一圈，方向不对。
这类报错背后常见的原因有几处，逐个排除就行。sizes 与实际容器宽度不符，浏览器选了更大的图。还有一种是图片没写 width 和 height，加载前高度为 0。
少数情况下是响应式断点切换时重新选图，触发二次布局。
先看图片有没有留占位高度
curl -s https://www.example.com/list/ | Select-String "<img" | Select-Object -First 5随后按容器宽度改 sizes 并补宽高
echo '<img src="/p.jpg" srcset="/p-240.jpg 240w, /p-480.jpg 480w" sizes="240px" width="240" height="240">';给容器固定宽高比
echo '.thumb{aspect-ratio:1/1;overflow:hidden}';复核 CLS 变化
npx lighthouse https://www.example.com/list/ --only-audits=cumulative-layout-shift --chrome-flags="--headless"隔了一天再看，现象没变，说明不是偶发。
那几天正好在做别的变更，先把时间线对齐才敢动手。
排查用的命令都是临时敲的，没有写成脚本，事后才整理。
别只看报错消失，验证要多做一步。列表页 CLS 降到 0.05 以内，图片加载前后容器高度不变。
提醒一点。sizes 写错比不写更糟，浏览器会按错误宽度挑一张更大的图。报错文案容易误导，真正的原因往往在相邻那一层的日志里。