如果从上述工具中无法准确地确定哪些脚本导致了最大的性能瓶颈,那么使用 Chrome 的性能监视器进行深入研究可以提供更多有用的见解,例如:
哪些脚本在第一次和最大绘制(下面显示的 FCP 和 LCP)之前执行;尽可能减少在 FCP 和 LCP 之前执行的 JS 非常重要
哪些脚本(以黄色突出显示)执行时间最长
什么是“耗时超过 50 毫秒的任务将阻塞主线程并添加到 TBT
哪些函数构成了长任务,可以在每个顶级 JS 任务下进行深入研究
长脚本任务的性能监视器细分
Chrome 的性能监视器使用慢速 法国号码 网络和 CPU 减速进行模拟,显示在 FCP 和 LCP 之前执行了几个较长的脚本任务
耗时较长的任务也会影响“交互到下一次绘制”的 INP 指标。例如,如果用户与汉堡菜单交互,这需要一些 JS 才能触发,但 CPU 正在执行其他 JavaScript,则在执行交互之前会有更长的延迟。
2. 使用商业智能工具找到适当的平衡
跟踪和分析的业务需求通常意味着,当用户点击网站上的任何页面时,第三方工具(如 Google Analytics、Hotjar、Google Tag Manager、VWO 等)将全局加载。有时,几乎无法避免第三方脚本的影响,但有很多方法可以最大限度地减少对性能的影响。
您是否需要全天候运行 A/B 测试工具和热图跟踪?当收集到足够的数据后,可以禁用这些工具和热图跟踪
尽量减少同时运行类似功能的第三方平台
实施 Cookie 阻止 GDPR Cookie 横幅实际上可以帮助提高性能,因为它们通常会预先阻止 Cookie 设置脚本
看看将多个 GTM 帐户合并为一个帐户
使用GTM 脚本的服务器端渲染可以帮助消除 GTM 脚本对性能的影响
推迟 GTM 中的脚本和标签在页面加载时执