这类问题我又碰上了一次。同一套代码,移动端体验分只有 62,桌面 95。移动 LCP 3.8 秒、桌面 1.6 秒,CLS 两边差不多,先把移动端真正拖慢的那一项拆出来再动手。

第一反应是「字体在移动端要重新下载」,验证下来不成立。

真正麻烦的地方在于,几个原因的现象几乎一样。移动网络下首屏图没有按视口给合适尺寸;移动端多加载了一个客服脚本;CPU 降速让脚本执行时间翻倍。

先分别跑两套报告留档

npx lighthouse https://www.example.com/ --form-factor=mobile --output=json --output-path=m.json

接着看移动端 LCP 元素是哪个

jq '.audits["largest-contentful-paint-element"]' m.json | head -20

给首屏图加 srcset 输出小尺寸

echo '<img srcset="cover-480.jpg 480w, cover-960.jpg 960w" sizes="100vw">'

末了把

客

改之前我把相关日志按时间截了一段存着,事后对时间线用得上。

中途换过一次思路,把范围缩到最小的那一层,反而快了。

改完先别撤,确认这几项。移动端 LCP 从 3.8 秒降到 2.4 秒,评分从 62 提到 84,桌面端没有受影响。

移动和桌面的差距大多来自网络与 CPU,不是样式写得差,先看资源体积再看代码。线上能稳定复现的问题都不算难,难的是只在大流量下才出现的那种。

作者 9823189