Lighthouse 的 CLS 显示 0.32 标红 打开页面能看到顶部横幅加载完正文往下跳一次 图片出来又跳一次 手机上尤其明显。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,偏移大多来自没声明尺寸的元素 图片只写 max-width 100% 广告位和 iframe 高度由内容撑开 浏览器先按零高度排版 资源到了再重排一次 整页跟着位移。
「CLS 尺寸占位」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。改完顺手把文档补一句,省得下次自己重新推一遍。
npx lighthouse example.com --only-categories=performance curl -sI https://example.com/a.png | grep -i content-length
监控和日志的时间要对上,时区不一致会多绕很大一圈。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。
具体做法是,给首屏可见的图片全部补上 width 和 height 属性 再用 CSS 设置 max-width 100% 和 height auto;广告位容器先用 min-height 占住固定高度 不要等脚本回调返回再把它撑开;会异步插入内容的容器加固定 aspect-ratio 把重排范围限制在容器内部。
最后用这个标准收尾,连刷三次 CLS 都低于 0.1 加载过程中没有任何元素把下面的内容顶走。
