Pagespeed报道Google Analytics在页面加载中阻塞主线程
我在追求页面速度，部分原因是为了证明获取90%+始终是可以实现的。
我现在的主要问题是谷歌分析。在下面的例子中，它是通过Google加载的，所以屏幕顶部只有一个GTM片段--但是页面速度洞察力似乎表明是GA (和GTM)导致了最大的延迟。
有办法防止GA减缓页面加载吗？GTM脚本是否应该设置为异步(考虑到我们可能遗漏了一些分析数据)？
回答 4
Webmasters Stack Exchange用户
发布于 2022-02-23 10:26:39
GA4使用Google加载Google，这意味着对您的站点的性能有更大的影响。
为了将性能影响降到最低，下面是我做的一些事情。
使用预连接
通过将这两个标记添加到preconnect中，使用<head>：
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://www.google-analytics.com">您需要同时获得Google标记管理器，它将反过来获取。
preconnect告诉浏览器“我们肯定要连接到这个服务器，所以继续打开一个连接”，这会使事情稍微快一些。
使用async或defer
要加载脚本，您有两个选项，async和defer。
加载脚本async将提高所有现代浏览器的性能(基本上是IE除外)，不会产生负面影响。
使用defer将最大限度地减少对整个阻塞时间的影响，因为它将延迟脚本的执行，直到页面加载完毕；但是，它将影响报告的准确性，因为不完整的页面加载可能不会报告为hits。
如果使用defer，可以将<script>标记放在文档的底部(就在</body>标记之前，而不是<head>中)。
结果
使用preconnect和defer，我将Google对总阻塞时间的影响减少了大约60%。
Webmasters Stack Exchange用户
发布于 2019-12-13 16:40:23
我肯定会再次推荐加载GTM异步，它很可能会在不到一秒钟的时间内加载，所以您不会错过很多事件。在Google的分析文档中，他们建议加载异步。我想标签经理也是一样的。在我的站点上，我让它加载异步，它运行良好，我得到页面加载事件很好。
Webmasters Stack Exchange用户
发布于 2019-12-18 09:55:05
我不同意康纳的回答。
让我们比较这两种方法:对于GTM，您需要在头标签中使用
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) --> 和身体标签
<script async>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXXX');</script> 使用“异步”加载脚本(Google不告诉您)
对于Analytics.js，只需要在body-标记中使用。
<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'UA-56544056-1');</script> 这里的“异步”也提高了性能。
现在用测试这两个选项，如果您选择第二种方法，结果会更好。这是令人困惑的，因为第一种方法导致Javascript的流量减少，那么什么会给您提供更多的Pagespeed积分。考虑到这一点和谷歌正在推动GTM的事实，我认为选择第一种方法的较低的结果是Google无意的。但是还有其他测量页面性能的工具..。
我想知道其他用户是否能确认这一发现。
干杯，玛蒂亚斯
https://webmasters.stackexchange.com/questions/126661
复制相似问题
腾讯云开发者
