仅移动端站点LCP检测无得分显示问号 保留lottie动画如何修复

这个问题不是PageSpeed Insights（PSI）的bug，核心原因是lottie动画的渲染逻辑和PSI的LCP（最大内容绘制）捕获规则不匹配：当首屏最大元素是lottie渲染的动态内容时，lottie默认异步加载动画资源、容器初始无固定尺寸，导致PSI的LCP捕获窗口期内无法识别到有效最大元素，就会出现无得分只显示问号的情况，该问题确实会影响谷歌的核心Web Vital性能评级，无需移除动画即可修复。

• 给react-lottie的外层容器提前设置和动画渲染尺寸完全一致的固定宽高，不要依赖动画内容撑开容器，让PSI在页面初始渲染阶段就能识别到该容器为有效块级元素
• 调整react-lottie的配置参数，开启动画预加载：如果动画JSON资源体积不大可以直接内联到代码中，避免异步请求拉取资源的延迟，保证动画首帧在LCP捕获窗口期内完成渲染
• 给lottie容器添加fetchpriority="high"属性，提升浏览器对动画相关资源的加载优先级，进一步缩短首帧渲染耗时
• 新增和动画首帧内容一致的静态占位图，默认显示在lottie容器下层，等lottie触发DOMLoaded事件确认首帧渲染完成后再隐藏占位图，就算极端情况下PSI未捕获到动画元素，也能识别静态占位图作为LCP元素，避免出现无得分的情况

修复完成后可多次复测移动端PSI，排除单次检测的网络波动干扰，确认LCP得分正常展示即可。

内容的提问来源于stack exchange，提问作者Oliver Levay