Lighthouse 里首屏 3.6 秒,把统计脚本那行注释掉立刻降到 1.8 秒,脚本本身只有 40KB,却卡在 head 里同步加载。乍看像缓存或者权限的锅,追下去往往不是。

<script defer src='/js/analytics.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', initStats);
</script>

追下去是这么回事:script 标签没有 defer 也没有 async,浏览器解析到就停下来下载执行,它还要再拉一次远程配置。首屏渲染被这个往返拖住,弱网下更明显。

「统计脚本阻塞」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。

能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。报错里带路径的,先去看那个路径在不在、权限对不对。

同一份配置存在多处的,先确认改的是被加载的那一份。

具体做法是,统计脚本统一加 defer,保证在 DOM 解析完再执行,不挡首屏;初始化代码包进 DOMContentLoaded,别在 head 里同步跑;同意之前不加载统计,改成点击后再动态插入 script。

验收就看一点,再跑一次 Lighthouse,首屏回落到两秒内,Network 里脚本发起时间排在文档之后。

作者 9823189