结论:CLS 优化的关键是给所有会异步变化的元素预留固定尺寸,别让内容加载时把页面顶来顶去。
① 帖子里的图片、视频、广告位都要写死 width 和 height,或者用 aspect-ratio 占位,浏览器提前知道要留多大空间就不会跳。
② 字体加载用 font-display: swap 并预加载关键字体,避免文字先隐藏后显示导致整段位移。
③ 论坛常见的公告条、签到弹窗、浮动广告,尽量用 fixed 或 absolute 定位,不要插在文档流里把正文挤下去。
④ 用 Chrome DevTools 的 Performance 面板录制加载过程,看 Layout Shift 标记定位具体元素,改完再测,CLS 控制在 0.1 以内算合格。