记录一下那天晚上的排查过程。移动端 CLS 一直在 0.25 左右,报告标注的偏移元素是顶部横幅广告。广告加载完成后把正文整体往下推了一屏,用户经常点错位置。
排查方向其实有限,先把可能性排一排。广告容器没有设置固定高度,位置随内容变化。也可能是广告脚本异步插入,尺寸要等返回才知道。
少数情况下是字体替换导致文字换行,行数发生变化。
给广告容器预留最小高度
.ad-slot { min-height: 100px; }
字体加载前先固定行高
font-display: optional;
等前面都确认过,再确认容器样式已生效
curl -s https://www.example.com/ | grep -o 'ad-slot'
中间停过一次,把已经改的东西回滚干净,再重新来一遍。
别只看报错消失,验证要多做一步。广告加载前后正文位置不再跳动,CLS 降到 0.1 以下。
提醒一点。预留高度要和最常见的尺寸一致,留得太小照样会跳,留得太大又会空出一块,先看一周的广告尺寸分布再定。监控比日志更早给出信号,事后回看经常能提前半小时发现异常。