CLS 是元素加载过程中来回跳,主因都是「先渲染后撑开」。修法:给 img 和 iframe 显式写 width 和 height,或者外层套一个 aspect-ratio 容器;字体用 font-display 配合 size-adjust,减少字体切换造成的重排;广告位和异步组件一律预留固定高度,别靠内容撑。用 Lighthouse 或 Performance 面板里的 Layout Shift 区域逐条定位。
<img src="cover.jpg" width="800" height="450" alt="">
/* 或容器占位 */
.thumb { aspect-ratio: 16 / 9; }
THE END






暂无评论内容