先看现象。文章页 CLS 长期在 0.19,性能面板显示偏移发生在评论区加载完成那一刻,评论插件异步插入后把页脚整段往下推了三百多像素。
把日志和配置对完,能解释这个现象的基本就这几处。评论容器初始高度为 0,插入内容后撑开。还有一种是字体加载完成后行高变化,正文区域二次位移。
少数情况下是广告位没有写 min-height,填充时才知道尺寸。
不容易想到的是,图片没有写宽高比,加载完成后把文字挤走。
先用性能面板定位偏移元素
curl -s https://www.example.com/post-1024/ | findstr /i "comment-list"
给评论容器写最小高度
echo '.comment-list{min-height:420px;}';
给图片补上宽高属性
curl -s https://www.example.com/post-1024/ | findstr /i "width=\"800\""
剩下的就是重新测量 CLS
curl -s https://www.example.com/post-1024/ | findstr /c:"min-height"
这次没动代码,只在配置和运行环境上找原因。
改完先别撤,确认这几项。加最小高度后,评论区插入不再推动页脚,CLS 从 0.19 降到 0.04。
预留高度是最省钱的做法,等布局稳定再去优化加载顺序,投入产出比很低。同一份配置在测试环境跑通,不代表线上没事,两边的默认值经常不一样。
