先看现象。合规弹窗在页面加载 1.2 秒后插入文档顶部,正文整体下移 120px,CrUX 里移动端 CLS 0.21,长期停在需改进区间。
这类报错背后常见的原因有几处,逐个排除就行。弹窗插在文档流里而不是固定定位,插入时挤动正文。也可能是弹窗高度随文案变化,预留高度按最小值算。
还有一种情况,字体异步加载后又换了一次,行高变化带来二次位移。
另外,骨架屏尺寸和真实内容不一致,加载完跳动。
定位位移来自哪个元素
curl -s 'https://developers.google.com/speed/pagespeed/insights/?url=https://www.example.com/' -o psi.html
接着把弹窗改成固定定位
sed -i 's#position: relative#position: fixed#' theme/assets/css/cookie.css
给缩略图写死宽高
add_filter('wp_get_attachment_image_attributes', function($a){ $a['width']=$a['width']?:800; $a['height']=$a['height']?:450; return $a; });
给字体加尺寸修正
@font-face{font-family:Noto;src:url(/f.woff2);size-adjust:96%;font-display:optional;}
白天有业务在跑,能验证的部分都压到了晚上做。
恢复的判定其实很直接。Lighthouse 的 CLS 降到 0.05 以下,PSI 里位移元素列表只剩零散的小幅移动。
补一句。固定定位能解决顶部位移,但会带来遮挡问题,最好在首屏之外再展开。同一份配置在测试环境跑通,不代表线上没事,两边的默认值经常不一样。
