减少GTag脚本的阻塞时间

Question

如果你能认出这一点：

<script src="https://www.googletagmanager.com/gtag/js?id=G-TOKENIDHERE"></script>

第一秒这是一个很重的文件，所以它很重要。 我做了什么：

1. 列出项目
2. 使用Async/Defer（但仍然阻塞）
3. 通过 PartyTown 将其加载到工作进程中，（请参阅此堆栈答案）并且脚本加载，但无法调用“收集”调用，因此没有分析。不过 Google 可以检测到该标签。
4. 将脚本内容从网址“googletagmanager.com/gtag/js?id=G-TOKENID”直接复制到我的页面，从而消除了阻塞时间。虽然我不确定这是否可以。互联网上没有任何内容提到这样做或不这样做。

该网页是完全静态的，内容非常少，因此由于像这样的第三方分析而被阻止快速渲染是不受欢迎的。

Answer 1

这对你有用吗？

window.addEventListener('DOMContentLoaded', () => {
  const script = document.createElement('script');
  script.addEventListener('load',() => document.querySelector('head').appendChild(script);
  script.src="https://www.googletagmanager.com/gtag/js?id=G-TOKENIDHERE";
});