调试一则：图片加载导致的布局抖动

Lighthouse 跑出来 Performance 88，CLS 0.21，主要失分在布局抖动。

定位

Performance 面板里看到每次进入 /moments，图片加载完成后整列内容会向下跳一次。原因很直白：<img> 没有显式尺寸，浏览器在图片下载完成前不知道要占多高，只能先按 0 排版，加载完再重排。

修法

给所有图片容器写死宽高比：

.moment-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}

配合 loading="lazy" 和骨架占位，CLS 降到 0.02。

教训

布局抖动基本都来自"尺寸在加载后才确定"——图片、字体、异步插入的横幅。逐个消灭这三样，CLS 就下来了。