谷歌标签管理器增加了最大的内容绘画。 页面完全加载后如何加载？

Question

我有一个非常简单的页面，包括引导程序。 pagespeed 中的页面得分为 99，LCP 为 2.0，但是当我添加 Google 标签管理器脚本时，页面得分变为 85，LCP 变为 4.2

无论如何在页面完全加载后加载该脚本以防止降低分数和增加 LCP

<script defer src="https://www.googletagmanager.com/gtag/js?id=UA-xxx-1"></script>
<script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-xxx-1');
</script>

Answer 1

您会看到<script type="application/javascript">的位置，添加延迟规则。 所以它变成了<script defer type="application/javascript"> 。 这样，它将在最后运行该部分。 虽然老实说，那里并没有发生很多事情。

Answer 2

您可以尝试async属性，它应该已经是默认的https://developers.google.com/analytics/devguides/collection/gtagjs ：

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxx-1"></script>
<script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-xxx-1');
</script>