这个坑值得记一笔。CrUX 里移动端 INP 到了 380ms,桌面只有 90ms,本地用低端安卓机录性能面板,发现首屏后两秒内有一个 180ms 的长任务,来源是统计 SDK 的初始化。
刚开始盯着「低端机 CPU 降频,同一段代码耗时是桌面的四倍」,折腾了半个多小时,排掉了。
真正麻烦的地方在于,几个原因的现象几乎一样。统计 SDK 在 DOMContentLoaded 里同步初始化,阻塞点击响应;长任务期间正好有点击,输入延迟被计入 INP;第三方脚本没用 defer,与首屏渲染抢主线程。
先按设备类型拆分 INP 数据
curl -s 'https://crux.example.com/api?origin=https://www.example.com&formFactor=PHONE'
接着找出超过 50ms 的长任务
grep -o 'longtask' performance.json | wc -l
然后把 SDK 初始化挪到空闲时间
requestIdleCallback(() => initTracker());
末了检查脚本的加载方式
grep -n 'script src' templates/layout.html
这次没动代码,只在配置和运行环境上找原因。
改完先别撤,确认这几项。低端机 INP 降到 180ms 以内,长任务从每页 6 个降到 2 个,点击后的下一帧不再被阻塞。
INP 看的是最差那一次交互,平均值好看没用,要按页面类型和机型分别看分布。报错文案容易误导,真正的原因往往在相邻那一层的日志里。
