首页 LCP 在 2.1 到 3.8 秒之间跳,同一台机器连续测五次结果都不同,CrUX 报告里这个页面的 LCP 分布也明显分散。
一开始怀疑是「轮播容器的尺寸由图片撑开,切换时触发布局重排」,查了一圈,方向不对。
排查方向其实有限,先把可能性排一排。轮播每 4 秒切换,LCP 元素随当前展示的那张图变化。还有一种是后面几张图没有预加载,切到才开始请求。
还有一种情况,第三方轮播脚本在首屏阻塞了主线程。
连续测几次看 LCP 元素是否一致
for i in 1 2 3; do curl -s https://www.example.com/ -o /dev/null; done
再往下确认轮播容器的尺寸是否固定
curl -s https://www.example.com/ | grep -o '<div class="carousel[^>]*>'
固定容器比例并只让首屏第一张立即加载
.carousel{aspect-ratio:16/6;overflow:hidden;}
剩下的就是关掉自动轮播或改为用户触发
new Splide('#hero',{autoplay:false});
改完先别撤,确认这几项。多次测量的 LCP 都稳定在 1.9 秒上下,波动范围收窄到 0.2 秒以内。
容易忽略的是,LCP 只取当前视口内最大的元素,轮播切换会让它不断变化,固定首帧是最稳的做法。同一份配置在测试环境跑通,不代表线上没事,两边的默认值经常不一样。
