先看现象。文章页 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。

预留高度是最省钱的做法,等布局稳定再去优化加载顺序,投入产出比很低。同一份配置在测试环境跑通,不代表线上没事,两边的默认值经常不一样。

作者 9823189